The colors white and black are not color scheme dependent, while light and dark flip when darkmode is enabled! Text colors are slightly different in darkmode for better contrast.
You can simply redefine the theme color variables. The secondary color is used as hover color by the most components. You can create your own class like .rose for some elements or overrite the :root pseudoclass to set the color for the whole theme.
The css applies the systems color scheme by default. If you want to force a scheme for an element, you can add the lightmode or darkmode class to your element. You can put this class in your <body> tag if you want to force the scheme to the whole webseite.
<div class="lightmode">...</div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<div class="darkmode">...</div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Elements with grey background in front of element with grey background can adjust their grey value based on the primary and secondary grey value.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
You can implement this behavior for your own elements by overwriting the grey variable for child elements while using the primary grey variable as background.
You can define your own main color for the theme by overriding the theme variables in the :root class. The theme color applies to menu, buttons, inputs and other elements.
| Variables | Default |
|---|---|
| --theme-primary-color | hsl(225, 100%, 50%) |
| --theme-secondary-color | hsl(225, 100%, 30%) |
| --theme-accent-color | hsl(45, 100%, 50%) |
| --theme-info-color | hsl(225, 100%, 50%) |
| --theme-success-color | hsl(112.5, 100%, 35%) |
| --theme-warning-color | hsl(45, 100%, 50%) |
| --theme-error-color | hsl(0, 100%, 50%) |
| Color Scheme Dependent Variables | Lightmode | Darkmode |
|---|---|---|
| --theme-background-color | white | black |
| --theme-element-primary-color | --theme-primary-grey-color | --theme-primary-grey-color |
| --theme-element-secondary-color | --theme-secondary-grey-color | --theme-secondary-grey-color |
| --theme-primary-grey-color | hsl(0, 0%, 88%) | hsl(0, 0%, 12%) |
| --theme-secondary-grey-color | hsl(0, 0%, 80%) | hsl(0, 0%, 20%) |
| --theme-tertiary-grey-color | hsl(0, 0%, 72%) | hsl(0, 0%, 28%) |
| Color Scheme Dependent Text Variables | Lightmode | Darkmode |
|---|---|---|
| --theme-text-color | black | white |
| --theme-text-grey-color | hsl(0, 0%, 40%) | hsl(0, 0%, 60%) |