josefaidt/svelte-themer

Dark mode on per theme basis

Closed this issue ยท 1 comments

First off, nice job on the theme provider ๐Ÿ‘ I like the linear approach to themes, but I was curious about your thoughts on having dark mode styling on a per theme basis v. independent themes (i.e., "light" and "dark")?

Instead of doing this:

[{
  name: 'light',
  colors: {
    text: '#282230',
    background: '#f1f1f1',
    primary: '#01796f',
    primary_dark: '#016159',
    secondary: '#562931',
  }
}]

You could do something like this:

[{
  name: 'forest',
  defaults: {
    colors: {
      text: '#282230',
      background: '#f1f1f1',
      primary: '#01796f',
      primary_dark: '#016159',
      secondary: '#562931',
    }
  },
  dark: {
    colors: {
      background: '#000'
    }
  }
}]

The defaults would contain all of theme variables, and dark would contain only the values you would want to override/modify.

You could expose a new mode toggle and allow each theme to control it's own dark mode presentation.

I'll create a PR with these changes.

Closing in preparation for 0.4.0