blog/src/styles/_colors.scss

@media (prefers-color-scheme: light) {
  $backgroundColor: white;
  $textColor: #15202b;
  $linkColor: royalblue;

  :root {
    --background-color: #{$backgroundColor};
    --faded-background-color: #{darken($backgroundColor, 10%)};
    --shadow-color: #{darken($backgroundColor, 10%)};
    --heading-color: #{darken(royalblue, 10%)};
    --text-color: #{$textColor};
    --small-text-color: #6e707f;
    --smaller-text-color: #{lighten($textColor, 30%)};
    --faded: lightgray;
    --hr-color: lightgray;
    --link-color: #{$linkColor};
    --link-hover-color: #{lighten($linkColor, 35%)};
    --code-color: firebrick;
    --tag-color: lavender;
    --tag-text-color: #{darken(lavender, 20%)};

    // Admonition
    --note-color: #{$linkColor};
    --note-background-color: var(--link-hover-color);

    // Syntax Highlighting
    --astro-code-color-text: #24292e;
    --astro-code-color-background: inherit;
    --astro-code-token-constant: #005cc5;
    --astro-code-token-string: white;
    --astro-code-token-comment: #6a737d;
    --astro-code-token-keyword: #d73a49;
    --astro-code-token-parameter: #24292e;
    --astro-code-token-function: var(--astro-code-color-text);
    --astro-code-token-string-expression: #032f62;
    --astro-code-token-punctuation: #000007;
    --astro-code-token-link: white;
  }
}

@media (prefers-color-scheme: dark) {
  $backgroundColor: #202030;
  $textColor: #cdcdcd;
  $linkColor: lightskyblue;
  $linkHoverColor: #202749;

  :root {
    --background-color: #{$backgroundColor};
    --faded-background-color: #{lighten($backgroundColor, 10%)};
    --shadow-color: #{lighten($backgroundColor, 10%)};
    --heading-color: #{lighten(lightskyblue, 20%)};
    --text-color: #{$textColor};
    --small-text-color: #{darken($textColor, 8%)};
    --smaller-text-color: #{darken($textColor, 12%)};
    --faded: #666;
    --hr-color: gray;
    --link-color: #{$linkColor};
    --link-hover-color: #{$linkHoverColor};
    --code-color: #{lighten(firebrick, 25%)};
    --tag-color: #{darken($linkColor, 55%)};

    // Admonition
    --note-color: #{$linkColor};
    --note-background-color: var(--link-hover-color);

    // Syntax Highlighting
    --astro-code-color-text: #e1e4e8;
    --astro-code-color-background: inherit;
    --astro-code-token-constant: #79b8ff;
    --astro-code-token-string: #9ecbff;
    --astro-code-token-comment: #6a737d;
    --astro-code-token-keyword: #f97583;
    --astro-code-token-parameter: #e1e4e8;
    --astro-code-token-function: var(--astro-code-color-text);
    --astro-code-token-string-expression: #85e89d;
    --astro-code-token-punctuation: #ffab70;
    --astro-code-token-link: black;
  }
}

pre.Agda {
  a {
    color: var(--astro-code-color-text);
  }

  //   .Keyword {
  //     color: var(--astro-code-token-keyword);
  //   }

  //   .Comment {
  //     color: var(--astro-code-token-comment);
  //   }

  //   .Symbol {
  //     color: var(--astro-code-token-punctuation);
  //   }

  //   .Function {
  //     color: var(--astro-code-token-function);
  //   }
}

/* Aspects. */
.Agda .Comment {
  color: #b22222;
}
.Agda .Background {
}
.Agda .Markup {
  color: #000000;
}
.Agda .Keyword {
  color: #cd6600;
}
.Agda .String {
  color: #b22222;
}
.Agda .Number {
  color: #a020f0;
}
.Agda .Symbol {
  color: #404040;
}
.Agda .PrimitiveType {
  color: #0000cd;
}
.Agda .Pragma {
  color: black;
}
.Agda .Operator {
}

/* NameKinds. */
.Agda .Bound {
  color: black;
}
.Agda .Generalizable {
  color: black;
}
.Agda .InductiveConstructor {
  color: #008b00;
}
.Agda .CoinductiveConstructor {
  color: #8b7500;
}
.Agda .Datatype {
  color: #0000cd;
}
.Agda .Field {
  color: #ee1289;
}
.Agda .Function {
  color: #0000cd;
}
.Agda .Module {
  color: #a020f0;
}
.Agda .Postulate {
  color: #0000cd;
}
.Agda .Primitive {
  color: #0000cd;
}
.Agda .Record {
  color: #0000cd;
}

/* OtherAspects. */
.Agda .DottedPattern {
}
.Agda .UnsolvedMeta {
  color: black;
  background: yellow;
}
.Agda .UnsolvedConstraint {
  color: black;
  background: yellow;
}
.Agda .TerminationProblem {
  color: black;
  background: #ffa07a;
}
.Agda .IncompletePattern {
  color: black;
  background: #f5deb3;
}
.Agda .Error {
  color: red;
  text-decoration: underline;
}
.Agda .TypeChecks {
  color: black;
  background: #add8e6;
}

/* Standard attributes. */
.Agda a {
  text-decoration: none;
}
// .Agda a[href]:hover {
//   background-color: #b4eeb4;
// }