Dark Theme
Pink Design has in-built dark theme support. We use Sass (with the SCSS variant) for easier maintenance.
CSS Class | SCSS Variable | Theme |
---|---|---|
Default | - | Light |
.theme-dark
|
$theme-dark
|
Dark |
Global Sass variable
This global CSS class is declared as a Sass variable in order to be used inside partials
<style language="scss">
$theme-dark: ".theme-dark";
</style>
Implementation to a SCSS Partial
<style language="scss">
$theme-dark: ".theme-dark";
.partial {
--p-partial-bg-color: var(--color-neutral-0);
--p-partial-color: var(--color-neutral-100);
background-color: hsl(var(--partial-bg-color));
color: hsl(var(--partial-color));
/* Dark Theme */
#{$theme-dark} & {
--p-partial-bg-color: var(--color-neutral-400);
--p-partial-color: var(--color-neutral-50);
}
}
</style>
Compiled CSS
<style>
.partial {
--p-partial-bg-color: var(--color-neutral-0);
--p-partial-color: var(--color-neutral-100);
background-color: hsl(var(--partial-bg-color));
color: hsl(var(--partial-color));
}
/* Dark Theme */
.theme-dark .partial {
--p-partial-bg-color: var(--color-neutral-400);
--p-partial-color: var(--color-neutral-50);
}
</style>
Theme Utility Classes
Navigate to Pink Design Theme utility classes to learn how to show or hide components based on the theme being used.