Is your feature request related to a problem? Please describe.
Some apps may use their own theme or use specific colors for things or sections of a page.
Examples of this would be:
Techtalks could use the design-system, but they have their own color profile
Things like grades.no if it ever were to be refurbished could probably have its own color profile?
Other projects, like school projects or general use outside of Dotkom/Online.
Adding sections/modals with negative or alternative color profiles in pages that use the regular one.
Supporting dark mode properly (maybe even automatically).
Supporting seasonal or personal theming.
Describe the solution you'd like
There are two good solutions to this problem that both have their drawbacks. But there may be a way to do them both at the same time?
1. --cssVariables:
We could define all our colors as CSS variables in a root element.
This solution works really well with how browsers work and will let us handle styling from back-ends and server-side rendering seamlessly.
It also has the benefit of working with media queries, like prefers-color-scheme to set colors.
Selecting a theme is done by selecting a specific global style-sheet. When changing something in the middle of a page you add an override to an element that will cascade to all children.
2. Styled Component Theme:
Styled components has a built-in theming system, where a theme is accessible as a prop in all styled components.
Selecting a theme is done by adding a by giving a different theme object to the top-level theme provider for the app. Changing the theme in the middle of a page will require a new ThemeProvider with a config to override the top-level one.
Is your feature request related to a problem? Please describe. Some apps may use their own theme or use specific colors for things or sections of a page. Examples of this would be:
Techtalks could use the design-system, but they have their own color profile
Things like grades.no if it ever were to be refurbished could probably have its own color profile?
Other projects, like school projects or general use outside of Dotkom/Online.
Adding sections/modals with negative or alternative color profiles in pages that use the regular one.
Supporting dark mode properly (maybe even automatically).
Supporting seasonal or personal theming.
Describe the solution you'd like There are two good solutions to this problem that both have their drawbacks. But there may be a way to do them both at the same time?
1.
--cssVariables: We could define all our colors as CSS variables in a root element. This solution works really well with how browsers work and will let us handle styling from back-ends and server-side rendering seamlessly. It also has the benefit of working with media queries, likeprefers-color-schemeto set colors.Selecting a theme is done by selecting a specific global style-sheet. When changing something in the middle of a page you add an override to an element that will cascade to all children.
2. Styled Component Theme: Styled components has a built-in theming system, where a theme is accessible as a prop in all styled components.
Selecting a theme is done by adding a by giving a different
themeobject to the top-level theme provider for the app. Changing the theme in the middle of a page will require a new ThemeProvider with a config to override the top-level one.