@media (prefers-color-scheme: light) {
    :root {
      --primary: #264b5d;
      --primary-fg: #f7f7f7;
  
      --body-fg: #eeeeee;
      --body-bg: #121212;
      --body-quiet-color: #d0d0d0;
      --body-medium-color: #e0e0e0;
      --body-loud-color: #ffffff;
  
      --breadcrumbs-link-fg: #e0e0e0;
      --breadcrumbs-bg: var(--primary);
  
      --link-fg: #81d4fa;
      --link-hover-color: #4ac1f7;
      --link-selected-fg: #6f94c6;
  
      --hairline-color: #272727;
      --border-color: #353535;
  
      --error-fg: #e35f5f;
      --message-success-bg: #006b1b;
      --message-warning-bg: #583305;
      --message-error-bg: #570808;
  
      --darkened-bg: #212121;
      --selected-bg: #1b1b1b;
      --selected-row: #00363a;
  
      --close-button-bg: #333333;
      --close-button-hover-bg: #666666;

      color-scheme: dark;
    }
  }


html[data-theme="dark"] {
    --primary: #264b5d;
    --primary-fg: #f7f7f7;
    --accent: #ecb61c;

    --body-fg: #eeeeee;
    --body-bg: #121212;
    --body-quiet-color: #d0d0d0;
    --body-medium-color: #e0e0e0;
    --body-loud-color: #ffffff;

    --breadcrumbs-link-fg: #e0e0e0;
    --breadcrumbs-bg: rgb(59, 59, 59);

    --link-fg: #81d4fa;
    --link-hover-color: #4ac1f7;
    --link-selected-fg: #6f94c6;

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

    --error-fg: #e35f5f;
    --message-success-bg: #006b1b;
    --message-warning-bg: #583305;
    --message-error-bg: #570808;

    --darkened-bg: #212121;
    --selected-bg: #1b1b1b;
    --selected-row: #ecb41c3a;

    --close-button-bg: #333333;
    --close-button-hover-bg: #666666;
    --delete-button-bg: #a41515;
    --delete-button-hover-bg: #ba2121;

    color-scheme: dark;
}

/* THEME SWITCH */
.theme-toggle {
    cursor: pointer;
    border: none;
    background: transparent;
    vertical-align: -webkit-baseline-middle;
    height: 1.5rem;
    width: 1.5rem;
    padding: 0;
    
}

.theme-toggle svg {
    vertical-align: -webkit-baseline-middle;
    width: 100%;
    height: 100%;
    display: none;
}

/*
Fully hide screen reader text so we only show the one matching the current
theme.
*/
.theme-toggle .visually-hidden {
    display: none;
}

html[data-theme='auto'] .theme-toggle .theme-label-when-auto {
    display: none !important;
}

html[data-theme="dark"] .theme-toggle .theme-label-when-dark {
    display: block;
}

html[data-theme="light"] .theme-toggle .theme-label-when-light {
    display: block;
}

/* ICONS */
.theme-toggle svg.theme-icon-when-dark,
.theme-toggle svg.theme-icon-when-light {
    fill: var(--accent);
    color: var(--header-bg);
}

html[data-theme="auto"] .theme-toggle svg.theme-icon-when-auto {
    display: none !important;
}

html[data-theme="dark"] .theme-toggle svg.theme-icon-when-dark {
    display: block;
    fill: var(--accent);
    opacity: 50%;
}

html[data-theme="dark"] .theme-toggle svg.theme-icon-when-dark:hover{
    display: block;
    fill: var(--accent);
    opacity: 100%;
}

html[data-theme="light"] .theme-toggle svg.theme-icon-when-light {
    display: block;
    fill: var(--accent);
    opacity: 50%;
}

html[data-theme="light"] .theme-toggle svg.theme-icon-when-light:hover {
    display: block;
    fill: var(--accent);
    opacity: 100%;
}