New feature: color modes
jmjuanes opened this issue · 0 comments
jmjuanes commented
Feature type
Other...
Is your feature request related to a problem?
This feature is related to question #176.
Describe the solution you'd like
Color Modes configuration
Add a new field in the configuration of siimple to allow defining different color modes. For example, to enable a simple dark mode:
export default {
colors: {
text: "black",
background: "white",
// ...other colors
},
colorModes: {
dark: {
text: "white",
background: "black",
},
},
// ...other configuration
};CSS Output
- First option: apply a color mode using the system theme with the
prefers-color-schememedia feature:
@media (prefers-color-scheme: dark) {
:root {
--siimple-color-text: white;
--siimple-color-background: black;
}
}- Second option: apply the color mode manually, adding a
data-color-modeto the<html>tag with the desired color mode:
html[data-color-mode="dark"] {
--siimple-color-text: white;
--siimple-color-background: black;
}With this approach, the user can toggle to a different color mode using JavaScript:
document.documentElement.setAttribute("data-color-mode", "dark");Enable / disable color modes
Color modes will be enabled by default in siimple 4.3.0, and can be disabled by setting the useColorModes flag to false:
export default {
useColorModes: false,
// ...other config
};Note that color modes will require also to set the useCssVariables flag enabled. If disabled, color modes will be also disabled.
Describe alternatives you've considered
No response