apis/scaladoc-1.0.0/styles/colors.css

:root {
  /* White */
  --white: hsl(193, 24%, 99%);

  /* Black */
  --black: hsl(200, 72%, 6%);

  /* Grey */
  --grey100: hsl(193, 24%, 97%);
  --grey200: hsl(193, 20%, 95%);
  --grey300: hsl(193, 16%, 86%);
  --grey400: hsl(193, 16%, 74%);
  --grey500: hsl(193, 16%, 66%);
  --grey600: hsl(193, 14%, 52%);
  --grey700: hsl(193, 14%, 42%);
  --grey800: hsl(193, 12%, 28%);
  --grey850: hsl(193, 12%, 22%);
  --grey900: hsl(193, 12%, 16%);
  --grey930: hsl(193, 11%, 14%);

  /* Blue */
  --blue100: hsl(200, 64%, 92%);
  --blue200: hsl(200, 66%, 82%);
  --blue300: hsl(200, 68%, 70%);
  --blue400: hsl(200, 62%, 58%);
  --blue500: hsl(200, 72%, 42%);
  --blue600: hsl(200, 71%, 24%);
  --blue700: hsl(200, 72%, 18%);
  --blue800: hsl(200, 72%, 12%);
  --blue900: hsl(200, 72%, 8%);

  /* Red */
  --red100: hsl(1 , 60%, 92%);
  --red200: hsl(1 , 64%, 84%);
  --red300: hsl(1 , 66%, 72%);
  --red400: hsl(1 , 66% , 64%);
  --red500: hsl(1 , 71% , 52%);
  --red600: hsl(1 , 71% , 40%);
  --red700: hsl(1 , 72% , 32%);
  --red800: hsl(1 , 72% , 24%);
  --red900: hsl(1 , 75% , 12%);

  /* Diagram central node aureole */

  --aureole: hsl(40, 100%, 75%);

  /* Light Mode */
  --border-light: var(--grey200);
  --border-medium: var(--grey300);

  --body-bg: var(--white);
  --body-fg: var(--grey900);
  --title-fg: var(--grey800);

  --active-bg: var(--blue300);
  --active-bg-shadow: var(--blue400);
  --active-fg: var(--grey900);

  --inactive-bg: var(--grey400);
  --inactive-bg-shadow: var(--grey700);
  --inactive-fg: var(--grey700);

  --code-bg: var(--grey200);
  --code-fg: var(--grey800);
  --symbol-fg: var(--grey900);
  --documentable-bg: var(--grey200);

  --link-fg: var(--blue500);
  --link-hover-fg: var(--blue600);
  --link-sig-fg: var(--blue500);

  --leftbar-bg: var(--grey100);
  --leftbar-fg: var(--grey900);
  --leftbar-current-bg: var(--blue100);
  --leftbar-current-fg: var(--blue500);
  --leftbar-hover-bg: var(--blue100);
  --leftbar-hover-fg: var(--grey900);
  --leftbar-border: var(--grey300);

  --leftbar-dropdown-bg: var(--grey200);

  --footer-bg: var(--white);
  --footer-fg: var(--grey700);

  --icon-color: var(--grey400);
  --selected-fg: var(--blue900);
  --selected-bg: var(--blue200);

  --shadow: var(--grey500);

  --aside-warning-bg: var(--red100);
}

  /* Dark Mode */
:root.theme-dark {
  color-scheme: dark;

  --border-light: var(--grey800);
  --border-medium: var(--grey600);

  --body-bg: var(--grey930);
  --body-fg: var(--grey300);
  --title-fg: var(--grey200);

  --active-bg: var(--blue500);
  --active-bg-shadow: var(--blue400);
  --active-fg: var(--grey300);

  --inactive-bg: var(--grey700);
  --inactive-bg-shadow: var(--grey500);
  --inactive-fg: var(--grey500);

  --code-bg: var(--grey850);
  --code-fg: var(--grey400);
  --symbol-fg: var(--grey300);
  --documentable-bg: var(--grey850);

  --link-fg: var(--blue400);
  --link-hover-fg: var(--blue300);
  --link-sig-fg: var(--blue400);

  --leftbar-bg: var(--grey900);
  --leftbar-fg: var(--grey300);
  --leftbar-current-bg: var(--grey700);
  --leftbar-current-fg: var(--white);
  --leftbar-hover-bg: var(--grey800);
  --leftbar-hover-fg: var(--grey300);
  --leftbar-border: var(--grey800);

  --leftbar-dropdown-bg: var(--grey850);

  --footer-bg: var(--grey930);
  --footer-fg: var(--grey400);

  --icon-color: var(--grey600);
  --selected-fg: var(--grey800);
  --selected-bg: var(--grey200);

  --tab-selected: var(--white);
  --tab-default: var(--grey300);

  --shadow: var(--grey500);

  --aside-warning-bg: var(--red800);
}