@barguide/style-guide/src/variables/theme.css

BarGuide.io | CSS Style Guide

:root {
  --theme-background: #f5f8fa;
  --theme-background-light: #fff;
  --theme-background-lighter: #fff;
  --theme-background-transparent: rgb(255 255 255 / 85%);
  --theme-border: #cfd7dd;
  --theme-border-input: #cfd7dd;
  --theme-copy: #24292e;
  --theme-copy-light: #57606a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --theme-background: #0e1117;
    --theme-background-light: #161b22;
    --theme-background-lighter: #161b22;
    --theme-background-transparent: rgb(0 0 0 / 85%);
    --theme-border: #30363c;
    --theme-border-input: #30363c;
    --theme-copy: #c8d1d9;
    --theme-copy-light: #8b949e;
  }
}

/*
:root {
  --theme-background: theme('colors.white');
  --theme-background-light: theme('colors.gray.1');
  --theme-background-lighter: theme('colors.gray.0');
  --theme-border: theme('colors.gray.3');
  --theme-border-input: theme('colors.gray.8');
  --theme-copy: theme('colors.gray.8');
  --theme-copy-light: theme('colors.gray.5');
}

@media (prefers-color-scheme: dark) {
  :root {
    --theme-background: theme('colors.gray.9');
    --theme-background-light: theme('colors.gray.8');
    --theme-background-lighter: theme('colors.gray.7');
    --theme-border: theme('colors.gray.8');
    --theme-border-input: theme('colors.gray.5');
    --theme-copy: theme('colors.white');
    --theme-copy-light: theme('colors.gray.1');
  }
}
*/