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.