@liveblocks/react-ui/src/styles/dark/index.css

A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.

@import "../constants";

@mixin dark-styles {
  /**
   * Colors
   */
  --lb-accent: #4af;
  --lb-destructive: #f77;
  --lb-background: #222;
  --lb-foreground: #fff;
  --lb-accent-contrast: 16%;
  --lb-destructive-contrast: 16%;
  --lb-foreground-contrast: 10%;

  /**
   * Shadows
   */
  --lb-inset-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);
  --lb-highlight-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);
  --lb-elevation-shadow: $lb-elevation-shadow;
  --lb-elevation-shadow-moderate: $lb-elevation-shadow-moderate;
  --lb-tooltip-shadow: $lb-tooltip-shadow;

  color-scheme: dark;

  &:where(.lb-elevation, .lb-tooltip) {
    --lb-background: #333;
    --lb-foreground-contrast: 10%;
  }

  &:where(.lb-elevation-moderate) {
    --lb-background: #2a2a2a;
    --lb-foreground-contrast: 10%;
  }
}