tokens.dark.css

This CSS file contains tokens, as CSS custom properties, corresponding only to the dark theme. The CSS selectors in this file support both Gatsby and Next.js theme patterns:

• body.dark class selector for Gatsby gatsby-plugin-dark-mode apps.

• [data-theme='dark'] body selector for Next.js and next-themes-based apps.

Since these CSS custom properties are scoped with the body.dark selector, and shadow the names of default or light themed tokens, these tokens become active when the dark class is applied to the body. See tokens.css for the tokens corresponding to the light theme and to unthemed tokens.

Example

In a Next.js application, you can directly import this CSS file into your app wrapper (pages/_app.js):

import '@lsst-sqre/rubin-style-dictionary/dist/tokens.css';
import '@lsst-sqre/rubin-style-dictionary/dist/tokens.dark.css';

Source

  --rsd-component-header-nav-menulist-selected-background-color: #0c4a47;
  --rsd-component-page-background-color: #1f2121; /* Page background color in dark theme */
  --rsd-component-service-card-background-color: #1f2121;
  --rsd-component-service-card-text-color: #dce0e3;
  --rsd-component-text-color: #dce0e3; /* Body text color in dark theme */
  --rsd-component-text-link-color: #1c81a4;
  --rsd-component-text-link-hover-color: #146685;
  --rsd-component-text-headline-color: #058b8c;
}