Dark Mode displays dark surfaces across the majority of the UI. This will make your website great for viewing at night time.
You can try toggling between dark mode and light mode by clicking the floating action button at the bottom right of this page.
Basic
By default, dark mode is already enabled. This will use the css selector
@media (prefers-color-scheme: dark) which is based on the
current device's theme.
You can use the following helper classes to update them on dark mode accordingly:
| Class | Description |
|---|---|
.dark-mode
|
Add this class to the <html> tag to
force dark mode to the page. |
.no-dark-mode
|
Add this class to the <html> tag to
prevent the page from changing to dark mode. |
.ondark-show
|
Add this class to any element to show them only on dark mode. On light mode, this element is hidden. |
.ondark-hide
|
Add this class to any element to hide them on dark mode. On light mode, this element is visible. |
.ondark-z-depth-0
|
Add this class to any element to remove its shadow on dark mode. |
.remove-dark-mode
|
Add this class to the <img/> element to
revert the opacity: 0.8. Reduced opacity for
dark mode does not apply to the carousel.
|
Colors
You can also change the element's colors on dark mode by using the following helper classes.
| Class | Description |
|---|---|
.ondark-<color>
|
Add this class to any element to change its background color on dark mode. |
.ondark-<color-shade>
|
Add this class to any element to change its background color's shade on dark mode. |
.ondark-<color>-text
|
Add this class to any element to change its text color on dark mode. |
.ondark-text-<color-shade>
|
Add this class to any element to change its text color's shade on dark mode. |
.ondark-border-<color>
|
Add this class to any element to change its border color on dark mode. |
.ondark-border-<color-shade>
|
Add this class to any element to change its border color's shade on dark mode. |