Porsche Design System
You are currently viewing an earlier release of the Porsche Design System.Switch to the latest Porsche Design System documentation.
SearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
IntroductionAPI
Color Scheme Table of Contents The Porsche Design System components rely on CSS color variables using the CSS light-dark() function. Depending on the browser support you are targeting, it might be necessary to include a polyfill for light-dark(), which is provided in the color-scheme.css stylesheet. By default, color tokens use the light color scheme. To enable the dark color scheme or automatic switching based on system settings, add one of the following CSS classes to the <html> element or any ancestor element: .scheme-light — enforces the light color scheme .scheme-dark — enforces the dark color scheme .scheme-light-dark — automatically switches based on the user's system preference The selected scheme applies to all child elements. If browser support is already sufficient for your project, you can skip the polyfill and use the native color-scheme property and light-dark() function directly to control CSS Variables: html { color-scheme: light; } — enforces the light color scheme html { color-scheme: dark; } — enforces the dark color scheme html { color-scheme: light dark; } — automatically switches based on the user's system preference Setup When you import the main package CSS file, the light-dark() polyfill is already included: 
/* Replace {js|angular|react|vue} with your framework, e.g. components-react */
@import '@porsche-design-system/components-{js|angular|react|vue}';
If you only need the light-dark() polyfill without any other styles, you can import it separately: 
/* Replace {js|angular|react|vue} with your framework, e.g. components-react */
@import '@porsche-design-system/components-{js|angular|react|vue}/color-scheme.css';
Below is the content of the stylesheet file for reference only. Don't copy this into your project — use the import statement above instead: 
/* @porsche-design-system/components-{js|angular|react|vue}/color-scheme.css */

.scheme-normal {
  color-scheme: normal;
}
.scheme-dark {
  color-scheme: dark;
}
.scheme-light {
  color-scheme: light;
}
.scheme-light-dark {
  color-scheme: light dark;
}
.scheme-only-dark {
  color-scheme: only dark;
}
.scheme-only-light {
  color-scheme: only light;
}

@supports not (color: light-dark(white, black)) {
  :root,
  .scheme-light,
  .scheme-only-light,
  .scheme-normal,
  .scheme-light-dark {
    --p-color-focus: #1a44ea;
    --p-color-canvas: #fff;
    --p-color-surface: hsl(240 10% 95%);
    --p-color-frosted: hsl(240 5% 70% / 0.148);
    --p-color-frosted-soft: hsl(234 9.8% 60% / 0.06);
    --p-color-frosted-strong: hsl(236 6.5% 42% / 0.236);
    --p-color-backdrop: hsl(240 5.3% 14.9% / 0.5);
    --p-color-contrast-lower: hsl(234 6% 32.9% / 0.324);
    --p-color-contrast-low: hsl(240 5.3% 14.9% / 0.5);
    --p-color-contrast-medium: hsl(240 6.1% 7% / 0.6);
    --p-color-contrast-high: hsl(240 7.1% 11% / 0.7);
    --p-color-contrast-higher: hsl(240 8.7% 9% / 0.8);
    --p-color-primary: hsl(225 66.7% 1.2%);
    --p-color-success: hsl(115 77.5% 27.8%);
    --p-color-success-low: hsl(115 77.5% 27.8% / 0.18);
    --p-color-success-medium: hsl(115 77.5% 27.8% / 0.6);
    --p-color-success-frosted: hsl(115 77.5% 27.8% / 0.18);
    --p-color-success-frosted-soft: hsl(115 77.5% 27.8% / 0.1);
    --p-color-warning: hsl(28 97.7% 34.1%);
    --p-color-warning-low: hsl(28 97.7% 34.1% / 0.18);
    --p-color-warning-medium: hsl(28 97.7% 34.1% / 0.6);
    --p-color-warning-frosted: hsl(28 97.7% 34.1% / 0.18);
    --p-color-warning-frosted-soft: hsl(28 97.7% 34.1% / 0.1);
    --p-color-error: hsl(357 78% 41%);
    --p-color-error-low: hsl(357 78% 41% / 0.18);
    --p-color-error-medium: hsl(357 78% 41% / 0.6);
    --p-color-error-frosted: hsl(357 78% 41% / 0.18);
    --p-color-error-frosted-soft: hsl(357 78% 41% / 0.1);
    --p-color-info: hsl(228 83.2% 51%);
    --p-color-info-low: hsl(228 83.2% 51% / 0.18);
    --p-color-info-medium: hsl(228 83.2% 51% / 0.6);
    --p-color-info-frosted: hsl(228 83.2% 51% / 0.18);
    --p-color-info-frosted-soft: hsl(228 83.2% 51% / 0.1);
  }

  .scheme-dark,
  .scheme-only-dark {
    --p-color-focus: #1a44ea;
    --p-color-canvas: hsl(225 66.7% 1.2%);
    --p-color-surface: hsl(240 2% 10%);
    --p-color-frosted: hsl(240 2% 43% / 0.228);
    --p-color-frosted-soft: hsl(240 3.7% 26.5% / 0.154);
    --p-color-frosted-strong: hsl(240 1.5% 61.8% / 0.302);
    --p-color-backdrop: hsl(240 5.3% 14.9% / 0.5);
    --p-color-contrast-lower: hsl(240 1.5% 61.8% / 0.302);
    --p-color-contrast-low: hsl(240 12.5% 96.9% / 0.45);
    --p-color-contrast-medium: hsl(240 12.5% 96.9% / 0.56);
    --p-color-contrast-high: hsl(240 12.5% 96.9% / 0.67);
    --p-color-contrast-higher: hsl(240 12.5% 96.9% / 0.78);
    --p-color-primary: hsl(225 100% 99%);
    --p-color-success: hsl(157 84.9% 41.6%);
    --p-color-success-low: hsl(157 84.9% 41.6% / 0.18);
    --p-color-success-medium: hsl(157 84.9% 41.6% / 0.6);
    --p-color-success-frosted: hsl(157 84.9% 41.6% / 0.26);
    --p-color-success-frosted-soft: hsl(157 84.9% 41.6% / 0.1);
    --p-color-warning: hsl(28 90.2% 56.1%);
    --p-color-warning-low: hsl(28 90.2% 56.1% / 0.18);
    --p-color-warning-medium: hsl(28 90.2% 56.1% / 0.6);
    --p-color-warning-frosted: hsl(28 90.2% 56.1% / 0.26);
    --p-color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
    --p-color-error: hsl(0 96.9% 62%);
    --p-color-error-low: hsl(0 96.9% 62% / 0.18);
    --p-color-error-medium: hsl(0 96.9% 62% / 0.6);
    --p-color-error-frosted: hsl(0 96.9% 62% / 0.26);
    --p-color-error-frosted-soft: hsl(0 96.9% 62% / 0.1);
    --p-color-info: hsl(210 100% 54.5%);
    --p-color-info-low: hsl(210 100% 54.5% / 0.18);
    --p-color-info-medium: hsl(210 100% 54.5% / 0.6);
    --p-color-info-frosted: hsl(210 100% 54.5% / 0.26);
    --p-color-info-frosted-soft: hsl(210 100% 54.5% / 0.1);
  }

  @media (prefers-color-scheme: dark) {
    .scheme-light-dark {
      --p-color-focus: #1a44ea;
      --p-color-canvas: hsl(225 66.7% 1.2%);
      --p-color-surface: hsl(240 2% 10%);
      --p-color-frosted: hsl(240 2% 43% / 0.228);
      --p-color-frosted-soft: hsl(240 3.7% 26.5% / 0.154);
      --p-color-frosted-strong: hsl(240 1.5% 61.8% / 0.302);
      --p-color-backdrop: hsl(240 5.3% 14.9% / 0.5);
      --p-color-contrast-lower: hsl(240 1.5% 61.8% / 0.302);
      --p-color-contrast-low: hsl(240 12.5% 96.9% / 0.45);
      --p-color-contrast-medium: hsl(240 12.5% 96.9% / 0.56);
      --p-color-contrast-high: hsl(240 12.5% 96.9% / 0.67);
      --p-color-contrast-higher: hsl(240 12.5% 96.9% / 0.78);
      --p-color-primary: hsl(225 100% 99%);
      --p-color-success: hsl(157 84.9% 41.6%);
      --p-color-success-low: hsl(157 84.9% 41.6% / 0.18);
      --p-color-success-medium: hsl(157 84.9% 41.6% / 0.6);
      --p-color-success-frosted: hsl(157 84.9% 41.6% / 0.26);
      --p-color-success-frosted-soft: hsl(157 84.9% 41.6% / 0.1);
      --p-color-warning: hsl(28 90.2% 56.1%);
      --p-color-warning-low: hsl(28 90.2% 56.1% / 0.18);
      --p-color-warning-medium: hsl(28 90.2% 56.1% / 0.6);
      --p-color-warning-frosted: hsl(28 90.2% 56.1% / 0.26);
      --p-color-warning-frosted-soft: hsl(28 90.2% 56.1% / 0.1);
      --p-color-error: hsl(0 96.9% 62%);
      --p-color-error-low: hsl(0 96.9% 62% / 0.18);
      --p-color-error-medium: hsl(0 96.9% 62% / 0.6);
      --p-color-error-frosted: hsl(0 96.9% 62% / 0.26);
      --p-color-error-frosted-soft: hsl(0 96.9% 62% / 0.1);
      --p-color-info: hsl(210 100% 54.5%);
      --p-color-info-low: hsl(210 100% 54.5% / 0.18);
      --p-color-info-medium: hsl(210 100% 54.5% / 0.6);
      --p-color-info-frosted: hsl(210 100% 54.5% / 0.26);
      --p-color-info-frosted-soft: hsl(210 100% 54.5% / 0.1);
    }
  }
}
Lightning CSS Bug Some frameworks in newer versions rely on lightningcss, which includes a polyfill for the light-dark() function that is currently broken. To avoid any issues, we recommend disabling the lightningcss polyfill for now since we also include our own polyfill for the global styles. More information Disable Lightning CSS Polyfill: React, React Router, Vue (Vite 8) 
// vite.config.ts
+ import { Features } from "lightningcss"

export default defineConfig({
+  css: {
+    transformer: "lightningcss",
+    lightningcss: {
+      exclude: Features.LightDark,
+    },
+  },
});
Next.js (Turbopack) 
// next.config.ts
const nextConfig: NextConfig = {
+  experimental: {
+    useLightningcss: true,
+    lightningCssFeatures: {
+      exclude: ['light-dark'],
+    },
+  },
};
Global settingsColor SchemeAll color tokens use the light-dark() CSS function. Set the theme via the CSS color-scheme property: light for light mode, dark for dark mode, or light dark to follow the user's system preference.LightDarkLight DarkDirectionThe dir global attribute in HTML changes the direction of text and other content within an element. It's most often used on the <html> tag to set the entire page's direction, which is crucial for supporting languages that are written from right to left (RTL), such as Arabic and Hebrew. For example, using <html dir="rtl"> makes the entire page display from right to left, adjusting the layout and text flow accordingly.LTR (left-to-right)RTL (right-to-left)Text ZoomTo ensure accessibility and comply with WCAG 2.2 AA standards, it is mandatory for web content to support text resizing up to at least 200% without loss of content or functionality. Using relative units like rem is a best practice for achieving this, as they allow the text to scale uniformly based on the user's browser settings.100%130%150%200%