Feature/darkmode (#45)

* resolved merge conflicts

* let browser decide initial theme (os setting)

* formatting

* disabled daisy base styles, used formatter

* color configuration

* added simple themeswitching dropdown

* removed empty style section

* removed empty div

---------

Co-authored-by: Willy Woitas <[email protected]>

package.json

@@ -30,6 +30,7 @@
     "dedent": "^1.5.3",
     "husky": "^8.0.0",
     "npm-run-all": "^4.1.5",
+    "daisyui": "^4.10.3",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.3",

src/app.css

@@ -22,8 +22,8 @@
   --lineheight-ally-rule: 32px;
   --color-primary-hsl: 0deg 100% 47.5%;
   --color-background-hsl: 0deg 100% 100%;
-  --color-primary: hsl(var(--color-primary-hsl));
-  --color-background: hsl(var(--color-background-hsl));
+  --color-primary: oklch(var(--p1));
+  --color-background: oklch(var(--b1));
   --color-negative: hsl(0deg 65% 50%);
   --color-positive: hsl(120deg 65% 50%);
   --shadow-default: 0 5px 10px -5px hsl(0deg 0% 0% / 0.25);

src/lib/components/themeswitcher.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  let themes = ['light', 'dark'];
+  let currentTheme: string = 'light';
+
+  // Function to set the theme
+  function setTheme(theme: string) {
+    currentTheme = theme;
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+  }
+
+  // automatically set the theme based on the user's preference
+  onMount(() => {
+    const storedTheme = localStorage.getItem('theme');
+    if (storedTheme) {
+      setTheme(storedTheme);
+    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      setTheme('dark');
+    } else {
+      setTheme('light');
+    }
+  });
+
+  function handleSetTheme(event: any) {
+    const theme = event.target.value;
+    setTheme(theme);
+  }
+</script>
+
+<div class={$$props.class}>
+  <div class="flex flex-row items-center">
+    <!-- Dropdown -->
+    <select class="select select-sm bg-base-100 hover:bg-base-200 ml-2" id="theme-switcher" bind:value={currentTheme} on:change={handleSetTheme} aria-label="Theme Switcher">
+      {#each themes as theme}
+        <option value={theme}>{theme}</option>
+      {/each}
+    </select>
+  </div>
+</div>

src/routes/+page.svelte

@@ -15,23 +15,21 @@
     import Keyboard from '$lib/content/keyboard.svelte';
     import A11yListView from '$lib/components/a11y-list-view.svelte';
     import A11yInspector from '$lib/components/a11y-inspector.svelte';
+    import ThemeSwitcher from '$lib/components/themeswitcher.svelte';
 </script>
 
-<Github/>
+<Github />
 
-<SplitPane
-    class="w-full h-full"
-    initialPosition="60%"
->
-    <div slot="first" class="w-full h-full box-border overflow-y-auto p-1">
-        <div class="container mx-auto px-4 py-4">
+<SplitPane class="h-full w-full" initialPosition="60%">
+    <div slot="first" class="box-border h-full w-full overflow-y-auto p-1">
+        <div class="container relative mx-auto px-4 py-4">
             <Headline tag="h1">
                 Neofonie Accessibility „A11y“ Tool <Tooltip label="'11' steht für 11 Buchstaben, ergo für eine Abkürzung" />
             </Headline>
 
             <p>
-                Diese Checkliste wird von unseren Entwicklern genutzt, um eine gewisse Barriere-Freiheit für unsere Endkunden zu gewährleisten.
-                Jede Komponente/Seite sollte gegen diese Checkliste geprüft werden.
+                Diese Checkliste wird von unseren Entwicklern genutzt, um eine gewisse Barriere-Freiheit für unsere Endkunden zu gewährleisten. Jede Komponente/Seite sollte gegen diese Checkliste
+                geprüft werden.
             </p>
 
             <BuildDate />
@@ -45,13 +43,17 @@
             <Forms />
             <Mobile />
             <Keyboard />
+
+            <ThemeSwitcher class="absolute top-[1em] right-[1em]" />
         </div>
 
         <hr />
 
         <A11yListView />
     </div>
-    <div slot="second" class="w-full h-full flex justify-center items-center">
-        <A11yInspector />
+    <div slot="second" class="flex flex-col h-full w-full items-stretch justify-center">
+        <div class="flex-grow">
+            <A11yInspector />
+        </div>
     </div>
 </SplitPane>

tailwind.config.js

@@ -4,5 +4,40 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require("daisyui")],
+  //prefix: "tw-",
+  daisyui: {
+    // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
+    themes: [
+      "light",
+      {
+        // generate a theme for company colors
+        // font color and highlight: #E60023
+        // base-100: rgb(38, 47, 57)
+        // other: white
+        dark: {
+          "base-100": "#262f39",
+          "base-200": "#384450",
+          "base-300": "#EBEEF3",
+          "base-content": "#eeeeee",
+          primary: "#E60023",
+          secondary: "#E60023",
+          accent: "#E60023",
+          neutral: "#E60023",
+          info: "#2094f3", // info color
+          success: "#009485", // success color
+          warning: "#ff9900", // warning color
+          error: "#ff5724", // error color
+        },
+        // import all daisyui themes
+      },
+    ],
+    darkTheme: "dark", // name of one of the included themes for dark mode
+    base: true, // applies background color and foreground color for root element by default
+    styled: true, // include daisyUI colors and design decisions for all components
+    utils: true, // adds responsive and modifier utility classes
+    prefix: "d-", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
+    logs: false, // Shows info about daisyUI version and used config in the console when building your CSS
+    themeRoot: ":root", // The element that receives theme color CSS variables
+  },
 };