feat: theme switcher devtool

Author: sifferhans

frontend/app/assets/styles/main.css

@@ -25,14 +25,15 @@
   --color-border-default: rgb(40 37 33 / 0.15);
 
   /* Border radius */
-  --radius-list: 24px;
-  --radius-list-inset: 20px;
-  --radius-navigation: 32px;
-  --radius-navigation-inset: 28px;
-  --radius-card: 48px;
-  --radius-button-large: 26px;
-  --radius-button-medium: 22px;
-  --radius-button-small: 18px;
+  --radius-multiplier: 1;
+  --radius-list: calc(24px * var(--radius-multiplier));
+  --radius-list-inset: calc(20px * var(--radius-multiplier));
+  --radius-navigation: calc(32px * var(--radius-multiplier));
+  --radius-navigation-inset: calc(28px * var(--radius-multiplier));
+  --radius-card: calc(48px * var(--radius-multiplier));
+  --radius-button-large: calc(26px * var(--radius-multiplier));
+  --radius-button-medium: calc(22px * var(--radius-multiplier));
+  --radius-button-small: calc(18px * var(--radius-multiplier));
 
   /* Spacing */
   --spacing-default: 20px;

frontend/app/components/devtools/ThemePresetSwitcher.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { onKeyDown } from '@vueuse/core'
+
+const themes = [
+  { color: '#A2D3C2', rounding: 1 },
+  { color: '#5448C8', rounding: 0.5 },
+  { color: '#F6D8AE', rounding: 0 },
+]
+function setTheme(theme: number) {
+  const themeData = themes[theme]
+  if (!themeData) return
+
+  // Set dynamic project theme color
+  document.documentElement.style.setProperty(
+    '--color-accent-base',
+    themeData.color,
+  )
+
+  // Calculate and set the on-accent contrast color
+  const contrastColor = getContrastColor(themeData.color)
+  document.documentElement.style.setProperty('--color-on-accent', contrastColor)
+
+  // Set rounding
+  document.documentElement.style.setProperty(
+    '--radius-multiplier',
+    themeData.rounding.toString(),
+  )
+}
+
+onKeyDown('1', () => setTheme(0))
+onKeyDown('2', () => setTheme(1))
+onKeyDown('3', () => setTheme(2))
+</script>

frontend/app/layouts/default.vue

@@ -88,6 +88,7 @@ const { left, height, width, top } = useElementBounding(activeMenuItem)
 
 <template>
   <div class="text-default relative mx-auto h-full w-full max-w-xl">
+    <ThemePresetSwitcher />
     <div class="h-full">
       <slot />
     </div>