_variables.scss

// compileOnSave: false

.theme-dark {

  /* Overwrite default theme colors */
  --color-base-00: #1e1e1e;
  --color-base-10: #242424;
  --color-base-20: #262626;
  --color-base-25: var(--base03);
  --color-base-30: var(--base02);
  --color-base-35: var(--base02);
  --color-base-40: var(--base0);
  --color-base-50: #666;
  --color-base-60: #999;
  --color-base-70: #bababa;
  --color-base-100: #dadada;

  /* Background */
  --background-primary: var(--base03);
  --background-primary-alt: var(--base02);

  /* Text */
  /* --base1 -> --base0 -> --base00 -> --base01 */
  --nav-item-color-active: var(--base1);
  --nav-item-color: var(--base00);

  --text-normal: var(--base1);
  --text-muted: var(--base0);
  --text-faint: var(--base00);

  /* File explorer */
  --active-bg: var(--nav-item-background-active);
}

.theme-light {

  /* Overwrite default theme colors */
  --color-base-00: var(--base2);
  --color-base-05: #fcfcfc;
  --color-base-10: var(--base2);
  --color-base-20: #f6f6f6;
  --color-base-25: #e3e3e3;
  --color-base-30: var(--base2);
  --color-base-35: var(--base2);
  --color-base-40: var(--base00);
  --color-base-50: #ababab;
  --color-base-60: #707070;
  --color-base-70: #5a5a5a;
  --color-base-100: #222222;

  /* Background */
  --background-primary: var(--base3);
  --background-primary-alt: var(--base2);

  /* Text */
  --text-normal: var(--base00);
  --text-muted: var(--base0);
  --text-faint: var(--base1);

  /* File explorer */
  --active-bg: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1);
  --nav-item-background-active: var(--active-bg);
}

.theme-dark,
.theme-light {
  --interactive-accent: var(--color-accent);

  /* Background */
  --background-secondary: var(--background-primary);
  --background-secondary-alt: var(--background-primary-alt);

  /* Text */
  --text-on-accent: var(--background-primary);

  /* Headings */
  --text-title: var(--color-cyan);
  --heading-formatting: var(--text-title);
  --h1-color: var(--text-title);
  --h2-color: var(--text-title);
  --h3-color: var(--text-title);
  --h4-color: var(--text-title);
  --h5-color: var(--text-title);
  --h6-color: var(--text-title);

  /* Links */
  --link-color: var(--color-blue);
  --link-color-hover: var(--link-color);
  --link-decoration: none;
  --link-decoration-hover: underline;
  --link-external-color: var(--color-purple);
  --link-external-color-hover: var(--link-external-color);
  --link-external-decoration: none;
  --link-external-decoration-hover: underline;
  --link-unresolved-color: var(--red);
  --link-unresolved-color-hover: var(--link-unresolved-color);
  --link-unresolved-opacity: unset;
  --link-unresolved-decoration-color: var(--link-unresolved-color);

  /* Code */
  --code-normal: var(--text-normal);
  --code-comment: var(--color-cyan);
  --code-function: var(--color-blue);
  --code-important: var(--color-orange);
  --code-keyword: var(--color-green);
  --code-operator: var(--code-normal);
  --code-property: var(--code-normal);
  --code-punctuation: var(--code-normal);
  --code-string: var(--color-cyan);
  --code-tag: var(--red);
  --code-value: var(--color-pink);

  /* Tables */
  --table-header-size: inherit;
  --table-header-weight: var(--font-bold);
  --table-header-color: inherit;

  /* Highlights */
  --text-highlight-bg: var(--color-accent);
  --text-highlight-bg-active: var(--color-accent);

  /* Checkboxes in reading view */
  --checkbox-border-color: var(--interactive-accent);
  --checkbox-border-color-hover: var(--interactive-accent-hover);

  /* Hashtags */
  --tag-padding-x: var(--tag-padding-y);

  /* Focus border */
  --background-modifier-border-focus: var(--interactive-accent);
}