feat: theme colors

Author: cwandev

app.vue

@@ -13,27 +13,10 @@ const mode = computed(() => color.value as ConfigProviderTheme)
 <template>
   <VanConfigProvider :theme="mode">
     <ColorScheme tag="div">
+      <NuxtLoadingIndicator />
       <NuxtLayout>
         <NuxtPage />
       </NuxtLayout>
     </ColorScheme>
   </VanConfigProvider>
 </template>
-
-<style>
-#__nuxt {
-  height: 100vh;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  background: var(--van-gray-1);
-  color-scheme: light;
-}
-
-html.dark {
-  background: #222;
-  color-scheme: dark;
-}
-</style>

nuxt.config.ts

@@ -12,6 +12,9 @@ export default defineNuxtConfig({
 
   css: [
     '@unocss/reset/tailwind.css',
+    '~/styles/vars.css',
+    '~/styles/global.css',
+    '~/styles/default-theme.css',
   ],
 
   postcss: {

styles/default-theme.css

@@ -0,0 +1,3 @@
+:root:root {
+  --van-primary-color: var(--c-primary);
+}

styles/global.css

@@ -0,0 +1,15 @@
+#__nuxt {
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  background: var(--van-gray-1);
+  color-scheme: light;
+}
+
+html.dark {
+  background: #222;
+  color-scheme: dark;
+}

styles/vars.css

@@ -0,0 +1,15 @@
+:root {
+  --c-primary: rgb(var(--c-primary-500));
+  --c-primary-active: rgb(var(--c-primary-600));
+  
+  /* main color ratio */
+  --c-primary-100: 217 251 232;
+  --c-primary-200: 179 245 209;
+  --c-primary-300: 117 237 174;
+  --c-primary-400: 0 220 130;
+  --c-primary-500: 0 193 106;
+  --c-primary-600: 0 161 85;
+  --c-primary-700: 0 127 69;
+  --c-primary-800: 1 101 56;
+  --c-primary-900: 10 83 49;
+}

uno.config.ts

@@ -15,7 +15,7 @@ import presetRemToPx from '@unocss/preset-rem-to-px'
 export default defineConfig({
   shortcuts: [
     // shortcuts to multiple utilities
-    ['btn', 'px-6 py-3 rounded-3 border-none inline-block bg-green-400 text-white cursor-pointer hover:bg-green-600 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
+    ['btn', 'px-6 py-3 rounded-3 inline-block bg-primary text-white cursor-pointer hover:bg-primary-hover disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
   ],
 
   presets: [
@@ -33,4 +33,13 @@ export default defineConfig({
     transformerDirectives(),
     transformerVariantGroup(),
   ],
+
+  theme: {
+    colors: {
+      primary: {
+        DEFAULT: 'var(--c-primary)',
+        hover: 'var(--c-primary-active)',
+      },
+    },
+  },
 })