IMP: readme with darkmode

Author: GrimLink

README.md

@@ -28,7 +28,9 @@ module.exports = {
     require('@fylgja/tailwindcss-plugin-cssprops')({
       tokens: {
         colors: {
-          primary: "200 50% 50%" // HSL color syntax
+          primary: {
+            DEFAULT: "200 50% 50%" // HSL color syntax
+          }
         },
       },
     }),
@@ -43,6 +45,8 @@ module.exports = {
 To take it a step further, you can also add your tokens to TailwindCSS colors:
 
 ```js
+const colors = require("@fylgja/colors/hsl");
+
 module.exports = {
   theme: {
     extend: {
@@ -58,8 +62,8 @@ module.exports = {
       tokens: {
         colors: {
           primary: {
-            DEFAULT: "200 50% 50%" // HSL color syntax
-          }
+            DEFAULT: colors.purple[8],
+          },
         },
       },
     }),
@@ -70,3 +74,57 @@ module.exports = {
 Now you can use it as `bg-primary`.
 
 For more information on how to use CSS variables in TailwindCSS, refer to the [TailwindCSS docs on using CSS variables](https://tailwindcss.com/docs/customizing-colors#using-css-variables).
+
+### Dark Mode
+
+This plugin fully supports dark mode, just like TailwindCSS. The difference is that you no longer need to define the utilities in your HTML.
+
+To use dark mode tokens, add the key `@media:dark` to your tokens. Anything inside this key will automatically use the dark mode media query.
+
+```js
+module.exports = {
+  theme: {
+    extend: {
+      // ...
+    }
+  },
+  plugins: [
+    require('@fylgja/tailwindcss-plugin-cssprops')({
+      tokens: {
+        colors: {
+          primary: {
+            DEFAULT: "200 50% 50%" // HSL color syntax
+          },
+          "primary-@media:dark": {
+            DEFAULT: "200 50% 50%" // HSL color syntax
+          },
+          // Or use a wrapper as long as the media key is part of the group key, like "colors"
+          "@media:dark": {
+            primary: {
+              DEFAULT: "200 50% 50%" // HSL color syntax
+            }
+          }
+        },
+      },
+    }),
+  ],
+}
+```
+
+If you prefer to use a different class or selector, you can configure it using the `darkmode` option:
+
+```js
+module.exports = {
+  // ...
+  plugins: [
+    require("@fylgja/tailwindcss-plugin-cssprops")({
+      tokens: {
+        // ...
+      },
+      darkmode: "[data-theme=dark]"
+    })
+  ]
+}
+```
+
+Feel free to customize the `darkmode` option based on your specific needs and existing CSS classes or selectors.