Porsche Design System

Introduction

Table of Contents

Styles
Setup
Color Scheme

Styles#

Styles are the foundational layer of our design language. They define the basics, such as colors across themes, typography, and visual effects, and they also provide structural primitives such as the layout grid and spacing scale.

Use these styles only when you need to build a custom component or pattern that is not yet available in the component library, or when working with foundational layout objects such as typography, surfaces, and boxes.

Setup#

1. Install Sass

Follow the official installation guide:

Install Sass Documentation

2. Import the Porsche Design System SCSS Styles

Add the following line to your SCSS file:

@use '@porsche-design-system/components-{js|angular|react|vue}/scss' as pds;

3. Include the Color Scheme Mixin

Include the @mixin color-scheme() in your global styles to enable the color scheme utilities and add a polyfill for browsers that don’t yet support light-dark(). See the Color Scheme section for details.

// global styles
@use '@porsche-design-system/components-{js|angular|react|vue}/scss' as pds;

@include pds.color-scheme();

html, body {…}

Color Scheme#

All colors and styles are driven by the CSS color-scheme property. To ensure broad compatibility, we provide the @mixin color-scheme(), which generates utility classes and includes a polyfill for browsers that do not yet support light-dark() (see browser support).

Core Implementation

The color system leverages the CSS light-dark() function to deliver native, preference-based theming. By adopting this browser-native engine, we have eliminated the need for proprietary switching logic, resulting in a more performant and standardized architecture.

Utility Classes

Apply these classes to the document or any container to control the theme context:

.scheme-light — Forces light mode.

.scheme-dark — Forces dark mode.

.scheme-light-dark — Dynamically follows system/OS settings.

Usage

1. Global Setup

Include the mixin once in your global stylesheet to initialize the theme utilities.

// global styles
@use '@porsche-design-system/components-js/scss' as pds;

@include pds.color-scheme();

html, body {…}

2. Component Implementation

Use the new tokens in your styles. These variables automatically resolve to the correct value based on the active theme.

// custom component styles
@use '@porsche-design-system/components-{js\|angular\|react\|vue}/scss' as pds;

.my-component {
  // Use light-dark() color variables
  background-color: pds.$color-frosted;
  color: pds.$color-primary;
}

3. Application

The selected theme context cascades to all child elements.

<!-- Defined theme will be applied to all child elements -->
<html class="scheme-dark">
  <head></head>
  <body>
    <!-- Will be rendered in dark mode -->
    <div class="my-component"></div>
  </body>
</html>