feat: Theme Color from Nuxt UI Docs

nuxt/plugins/ui.ts

@@ -0,0 +1,49 @@
+import colors from '#tailwind-config/theme/colors'
+import { hexToRgb } from '#ui/utils'
+
+export default defineNuxtPlugin({
+  enforce: 'post',
+  setup() {
+    const appConfig = useAppConfig()
+
+    const root = computed(() => {
+      const primary: Record<string, string> | undefined = colors[appConfig.ui.primary]
+      const gray: Record<string, string> | undefined = colors[appConfig.ui.gray]
+
+      return `:root {
+        ${Object.entries(primary || colors.green).map(([key, value]) => `--color-primary-${key}: ${hexToRgb(value)};`).join('\n')}
+        --color-primary-DEFAULT: var(--color-primary-500);
+
+        ${Object.entries(gray || colors.cool).map(([key, value]) => `--color-gray-${key}: ${hexToRgb(value)};`).join('\n')}
+        }
+
+        .dark {
+          --color-primary-DEFAULT: var(--color-primary-400);
+        }
+        `
+    })
+
+    if (process.client) {
+      watch(root, () => {
+        window.localStorage.setItem('nuxt-ui-root', root.value)
+      })
+
+      appConfig.ui.primary = window.localStorage.getItem('nuxt-ui-primary') || appConfig.ui.primary
+      appConfig.ui.gray = window.localStorage.getItem('nuxt-ui-gray') || appConfig.ui.gray
+    }
+    if (process.server) {
+      useHead({
+        script: [
+          {
+            innerHTML: `
+                if (localStorage.getItem('nuxt-ui-root')) {
+                  document.querySelector('style#nuxt-ui-colors').innerHTML = localStorage.getItem('nuxt-ui-root')
+                }`.replace(/\s+/g, ' '),
+            type: 'text/javascript',
+            tagPriority: -1,
+          },
+        ],
+      })
+    }
+  },
+})