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.