Dark Mode

[ModischFabrications]

Darkmode and switchable themes is something that is essential for cave dwellers, but SMUI somehow doesn't offer native integration.

• Button and local store is already implemented.
• Button centering needs some love
• Theme needs to react to store
• system preference shall be respected

[ModischFabrications]

• https://sveltematerialui.com/THEMING.md#theming-the-bare-css
• https://github.com/hperrin/svelte-material-ui/issues/248 !!
• https://stackoverflow.com/questions/71976453/how-to-wait-for-local-store-value-in-sveltehead-in-sveltekit

[ModischFabrications]

Theming seems to be possible with magic SCSS variables. "--mdc-theme-primary" is definitely the first target.

https://material.io/develop/web/theming/theming-guide -> "Step 3: Changing the theme with Sass"

Also look at https://github.com/hperrin/svelte-material-ui/issues/23#issuecomment-552205174 for an example

[ModischFabrications]

oh wow, changing these variables was too easy...

:root {
    --mdc-theme-primary: hsl(204, 100%, 50%);
    --mdc-theme-secondary: hsl(184, 86%, 77%);
}

[ModischFabrications]

mostly done, but the official instructions seem to be broken: https://github.com/hperrin/svelte-material-ui/issues/465

My recommendation: Use the theme generator, it's much easier than tweaking the defaults

[ModischFabrications]

Only thing missing is to set "prefers-color-scheme: dark" during runtime, I hope that works without hacking imports.

Using the colors from the theme would also greatly improve related color generation. See https://sveltematerialui.com/THEMING.md for a few variables that I'm too dumb to access.

Might also remove/merge my error-text class

[ModischFabrications]

-> https://github.com/GoogleChromeLabs/dark-mode-toggle -> https://github.com/GoogleChromeLabs/dark-mode-toggle/blob/main/src/dark-mode-toggle.mjs

[ModischFabrications]

This one is even simpler, probably easier to integrate/steal from: https://metonym.github.io/svelte-dark-mode/

[ModischFabrications]

Previous instructions actually had a script for that, this might actually work: https://github.com/hperrin/svelte-material-ui/blob/bab2ff4f973bad462f9d4696333bd541f91987aa/THEMING.md

let lightTheme =
  typeof window === 'undefined' ||
  window.matchMedia('(prefers-color-scheme: light)').matches;
function switchTheme() {
  lightTheme = !lightTheme;
  let themeLink = document.head.querySelector('#theme');
  if (!themeLink) {
    themeLink = document.createElement('link');
    themeLink.rel = 'stylesheet';
    themeLink.id = 'theme';
  }
  themeLink.href = `client/smui${lightTheme ? '' : '-dark'}.css`;
  document.head.appendChild(themeLink);
}

[ModischFabrications]

no idea how to add new variables so that I can reference them from svelte....

This is daisy's recommendation for a theme picker: https://github.com/saadeghi/theme-change Another one, mostly selfmade: https://dev.to/lenaschnedlitz/create-a-simple-dark-mode-toggle-with-svelte-4b3g