chore(playground): dark theme (#202)

Author: J-Sek

dev/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-4">
+  <div class="bg-background text-on-background min-h-screen p-4">
     <RouterView />
   </div>
 </template>

dev/src/Playground.template.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
   // Framework
-  import { createSingle } from '@vuetify/v0'
+  import { createSingle, useTheme } from '@vuetify/v0'
+
+  useTheme().select('dark')
 
   const single = createSingle({ mandatory: 'force' })
 

dev/src/plugins/index.ts

@@ -70,6 +70,8 @@ export function registerPlugins (app: App) {
             'divider': '{palette.md.grey.300}',
             'surface': '{palette.md.grey.100}',
             'surface-tint': '{palette.md.grey.200}',
+            'surface-variant': '{palette.md.grey.200}',
+            'on-surface-variant': '{palette.md.grey.700}',
           },
         },
         vitalityGreen: {
@@ -85,6 +87,8 @@ export function registerPlugins (app: App) {
             'divider': '{palette.md.grey.300}',
             'surface': '{palette.md.grey.100}',
             'surface-tint': '{palette.md.grey.200}',
+            'surface-variant': '{palette.md.grey.200}',
+            'on-surface-variant': '{palette.md.grey.700}',
           },
         },
         minimalSlate: {
@@ -100,6 +104,8 @@ export function registerPlugins (app: App) {
             'divider': '{palette.tw.gray.200}',
             'surface': '{palette.tw.gray.100}',
             'surface-tint': '{palette.tw.gray.200}',
+            'surface-variant': '{palette.tw.gray.200}',
+            'on-surface-variant': '{palette.tw.gray.600}',
           },
         },
         creativeFuchsia: {
@@ -115,6 +121,27 @@ export function registerPlugins (app: App) {
             'divider': '{palette.tw.gray.200}',
             'surface': '{palette.tw.gray.100}',
             'surface-tint': '{palette.tw.gray.200}',
+            'surface-variant': '{palette.tw.gray.200}',
+            'on-surface-variant': '{palette.tw.gray.600}',
+          },
+        },
+        dark: {
+          colors: {
+            'primary': '{palette.tw.violet.400}',
+            'secondary': '{palette.tw.slate.400}',
+            'accent': '{palette.tw.indigo.400}',
+            'error': '{palette.tw.red.400}',
+            'info': '{palette.tw.sky.400}',
+            'success': '{palette.tw.green.400}',
+            'warning': '{palette.tw.amber.400}',
+            'background': '{palette.tw.neutral.950}',
+            'divider': '{palette.tw.neutral.800}',
+            'surface': '{palette.tw.neutral.900}',
+            'surface-tint': '{palette.tw.neutral.800}',
+            'surface-variant': '{palette.tw.neutral.800}',
+            'on-background': '{palette.tw.neutral.100}',
+            'on-surface': '{palette.tw.neutral.100}',
+            'on-surface-variant': '{palette.tw.neutral.400}',
           },
         },
       },

dev/uno.config.ts

@@ -26,6 +26,7 @@ export default defineConfig({
       'warning': 'var(--v0-warning)',
       'background': 'var(--v0-background)',
       'surface': 'var(--v0-surface)',
+      'surface-variant': 'var(--v0-surface-variant)',
       'surface-tint': 'var(--v0-surface-tint)',
       'divider': 'var(--v0-divider)',
       'on-primary': 'var(--v0-on-primary)',