open-wc/docs/_assets/variables.css

html {
  --page-background: white;
  --footer-background: rgba(0, 0, 0, 0.02);
  --primary-color: rgb(44, 62, 80);
  --primary-color-lighter: #449ad7;
  --primary-color-darker: #1a5285;
  --primary-color-accent: #cee5f6;
  --contrast-color-light: #fff;
  --contrast-color-dark: #1d3557;
  --primary-text-color: #2c3e50;
  --primary-lines-color: #ccc;
  --markdown-link-color: #2758ff;

  --header-color: white;

  --owc-active-color: #2758ff;
  --owc-hover-color: #436eff;

  --button-one: #2758ff;
  --button-one-hover: #436eff;

  --button-two: black;
  --button-two-hover: #444444;
}

/* TODO: markdown Vars */

/* SEE: https://github.com/daKmoR/rocket/pull/18 */

@media (prefers-color-scheme: dark) {
  html {
    --header-color: #2f3136;

    --footer-background: rgba(255, 255, 255, 0.1);
    --page-background: #36393e;
    --primary-text-color: #eee;
    --primary-color: white;
    --primary-color-lighter: #449ad7;
    --primary-color-darker: #1a5285;
    --primary-color-accent: #cee5f6;
    --contrast-color-light: #fff;
    --contrast-color-dark: #1d3557;
    --primary-lines-color: #333;

    --owc-active-color: #41ffb0;
    --owc-hover-color: #6dffc2;

    --button-one: #9b03fe;
    --button-one-hover: #a724ff;

    --button-two: black;
    --button-two-hover: rgb(36, 36, 36);


    /* Markdown */
    --markdown-octicon-link: var(--primary-text-color);
    --markdown-body: #24292e;
    --markdown-link-color: #41ffb0;
    --markdown-divider-color: #e1e4e8;
    --markdown-blockquote-border-color: #dfe2e5;
    --markdown-blockquote-color: #90aac7;
    --markdown-kbd-background-color: #fafbfc;
    --markdown-kbd-border-color: #c6cbd1;
    --markdown-kbd-border-bottom-color: #959da5;
    --markdown-kbd-color: #444d56;
    --markdown-heading-color-6: #6a737d;
    --markdown-table-background-color: #fff;
    --markdown-table-border-color: #c6cbd1;
    --markdown-table-row-odd-background-color: #f6f8fa;
    --markdown-code-background-color: rgba(27, 31, 35, 0.05);
    --markdown-pre-background-color: rgb(49, 49, 49);

    /* syntax */
    --markdown-syntax-color: #f8f8f2;
    --markdown-syntax-background-color: #2e3440;
    --markdown-syntax-atrule-color: #88c0d0;
    --markdown-syntax-attr-name-color: #a3be8c;
    --markdown-syntax-attr-value-color: #88c0d0;
    --markdown-syntax-builtin-color: #a3be8c;
    --markdown-syntax-boolean-color: #81a1c1;
    --markdown-syntax-class-name-color: #88c0d0;
    --markdown-syntax-constant-color: #81a1c1;
    --markdown-syntax-char-color: #a3be8c;
    --markdown-syntax-deleted-color: #81a1c1;
    --markdown-syntax-entity-color: #81a1c1;
    --markdown-syntax-function-color: #88c0d0;
    --markdown-syntax-inserted-color: #a3be8c;
    --markdown-syntax-keyword-color: #81a1c1;
    --markdown-syntax-number-color: #b48ead;
    --markdown-syntax-operator-color: #81a1c1;
    --markdown-syntax-property-color: #81a1c1;
    --markdown-syntax-punctuation-color: #81a1c1;
    --markdown-syntax-regex-color: #81a1c1;
    --markdown-syntax-important-color: #81a1c1;
    --markdown-syntax-selector-color: #a3be8c;
    --markdown-syntax-symbol-color: #81a1c1;
    --markdown-syntax-string-color: #a3be8c;
    --markdown-syntax-tag-color: #81a1c1;
    --markdown-syntax-url-color: #81a1c1;
    --markdown-syntax-variable-color: #81a1c1;
    --markdown-syntax-hotkey-selector-color: #d73a49;
    --markdown-syntax-keyword-color: #22863a;
    --markdown-table-background-color: #212121;
    --markdown-table-row-odd-background-color: #515151;
    --markdown-table-border-color: #8e8e8e;

    --markdown-syntax-background-color: rgb(27, 29, 35);
    --markdown-syntax-atrule-color: rgb(198, 120, 221);
    --markdown-syntax-attr-name-color: rgb(198, 120, 221);
    --markdown-syntax-boolean-color: rgb(209, 154, 102);
    --markdown-syntax-class-name-color: rgb(97, 175, 239);
    --markdown-syntax-constant-color: rgb(220, 220, 170);
    --markdown-syntax-entity-color: rgb(220, 220, 170);
    --markdown-syntax-function-color: rgb(97, 175, 239);
    --markdown-syntax-inserted-color: rgb(220, 220, 170);
    --markdown-syntax-keyword-color: rgb(198, 120, 221);
    --markdown-syntax-number-color: rgb(220, 220, 170);
    --markdown-syntax-operator-color: rgb(220, 220, 170);
    --markdown-syntax-property-color: rgb(220, 220, 170);
    --markdown-syntax-punctuation-color: white;
    --markdown-syntax-regex-color: rgb(209, 154, 102);
    --markdown-syntax-selector-color: rgb(86, 156, 214);
    --markdown-syntax-symbol-color: rgb(220, 220, 170);
    --markdown-syntax-tag-color: rgb(86, 156, 214);
    --markdown-syntax-url-color: rgb(220, 220, 170);
    --markdown-syntax-variable-color: rgb(220, 220, 170);
  }

  .string {
    color: rgb(152, 195, 121);
  }

  .comment {
    color: #7d7d7d;
  }

  .language-css {
    --markdown-syntax-string-color: #81a1c1;
  }
}