@media (prefers-color-scheme: dark) {
  :root {
    --teal-darkest: #0a2a2a;
    --teal-dark: #1a4a4a;
    --teal-medium-dark: #008080;
    --teal-medium: #009a9a;
    --teal-medium-light: #5fbfbf;
    --teal-light: #a8dadc;
    --teal-very-light: #f1faee;

    --blue-dark: #1d3557;
    --blue-medium: #457b9d;
    --blue-very-light: #f1faee;

    --red-dark: #a41515;
    --red-medium: #e63946;
    --pink-medium: #f4a2a8;
    --pink-light: #ffe0e0;

    --orange-medium: #e76f51;
    --gold-medium: #f4a261;
    --yellow-medium: #f5dd5d;
    --yellow-light: #fffacd;
    --yellow-very-light: #ffffe0;

    --gray-black: #000000;
    --gray-dark: #4f4f4f;
    --gray-medium: #a9a9a9;
    --gray-light: #d3d3d3;
    --gray-very-light: #e8e8e8;
    --gray-off-white: #f8f8f8;
    --gray-white: #ffffff;

    --primary: var(--teal-dark);
    --secondary: var(--teal-darkest);
    --accent: var(--yellow-medium);
    --primary-fg: var(--gray-very-light);

    --body-fg: var(--gray-very-light);
    --body-bg: #1a1a1a;
    --body-quiet-color: var(--gray-light);
    --body-medium-color: var(--gray-very-light);
    --body-loud-color: var(--gray-white);

    --header-color: var(--primary-fg);
    --header-branding-color: var(--accent);
    --header-bg: var(--secondary);
    --header-link-color: var(--primary-fg);

    --breadcrumbs-fg: var(--teal-light);
    --breadcrumbs-link-fg: var(--gray-white);
    --breadcrumbs-bg: var(--teal-dark);

    --link-fg: var(--teal-light);
    --link-hover-color: var(--teal-medium-light);
    --link-selected-fg: var(--teal-medium-light);

    --hairline-color: #272727;
    --border-color: #353535;

    --error-fg: var(--pink-medium);

    --message-success-bg: var(--teal-dark);
    --message-warning-bg: #6e4a20;
    --message-error-bg: var(--darkened-bg);

    --darkened-bg: #212121;
    --selected-bg: #2a2a2a;
    --selected-row: var(--teal-dark);

    --button-fg: var(--gray-white);
    --button-bg: var(--teal-dark);
    --button-hover-bg: var(--teal-medium-dark);
    --default-button-bg: var(--teal-medium-dark);
    --default-button-hover-bg: var(--teal-medium);
    --close-button-bg: #333333;
    --close-button-hover-bg: #666666;
    --delete-button-bg: var(--red-medium);
    --delete-button-hover-bg: var(--red-dark);

    --object-tools-fg: var(--button-fg);
    --object-tools-bg: var(--close-button-bg);
    --object-tools-hover-bg: var(--close-button-hover-bg);

    color-scheme: dark;
  }
}

html[data-theme="dark"] {
  --teal-darkest: #0a2a2a;
  --teal-dark: #1a4a4a;
  --teal-medium-dark: #008080;
  --teal-medium: #009a9a;
  --teal-medium-light: #5fbfbf;
  --teal-light: #a8dadc;
  --teal-very-light: #f1faee;

  --blue-dark: #1d3557;
  --blue-medium: #457b9d;
  --blue-very-light: #f1faee;

  --red-dark: #a41515;
  --red-medium: #e63946;
  --pink-medium: #f4a2a8;
  --pink-light: #ffe0e0;

  --orange-medium: #e76f51;
  --gold-medium: #f4a261;
  --yellow-medium: #f5dd5d;
  --yellow-light: #fffacd;
  --yellow-very-light: #ffffe0;

  --gray-black: #000000;
  --gray-dark: #4f4f4f;
  --gray-medium: #a9a9a9;
  --gray-light: #d3d3d3;
  --gray-very-light: #e8e8e8;
  --gray-off-white: #f8f8f8;
  --gray-white: #ffffff;

  --primary: var(--teal-dark);
  --secondary: var(--teal-darkest);
  --accent: var(--yellow-medium);
  --primary-fg: var(--gray-very-light);

  --body-fg: var(--gray-very-light);
  --body-bg: #1a1a1a;
  --body-quiet-color: var(--gray-light);
  --body-medium-color: var(--gray-very-light);
  --body-loud-color: var(--gray-white);

  --header-color: var(--primary-fg);
  --header-branding-color: var(--accent);
  --header-bg: var(--secondary);
  --header-link-color: var(--primary-fg);

  --breadcrumbs-fg: var(--teal-light);
  --breadcrumbs-link-fg: var(--gray-white);
  --breadcrumbs-bg: var(--teal-dark);

  --link-fg: var(--teal-light);
  --link-hover-color: var(--teal-medium-light);
  --link-selected-fg: var(--teal-medium-light);

  --hairline-color: #272727;
  --border-color: #353535;

  --error-fg: var(--pink-medium);

  --message-success-bg: var(--teal-dark);
  --message-warning-bg: #6e4a20;
  --message-error-bg: var(--darkened-bg);

  --darkened-bg: #212121;
  --selected-bg: #2a2a2a;
  --selected-row: var(--teal-dark);

  --button-fg: var(--gray-white);
  --button-bg: var(--teal-dark);
  --button-hover-bg: var(--teal-medium-dark);
  --default-button-bg: var(--teal-medium-dark);
  --default-button-hover-bg: var(--teal-medium);
  --close-button-bg: #333333;
  --close-button-hover-bg: #666666;
  --delete-button-bg: var(--red-medium);
  --delete-button-hover-bg: var(--red-dark);

  --object-tools-fg: var(--button-fg);
  --object-tools-bg: var(--close-button-bg);
  --object-tools-hover-bg: var(--close-button-hover-bg);

  color-scheme: dark;
}