| Buttons |
data-cltd-theme-toggle |
Toggles between light and dark mode. |
data-cltd-set-theme="dark" |
Switches to dark mode instantly when clicked. |
data-cltd-set-theme="light" |
Switches to light mode instantly when clicked. |
| Icons |
data-cltd-icon="dark" |
Shows icon only when dark mode is active. |
data-cltd-icon="light" |
Shows icon only when light mode is active. |
| Images |
data-cltd-theme-img="dark" |
Shows this image only in dark mode. |
data-cltd-theme-img="light" |
Shows this image only in light mode. |
| Text |
data-cltd-theme-text |
Automatically adjusts text color based on theme.
Optional overrides:
data-cltd-dark="#fff" / data-cltd-light="#000"
|
| Backgrounds |
data-cltd-theme-bg |
Automatically adjusts background color based on theme.
Optional overrides:
data-cltd-dark / data-cltd-light
|
| Links |
data-cltd-theme-link |
Automatically adjusts link color depending on theme.
Optional overrides:
data-cltd-dark / data-cltd-light
|
| Custom Colors |
data-cltd-dark="#000000" |
Custom dark-mode color for any element with a theme-aware attribute. |
data-cltd-light="#ffffff" |
Custom light-mode color for any element with a theme-aware attribute. |
