blue.css

body.dark{ 
  --primary: #007ACC;
  --on-primary: #FFFFFF;
  --primary-container: #DCE6F0;
  --on-primary-container: #004E8C;
  --secondary: #0097FB;
  --on-secondary: #FFFFFF;
  --secondary-container: #E0F0FF;
  --on-secondary-container: #0067B8;
  --tertiary: #4EC9B0;
  --on-tertiary: #FFFFFF;
  --tertiary-container: #E0F8F5;
  --on-tertiary-container: #009688;
  --error: #F44747;
  --on-error: #FFFFFF;
  --error-container: #FFE4E4;
  --on-error-container: #B22222;
  --background: #1E1E1E;
  --on-background: #FFFFFF;
  --surface: #1E1E1E;
  --on-surface: #FFFFFF;
  --surface-variant: #252526;
  --on-surface-variant: #D4D4D4;
  --inverse-surface: #F0F0F0;
  --inverse-on-surface: #000000;
  --inverse-primary: #DCE6F0;
  --inverse-on-primary: #004E8C;
  --code-text-color: #D4D4D4;
  --code-added-color: #B5CEA8;
  --code-removed-color: #CE9178;
  --added-line-color: #6BBF6B33;
  --removed-line-color: #F4877133;
  --font-family: "Consolas", monospace;
}

body.dark {
  /* dark mode style */
}

html,
body {
  scroll-behavior: smooth !important;
  overflow-y: hidden !important;
  height: 100% !important;
}

a {
  user-select: none !important;
}

html::-webkit-scrollbar {
  width: 0 !important;
}

body,
nav {
  transition: background 0.6s ease-in-out !important;
}

div.cm-scroller::-webkit-scrollbar {
  width: 8px !important;
  background: var(--active) !important;
}

div.cm-scroller::-webkit-scrollbar-thumb {
  background: var(--primary) !important;
}

code {
  font-family: var(--font-family) !important;
}

.added {
  color: var(--code-added-color) !important;
  background-color: var(--added-line-color) !important;
  padding: 0.2rem !important;
}

.removed {
  color: var(--code-removed-color) !important;
  background-color: var(--removed-line-color) !important;
  padding: 0.2rem !important;
}

.cm-tooltip {
  background-color: var(--primary-container) !important;
}

.cm-gutters {
  background-color: var(--active) !important;
}

.cm-activeLine,
.cm-activeLineGutter {
  border-left-width: 3px !important;
  border-left-style: solid !important;
  border-left-color: var(--primary) !important;
}

.dark code .ͼi {
  color: #81c491 !important;
}

.dark code .ͼi {
  color: #98c379 !important;
}

.dark code .ͼb {
  color: #c678dd !important;
}

.cm-number,
div[data-language="css"] .ͼb {
  color: #d19a66 !important;
}

.dark code .ͼe {
  color: #e06c75 !important;
}

.dark code .ͼg,
.dark code .ͼj {
  color: #6bc3d4 !important;
}

.cm-error {
  color: #e06c75 !important;
}

.cm-qualifier {
  color: #abb2bf !important;
}

.cm-bracket {
  color: #abb2bf !important;
}

.dark code .ͼc,
.dark code .ͼi {
  color: #5b74 !important;
}

.dark code .ͼd {
  color: #e06c75 !important;
}