Porsche Design System

Vanilla Js

Table of Contents

Global Theme
Prefixing

Global Theme#

All system colors are controlled via the CSS color-scheme property and are included in our mandatory Global Styles. These styles also provide utility classes for selecting the active theme and a polyfill to ensure compatibility with browsers that do not yet support light-dark() (see browser support).

By default, color tokens use the light theme. To enable the dark theme or automatic theme switching based on system settings, add the .scheme-light, .scheme-dark or .scheme-light-dark CSS class to the <html> element or any HTML element. This applies the selected theme to all child elements.

Learn more in the Theme section.

Prefixing#

You can load the Porsche Design System with a custom unique prefix to prevent conflicts. Just pass the prefix as a parameter to the load method.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Porsche Design System</title>
    <script src="PATH/TO/PACKAGE/@porsche-design-system/components-js/index.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      porscheDesignSystem.load({ prefix: 'sample-prefix' });
    </script>
    <sample-prefix-p-heading size="xx-large">Some heading</sample-prefix-p-heading>
  </body>
</html>