From 7b5fe02079fffb783c7a6bef5300985fe372199c Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Sun, 30 Nov 2025 11:30:10 +0800
Subject: [PATCH] feat(code): use github theme

---
 assets/css/compiled/main.css                  | 608 ++++++++++++++----
 assets/css/components/chroma.css              | 351 +++++-----
 .../docs/advanced-customisation/index.it.md   |   2 +-
 .../docs/advanced-customisation/index.ja.md   |   2 +-
 .../docs/advanced-customisation/index.md      |   2 +-
 .../advanced-customisation/index.zh-cn.md     |   2 +-
 6 files changed, 652 insertions(+), 315 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index eaa73712..6a79d036 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -3314,14 +3314,6 @@
   .prose .chroma {
     position: static;
     border-radius: var(--radius-md);
-    background-color: oklch(98.5% 0 0);
-    color: rgba(var(--color-neutral-700), 1);
-    &:is(.dark *) {
-      background-color: oklch(21% 0.006 285.885);
-    }
-    &:is(.dark *) {
-      color: rgba(var(--color-neutral-200), 1);
-    }
   }
   .prose .highlight:not(:has(table)) .chroma, .prose .highlight > .chroma {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
@@ -3348,134 +3340,520 @@
     margin-inline: calc(var(--spacing) * -4);
     display: block;
     width: auto;
-    background-color: rgba(var(--color-primary-100), 1);
     padding-inline: calc(var(--spacing) * 4);
-    &:is(.dark *) {
-      background-color: rgba(var(--color-primary-900), 1);
-    }
   }
   .chroma .lntd .hl {
     margin: calc(var(--spacing) * 0);
     padding: calc(var(--spacing) * 0);
   }
-  .chroma .lnt, .chroma .ln {
-    margin-right: 0.4em;
-    padding-inline: 0.4em;
-    padding-block: calc(var(--spacing) * 0);
-    color: rgba(var(--color-neutral-600), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-neutral-300), 1);
+  html:not(.dark) {
+    .bg {
+      background-color: #fff;
+    }
+    .chroma {
+      background-color: #fff;
+    }
+    .chroma .err {
+      color: #f6f8fa;
+      background-color: #82071e;
+    }
+    .chroma .lnlinks {
+      outline: none;
+      text-decoration: none;
+      color: inherit;
+    }
+    .chroma .lntd {
+      vertical-align: top;
+      padding: 0;
+      margin: 0;
+      border: 0;
+    }
+    .chroma .lntable {
+      border-spacing: 0;
+    }
+    .chroma .hl {
+      background-color: #e5e5e5;
+    }
+    .chroma .lnt {
+      white-space: pre;
+      -webkit-user-select: none;
+      user-select: none;
+      margin-right: 0.4em;
+      padding: 0 0.4em 0 0.4em;
+      color: #7f7f7f;
+    }
+    .chroma .ln {
+      white-space: pre;
+      -webkit-user-select: none;
+      user-select: none;
+      margin-right: 0.4em;
+      padding: 0 0.4em 0 0.4em;
+      color: #7f7f7f;
+    }
+    .chroma .line {
+      display: flex;
+    }
+    .chroma .k {
+      color: #cf222e;
+    }
+    .chroma .kc {
+      color: #cf222e;
+    }
+    .chroma .kd {
+      color: #cf222e;
+    }
+    .chroma .kn {
+      color: #cf222e;
+    }
+    .chroma .kp {
+      color: #cf222e;
+    }
+    .chroma .kr {
+      color: #cf222e;
+    }
+    .chroma .kt {
+      color: #cf222e;
+    }
+    .chroma .na {
+      color: #1f2328;
+    }
+    .chroma .nc {
+      color: #1f2328;
+    }
+    .chroma .no {
+      color: #0550ae;
+    }
+    .chroma .nd {
+      color: #0550ae;
+    }
+    .chroma .ni {
+      color: #6639ba;
+    }
+    .chroma .nl {
+      color: #900;
+      font-weight: bold;
+    }
+    .chroma .nn {
+      color: #24292e;
+    }
+    .chroma .nx {
+      color: #1f2328;
+    }
+    .chroma .nt {
+      color: #0550ae;
+    }
+    .chroma .nb {
+      color: #6639ba;
+    }
+    .chroma .bp {
+      color: #6a737d;
+    }
+    .chroma .nv {
+      color: #953800;
+    }
+    .chroma .vc {
+      color: #953800;
+    }
+    .chroma .vg {
+      color: #953800;
+    }
+    .chroma .vi {
+      color: #953800;
+    }
+    .chroma .vm {
+      color: #953800;
+    }
+    .chroma .nf {
+      color: #6639ba;
+    }
+    .chroma .fm {
+      color: #6639ba;
+    }
+    .chroma .s {
+      color: #0a3069;
+    }
+    .chroma .sa {
+      color: #0a3069;
+    }
+    .chroma .sb {
+      color: #0a3069;
+    }
+    .chroma .sc {
+      color: #0a3069;
+    }
+    .chroma .dl {
+      color: #0a3069;
+    }
+    .chroma .sd {
+      color: #0a3069;
+    }
+    .chroma .s2 {
+      color: #0a3069;
+    }
+    .chroma .se {
+      color: #0a3069;
+    }
+    .chroma .sh {
+      color: #0a3069;
+    }
+    .chroma .si {
+      color: #0a3069;
+    }
+    .chroma .sx {
+      color: #0a3069;
+    }
+    .chroma .sr {
+      color: #0a3069;
+    }
+    .chroma .s1 {
+      color: #0a3069;
+    }
+    .chroma .ss {
+      color: #032f62;
+    }
+    .chroma .m {
+      color: #0550ae;
+    }
+    .chroma .mb {
+      color: #0550ae;
+    }
+    .chroma .mf {
+      color: #0550ae;
+    }
+    .chroma .mh {
+      color: #0550ae;
+    }
+    .chroma .mi {
+      color: #0550ae;
+    }
+    .chroma .il {
+      color: #0550ae;
+    }
+    .chroma .mo {
+      color: #0550ae;
+    }
+    .chroma .o {
+      color: #0550ae;
+    }
+    .chroma .ow {
+      color: #0550ae;
+    }
+    .chroma .p {
+      color: #1f2328;
+    }
+    .chroma .c {
+      color: #57606a;
+    }
+    .chroma .ch {
+      color: #57606a;
+    }
+    .chroma .cm {
+      color: #57606a;
+    }
+    .chroma .c1 {
+      color: #57606a;
+    }
+    .chroma .cs {
+      color: #57606a;
+    }
+    .chroma .cp {
+      color: #57606a;
+    }
+    .chroma .cpf {
+      color: #57606a;
+    }
+    .chroma .gd {
+      color: #82071e;
+      background-color: #ffebe9;
+    }
+    .chroma .ge {
+      color: #1f2328;
+    }
+    .chroma .gi {
+      color: #116329;
+      background-color: #dafbe1;
+    }
+    .chroma .go {
+      color: #1f2328;
+    }
+    .chroma .gl {
+      text-decoration: underline;
+    }
+    .chroma .w {
+      color: #fff;
     }
   }
-  .chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .nc, .chroma .fm, .chroma .nn, .chroma .vc, .chroma .o {
-    color: rgba(var(--color-primary-600), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-primary-300), 1);
+  html.dark {
+    .bg {
+      color: #e6edf3;
+      background-color: #0d1117;
     }
-  }
-  .chroma .kc {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: rgba(var(--color-secondary-400), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-secondary-500), 1);
+    .chroma {
+      color: #e6edf3;
+      background-color: #0d1117;
     }
-  }
-  .chroma .kt, .chroma .nv, .chroma .vi, .chroma .vm, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo {
-    color: rgba(var(--color-secondary-400), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-secondary-600), 1);
+    .chroma .err {
+      color: #f85149;
     }
-  }
-  .chroma .n, .chroma .nd, .chroma .ni, .chroma .nl {
-    color: rgba(var(--color-secondary-900), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-secondary-200), 1);
+    .chroma .lnlinks {
+      outline: none;
+      text-decoration: none;
+      color: inherit;
     }
-  }
-  .chroma .na, .chroma .nb, .chroma .bp, .chroma .nx, .chroma .py, .chroma .nt {
-    color: rgba(var(--color-secondary-800), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-secondary-300), 1);
+    .chroma .lntd {
+      vertical-align: top;
+      padding: 0;
+      margin: 0;
+      border: 0;
     }
-  }
-  .chroma .no, .chroma .ne, .chroma .vg {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: rgba(var(--color-secondary-400), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-secondary-500), 1);
+    .chroma .lntable {
+      border-spacing: 0;
     }
-  }
-  .chroma .nf {
-    color: rgba(var(--color-secondary-600), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-secondary-500), 1);
+    .chroma .hl {
+      background-color: #333;
     }
-  }
-  .chroma .l, .chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1, .chroma .gi, .chroma .go, .chroma .gp {
-    color: rgba(var(--color-primary-800), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-primary-400), 1);
+    .chroma .lnt {
+      white-space: pre;
+      -webkit-user-select: none;
+      user-select: none;
+      margin-right: 0.4em;
+      padding: 0 0.4em 0 0.4em;
+      color: #737679;
     }
-  }
-  .chroma .se {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: rgba(var(--color-secondary-400), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-secondary-500), 1);
+    .chroma .ln {
+      white-space: pre;
+      -webkit-user-select: none;
+      user-select: none;
+      margin-right: 0.4em;
+      padding: 0 0.4em 0 0.4em;
+      color: #6e7681;
     }
-  }
-  .chroma .sr, .chroma .ss {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: rgba(var(--color-primary-800), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-primary-400), 1);
+    .chroma .line {
+      display: flex;
     }
-  }
-  .chroma .ow {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: rgba(var(--color-primary-400), 1);
-    &:is(.dark *) {
-      color: rgba(var(--color-primary-600), 1);
+    .chroma .k {
+      color: #ff7b72;
     }
-  }
-  .chroma .c, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf {
-    color: rgba(var(--color-neutral-500), 1);
-    font-style: italic;
-    &:is(.dark *) {
-      color: rgba(var(--color-neutral-400), 1);
+    .chroma .kc {
+      color: #79c0ff;
     }
-  }
-  .chroma .ch {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: rgba(var(--color-neutral-500), 1);
-    font-style: italic;
-    &:is(.dark *) {
-      color: rgba(var(--color-neutral-400), 1);
+    .chroma .kd {
+      color: #ff7b72;
+    }
+    .chroma .kn {
+      color: #ff7b72;
+    }
+    .chroma .kp {
+      color: #79c0ff;
+    }
+    .chroma .kr {
+      color: #ff7b72;
+    }
+    .chroma .kt {
+      color: #ff7b72;
+    }
+    .chroma .nc {
+      color: #f0883e;
+      font-weight: bold;
+    }
+    .chroma .no {
+      color: #79c0ff;
+      font-weight: bold;
+    }
+    .chroma .nd {
+      color: #d2a8ff;
+      font-weight: bold;
+    }
+    .chroma .ni {
+      color: #ffa657;
+    }
+    .chroma .ne {
+      color: #f0883e;
+      font-weight: bold;
+    }
+    .chroma .nl {
+      color: #79c0ff;
+      font-weight: bold;
+    }
+    .chroma .nn {
+      color: #ff7b72;
+    }
+    .chroma .py {
+      color: #79c0ff;
+    }
+    .chroma .nt {
+      color: #7ee787;
+    }
+    .chroma .nv {
+      color: #79c0ff;
+    }
+    .chroma .vc {
+      color: #79c0ff;
+    }
+    .chroma .vg {
+      color: #79c0ff;
+    }
+    .chroma .vi {
+      color: #79c0ff;
+    }
+    .chroma .vm {
+      color: #79c0ff;
+    }
+    .chroma .nf {
+      color: #d2a8ff;
+      font-weight: bold;
+    }
+    .chroma .fm {
+      color: #d2a8ff;
+      font-weight: bold;
+    }
+    .chroma .l {
+      color: #a5d6ff;
+    }
+    .chroma .ld {
+      color: #79c0ff;
+    }
+    .chroma .s {
+      color: #a5d6ff;
+    }
+    .chroma .sa {
+      color: #79c0ff;
+    }
+    .chroma .sb {
+      color: #a5d6ff;
+    }
+    .chroma .sc {
+      color: #a5d6ff;
+    }
+    .chroma .dl {
+      color: #79c0ff;
+    }
+    .chroma .sd {
+      color: #a5d6ff;
+    }
+    .chroma .s2 {
+      color: #a5d6ff;
+    }
+    .chroma .se {
+      color: #79c0ff;
+    }
+    .chroma .sh {
+      color: #79c0ff;
+    }
+    .chroma .si {
+      color: #a5d6ff;
+    }
+    .chroma .sx {
+      color: #a5d6ff;
+    }
+    .chroma .sr {
+      color: #79c0ff;
+    }
+    .chroma .s1 {
+      color: #a5d6ff;
+    }
+    .chroma .ss {
+      color: #a5d6ff;
+    }
+    .chroma .m {
+      color: #a5d6ff;
+    }
+    .chroma .mb {
+      color: #a5d6ff;
+    }
+    .chroma .mf {
+      color: #a5d6ff;
+    }
+    .chroma .mh {
+      color: #a5d6ff;
+    }
+    .chroma .mi {
+      color: #a5d6ff;
+    }
+    .chroma .il {
+      color: #a5d6ff;
+    }
+    .chroma .mo {
+      color: #a5d6ff;
+    }
+    .chroma .o {
+      color: #ff7b72;
+      font-weight: bold;
+    }
+    .chroma .ow {
+      color: #ff7b72;
+      font-weight: bold;
+    }
+    .chroma .c {
+      color: #8b949e;
+      font-style: italic;
+    }
+    .chroma .ch {
+      color: #8b949e;
+      font-style: italic;
+    }
+    .chroma .cm {
+      color: #8b949e;
+      font-style: italic;
+    }
+    .chroma .c1 {
+      color: #8b949e;
+      font-style: italic;
+    }
+    .chroma .cs {
+      color: #8b949e;
+      font-weight: bold;
+      font-style: italic;
+    }
+    .chroma .cp {
+      color: #8b949e;
+      font-weight: bold;
+      font-style: italic;
+    }
+    .chroma .cpf {
+      color: #8b949e;
+      font-weight: bold;
+      font-style: italic;
+    }
+    .chroma .gd {
+      color: #ffa198;
+      background-color: #490202;
+    }
+    .chroma .ge {
+      font-style: italic;
+    }
+    .chroma .gr {
+      color: #ffa198;
+    }
+    .chroma .gh {
+      color: #79c0ff;
+      font-weight: bold;
+    }
+    .chroma .gi {
+      color: #56d364;
+      background-color: #0f5323;
+    }
+    .chroma .go {
+      color: #8b949e;
+    }
+    .chroma .gp {
+      color: #8b949e;
+    }
+    .chroma .gs {
+      font-weight: bold;
+    }
+    .chroma .gu {
+      color: #79c0ff;
+    }
+    .chroma .gt {
+      color: #ff7b72;
+    }
+    .chroma .gl {
+      text-decoration: underline;
+    }
+    .chroma .w {
+      color: #6e7681;
     }
-  }
-  .chroma .ge {
-    font-style: italic;
-  }
-  .chroma .gh {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    color: rgba(var(--color-neutral-500), 1);
-  }
-  .chroma .gs {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-  }
-  .chroma .gu, .chroma .gt {
-    color: rgba(var(--color-neutral-500), 1);
-  }
-  .chroma .gl {
-    text-decoration-line: underline;
   }
 }
 #zen-mode-button {
diff --git a/assets/css/components/chroma.css b/assets/css/components/chroma.css
index 16156e03..76a78036 100644
--- a/assets/css/components/chroma.css
+++ b/assets/css/components/chroma.css
@@ -1,7 +1,7 @@
 /* -- Chroma Highlight -- */
 /* Background */
 .prose .chroma {
-  @apply static rounded-md text-neutral-700 bg-zinc-50 dark:bg-zinc-900 dark:text-neutral-200;
+  @apply static rounded-md;
 }
 
 .prose .highlight:not(:has(table)) .chroma,
@@ -23,208 +23,167 @@
 
 /* LineHighlight */
 .chroma .hl {
-  @apply block w-auto px-4 -mx-4 bg-primary-100 dark:bg-primary-900;
+  @apply block w-auto px-4 -mx-4;
 }
 
 .chroma .lntd .hl {
   @apply p-0 m-0;
 }
 
-/* LineNumbersTable */
-/* LineNumbers */
-.chroma .lnt,
-.chroma .ln {
-  @apply text-neutral-600 dark:text-neutral-300 mr-[0.4em] px-[0.4em] py-0;
-}
+html:not(.dark) {
+/* Generated using: hugo gen chromastyles --style=github */
 
-/* Keyword */
-/* KeywordDeclaration */
-/* KeywordNamespace */
-/* KeywordPseudo */
-/* KeywordReserved */
-/* NameClass */
-/* NameFunctionMagic */
-/* NameNamespace */
-/* NameVariableClass */
-/* Operator */
-.chroma .k,
-.chroma .kd,
-.chroma .kn,
-.chroma .kp,
-.chroma .kr,
-.chroma .nc,
-.chroma .fm,
-.chroma .nn,
-.chroma .vc,
-.chroma .o {
-  @apply text-primary-600 dark:text-primary-300;
+/* Background */ .bg { background-color:#fff; }
+/* PreWrapper */ .chroma { background-color:#fff; }
+/* Error */ .chroma .err { color:#f6f8fa;background-color:#82071e }
+/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
+/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
+/* LineTable */ .chroma .lntable { border-spacing:0; }
+/* LineHighlight */ .chroma .hl { background-color:#e5e5e5 }
+/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
+/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
+/* Line */ .chroma .line { display:flex; }
+/* Keyword */ .chroma .k { color:#cf222e }
+/* KeywordConstant */ .chroma .kc { color:#cf222e }
+/* KeywordDeclaration */ .chroma .kd { color:#cf222e }
+/* KeywordNamespace */ .chroma .kn { color:#cf222e }
+/* KeywordPseudo */ .chroma .kp { color:#cf222e }
+/* KeywordReserved */ .chroma .kr { color:#cf222e }
+/* KeywordType */ .chroma .kt { color:#cf222e }
+/* NameAttribute */ .chroma .na { color:#1f2328 }
+/* NameClass */ .chroma .nc { color:#1f2328 }
+/* NameConstant */ .chroma .no { color:#0550ae }
+/* NameDecorator */ .chroma .nd { color:#0550ae }
+/* NameEntity */ .chroma .ni { color:#6639ba }
+/* NameLabel */ .chroma .nl { color:#900;font-weight:bold }
+/* NameNamespace */ .chroma .nn { color:#24292e }
+/* NameOther */ .chroma .nx { color:#1f2328 }
+/* NameTag */ .chroma .nt { color:#0550ae }
+/* NameBuiltin */ .chroma .nb { color:#6639ba }
+/* NameBuiltinPseudo */ .chroma .bp { color:#6a737d }
+/* NameVariable */ .chroma .nv { color:#953800 }
+/* NameVariableClass */ .chroma .vc { color:#953800 }
+/* NameVariableGlobal */ .chroma .vg { color:#953800 }
+/* NameVariableInstance */ .chroma .vi { color:#953800 }
+/* NameVariableMagic */ .chroma .vm { color:#953800 }
+/* NameFunction */ .chroma .nf { color:#6639ba }
+/* NameFunctionMagic */ .chroma .fm { color:#6639ba }
+/* LiteralString */ .chroma .s { color:#0a3069 }
+/* LiteralStringAffix */ .chroma .sa { color:#0a3069 }
+/* LiteralStringBacktick */ .chroma .sb { color:#0a3069 }
+/* LiteralStringChar */ .chroma .sc { color:#0a3069 }
+/* LiteralStringDelimiter */ .chroma .dl { color:#0a3069 }
+/* LiteralStringDoc */ .chroma .sd { color:#0a3069 }
+/* LiteralStringDouble */ .chroma .s2 { color:#0a3069 }
+/* LiteralStringEscape */ .chroma .se { color:#0a3069 }
+/* LiteralStringHeredoc */ .chroma .sh { color:#0a3069 }
+/* LiteralStringInterpol */ .chroma .si { color:#0a3069 }
+/* LiteralStringOther */ .chroma .sx { color:#0a3069 }
+/* LiteralStringRegex */ .chroma .sr { color:#0a3069 }
+/* LiteralStringSingle */ .chroma .s1 { color:#0a3069 }
+/* LiteralStringSymbol */ .chroma .ss { color:#032f62 }
+/* LiteralNumber */ .chroma .m { color:#0550ae }
+/* LiteralNumberBin */ .chroma .mb { color:#0550ae }
+/* LiteralNumberFloat */ .chroma .mf { color:#0550ae }
+/* LiteralNumberHex */ .chroma .mh { color:#0550ae }
+/* LiteralNumberInteger */ .chroma .mi { color:#0550ae }
+/* LiteralNumberIntegerLong */ .chroma .il { color:#0550ae }
+/* LiteralNumberOct */ .chroma .mo { color:#0550ae }
+/* Operator */ .chroma .o { color:#0550ae }
+/* OperatorWord */ .chroma .ow { color:#0550ae }
+/* Punctuation */ .chroma .p { color:#1f2328 }
+/* Comment */ .chroma .c { color:#57606a }
+/* CommentHashbang */ .chroma .ch { color:#57606a }
+/* CommentMultiline */ .chroma .cm { color:#57606a }
+/* CommentSingle */ .chroma .c1 { color:#57606a }
+/* CommentSpecial */ .chroma .cs { color:#57606a }
+/* CommentPreproc */ .chroma .cp { color:#57606a }
+/* CommentPreprocFile */ .chroma .cpf { color:#57606a }
+/* GenericDeleted */ .chroma .gd { color:#82071e;background-color:#ffebe9 }
+/* GenericEmph */ .chroma .ge { color:#1f2328 }
+/* GenericInserted */ .chroma .gi { color:#116329;background-color:#dafbe1 }
+/* GenericOutput */ .chroma .go { color:#1f2328 }
+/* GenericUnderline */ .chroma .gl { text-decoration:underline }
+/* TextWhitespace */ .chroma .w { color:#fff }
 }
+html.dark {
+/* Generated using: hugo gen chromastyles --style=github-dark */
 
-/* KeywordConstant */
-.chroma .kc {
-  @apply font-semibold text-secondary-400 dark:text-secondary-500;
-}
-
-/* KeywordType */
-/* NameVariable */
-/* NameVariableInstance */
-/* NameVariableMagic */
-/* LiteralNumber */
-/* LiteralNumberBin */
-/* LiteralNumberFloat */
-/* LiteralNumberHex */
-/* LiteralNumberInteger */
-/* LiteralNumberIntegerLong */
-/* LiteralNumberOct */
-.chroma .kt,
-.chroma .nv,
-.chroma .vi,
-.chroma .vm,
-.chroma .m,
-.chroma .mb,
-.chroma .mf,
-.chroma .mh,
-.chroma .mi,
-.chroma .il,
-.chroma .mo {
-  @apply text-secondary-400 dark:text-secondary-600;
-}
-
-/* Name */
-/* NameDecorator */
-/* NameEntity */
-/* NameLabel */
-.chroma .n,
-.chroma .nd,
-.chroma .ni,
-.chroma .nl {
-  @apply text-secondary-900 dark:text-secondary-200;
-}
-
-/* NameAttribute */
-/* NameBuiltin */
-/* NameBuiltinPseudo */
-/* NameOther */
-/* NameProperty */
-/* NameTag */
-.chroma .na,
-.chroma .nb,
-.chroma .bp,
-.chroma .nx,
-.chroma .py,
-.chroma .nt {
-  @apply text-secondary-800 dark:text-secondary-300;
-}
-
-/* NameConstant */
-/* NameException */
-/* NameVariableGlobal */
-.chroma .no,
-.chroma .ne,
-.chroma .vg {
-  @apply font-semibold text-secondary-400 dark:text-secondary-500;
-}
-
-/* NameFunction */
-.chroma .nf {
-  @apply text-secondary-600 dark:text-secondary-500;
-}
-
-/* Literal */
-/* LiteralDate */
-/* LiteralString */
-/* LiteralStringAffix */
-/* LiteralStringBacktick */
-/* LiteralStringChar */
-/* LiteralStringDelimiter */
-/* LiteralStringDoc */
-/* LiteralStringDouble */
-/* LiteralStringHeredoc */
-/* LiteralStringInterpol */
-/* LiteralStringOther */
-/* LiteralStringSingle */
-/* GenericInserted */
-/* GenericOutput */
-/* GenericPrompt */
-.chroma .l,
-.chroma .ld,
-.chroma .s,
-.chroma .sa,
-.chroma .sb,
-.chroma .sc,
-.chroma .dl,
-.chroma .sd,
-.chroma .s2,
-.chroma .sh,
-.chroma .si,
-.chroma .sx,
-.chroma .s1,
-.chroma .gi,
-.chroma .go,
-.chroma .gp {
-  @apply text-primary-800 dark:text-primary-400;
-}
-
-/* LiteralStringEscape */
-.chroma .se {
-  @apply font-semibold text-secondary-400 dark:text-secondary-500;
-}
-
-/* LiteralStringRegex */
-/* LiteralStringSymbol */
-.chroma .sr,
-.chroma .ss {
-  @apply font-semibold text-primary-800 dark:text-primary-400;
-}
-
-/* OperatorWord */
-.chroma .ow {
-  @apply font-semibold text-primary-400 dark:text-primary-600;
-}
-
-/* Comment */
-/* CommentMultiline */
-/* CommentSingle */
-/* CommentSpecial */
-/* CommentPreproc */
-/* CommentPreprocFile */
-.chroma .c,
-.chroma .cm,
-.chroma .c1,
-.chroma .cs,
-.chroma .cp,
-.chroma .cpf {
-  @apply italic text-neutral-500 dark:text-neutral-400;
-}
-
-/* CommentHashbang */
-.chroma .ch {
-  @apply italic font-semibold text-neutral-500 dark:text-neutral-400;
-}
-
-/* GenericEmph */
-.chroma .ge {
-  @apply italic;
-}
-
-/* GenericHeading */
-.chroma .gh {
-  @apply font-semibold text-neutral-500;
-}
-
-/* GenericStrong */
-.chroma .gs {
-  @apply font-semibold;
-}
-
-/* GenericSubheading */
-/* GenericTraceback */
-.chroma .gu,
-.chroma .gt {
-  @apply text-neutral-500;
-}
-
-/* GenericUnderline */
-.chroma .gl {
-  @apply underline;
+/* Background */ .bg { color:#e6edf3;background-color:#0d1117; }
+/* PreWrapper */ .chroma { color:#e6edf3;background-color:#0d1117; }
+/* Error */ .chroma .err { color:#f85149 }
+/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
+/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
+/* LineTable */ .chroma .lntable { border-spacing:0; }
+/* LineHighlight */ .chroma .hl { background-color:#333 }
+/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#737679 }
+/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#6e7681 }
+/* Line */ .chroma .line { display:flex; }
+/* Keyword */ .chroma .k { color:#ff7b72 }
+/* KeywordConstant */ .chroma .kc { color:#79c0ff }
+/* KeywordDeclaration */ .chroma .kd { color:#ff7b72 }
+/* KeywordNamespace */ .chroma .kn { color:#ff7b72 }
+/* KeywordPseudo */ .chroma .kp { color:#79c0ff }
+/* KeywordReserved */ .chroma .kr { color:#ff7b72 }
+/* KeywordType */ .chroma .kt { color:#ff7b72 }
+/* NameClass */ .chroma .nc { color:#f0883e;font-weight:bold }
+/* NameConstant */ .chroma .no { color:#79c0ff;font-weight:bold }
+/* NameDecorator */ .chroma .nd { color:#d2a8ff;font-weight:bold }
+/* NameEntity */ .chroma .ni { color:#ffa657 }
+/* NameException */ .chroma .ne { color:#f0883e;font-weight:bold }
+/* NameLabel */ .chroma .nl { color:#79c0ff;font-weight:bold }
+/* NameNamespace */ .chroma .nn { color:#ff7b72 }
+/* NameProperty */ .chroma .py { color:#79c0ff }
+/* NameTag */ .chroma .nt { color:#7ee787 }
+/* NameVariable */ .chroma .nv { color:#79c0ff }
+/* NameVariableClass */ .chroma .vc { color:#79c0ff }
+/* NameVariableGlobal */ .chroma .vg { color:#79c0ff }
+/* NameVariableInstance */ .chroma .vi { color:#79c0ff }
+/* NameVariableMagic */ .chroma .vm { color:#79c0ff }
+/* NameFunction */ .chroma .nf { color:#d2a8ff;font-weight:bold }
+/* NameFunctionMagic */ .chroma .fm { color:#d2a8ff;font-weight:bold }
+/* Literal */ .chroma .l { color:#a5d6ff }
+/* LiteralDate */ .chroma .ld { color:#79c0ff }
+/* LiteralString */ .chroma .s { color:#a5d6ff }
+/* LiteralStringAffix */ .chroma .sa { color:#79c0ff }
+/* LiteralStringBacktick */ .chroma .sb { color:#a5d6ff }
+/* LiteralStringChar */ .chroma .sc { color:#a5d6ff }
+/* LiteralStringDelimiter */ .chroma .dl { color:#79c0ff }
+/* LiteralStringDoc */ .chroma .sd { color:#a5d6ff }
+/* LiteralStringDouble */ .chroma .s2 { color:#a5d6ff }
+/* LiteralStringEscape */ .chroma .se { color:#79c0ff }
+/* LiteralStringHeredoc */ .chroma .sh { color:#79c0ff }
+/* LiteralStringInterpol */ .chroma .si { color:#a5d6ff }
+/* LiteralStringOther */ .chroma .sx { color:#a5d6ff }
+/* LiteralStringRegex */ .chroma .sr { color:#79c0ff }
+/* LiteralStringSingle */ .chroma .s1 { color:#a5d6ff }
+/* LiteralStringSymbol */ .chroma .ss { color:#a5d6ff }
+/* LiteralNumber */ .chroma .m { color:#a5d6ff }
+/* LiteralNumberBin */ .chroma .mb { color:#a5d6ff }
+/* LiteralNumberFloat */ .chroma .mf { color:#a5d6ff }
+/* LiteralNumberHex */ .chroma .mh { color:#a5d6ff }
+/* LiteralNumberInteger */ .chroma .mi { color:#a5d6ff }
+/* LiteralNumberIntegerLong */ .chroma .il { color:#a5d6ff }
+/* LiteralNumberOct */ .chroma .mo { color:#a5d6ff }
+/* Operator */ .chroma .o { color:#ff7b72;font-weight:bold }
+/* OperatorWord */ .chroma .ow { color:#ff7b72;font-weight:bold }
+/* Comment */ .chroma .c { color:#8b949e;font-style:italic }
+/* CommentHashbang */ .chroma .ch { color:#8b949e;font-style:italic }
+/* CommentMultiline */ .chroma .cm { color:#8b949e;font-style:italic }
+/* CommentSingle */ .chroma .c1 { color:#8b949e;font-style:italic }
+/* CommentSpecial */ .chroma .cs { color:#8b949e;font-weight:bold;font-style:italic }
+/* CommentPreproc */ .chroma .cp { color:#8b949e;font-weight:bold;font-style:italic }
+/* CommentPreprocFile */ .chroma .cpf { color:#8b949e;font-weight:bold;font-style:italic }
+/* GenericDeleted */ .chroma .gd { color:#ffa198;background-color:#490202 }
+/* GenericEmph */ .chroma .ge { font-style:italic }
+/* GenericError */ .chroma .gr { color:#ffa198 }
+/* GenericHeading */ .chroma .gh { color:#79c0ff;font-weight:bold }
+/* GenericInserted */ .chroma .gi { color:#56d364;background-color:#0f5323 }
+/* GenericOutput */ .chroma .go { color:#8b949e }
+/* GenericPrompt */ .chroma .gp { color:#8b949e }
+/* GenericStrong */ .chroma .gs { font-weight:bold }
+/* GenericSubheading */ .chroma .gu { color:#79c0ff }
+/* GenericTraceback */ .chroma .gt { color:#ff7b72 }
+/* GenericUnderline */ .chroma .gl { text-decoration:underline }
+/* TextWhitespace */ .chroma .w { color:#6e7681 }
 }
diff --git a/exampleSite/content/docs/advanced-customisation/index.it.md b/exampleSite/content/docs/advanced-customisation/index.it.md
index 35e5bc30..1f363b55 100644
--- a/exampleSite/content/docs/advanced-customisation/index.it.md
+++ b/exampleSite/content/docs/advanced-customisation/index.it.md
@@ -126,7 +126,7 @@ Simply by changing this one value, all the font sizes on your website will be ad
 
 ### Changing Syntax Highlighting Theme
 
-Blowfish uses a custom syntax highlighting style, with colors defined in `assets/css/schemes`. To change the syntax highlighting theme, create `assets/css/custom.css` and add the following:
+To change the syntax highlighting theme, create `assets/css/custom.css` and add the following:
 
 ```css
 .chroma,
diff --git a/exampleSite/content/docs/advanced-customisation/index.ja.md b/exampleSite/content/docs/advanced-customisation/index.ja.md
index 59fc0e61..2d6d1988 100644
--- a/exampleSite/content/docs/advanced-customisation/index.ja.md
+++ b/exampleSite/content/docs/advanced-customisation/index.ja.md
@@ -127,7 +127,7 @@ html {
 
 ### シンタックスハイライトテーマの変更
 
-Blowfish はカスタム構文ハイライトスタイルを使用しており、色は `assets/css/schemes` に定義されています。構文ハイライトテーマを変更するには、`assets/css/custom.css` を作成し、次の内容を追加してください：
+構文ハイライトテーマを変更するには、`assets/css/custom.css` を作成し、次の内容を追加してください：
 
 ```css
 .chroma,
diff --git a/exampleSite/content/docs/advanced-customisation/index.md b/exampleSite/content/docs/advanced-customisation/index.md
index 35e5bc30..1f363b55 100644
--- a/exampleSite/content/docs/advanced-customisation/index.md
+++ b/exampleSite/content/docs/advanced-customisation/index.md
@@ -126,7 +126,7 @@ Simply by changing this one value, all the font sizes on your website will be ad
 
 ### Changing Syntax Highlighting Theme
 
-Blowfish uses a custom syntax highlighting style, with colors defined in `assets/css/schemes`. To change the syntax highlighting theme, create `assets/css/custom.css` and add the following:
+To change the syntax highlighting theme, create `assets/css/custom.css` and add the following:
 
 ```css
 .chroma,
diff --git a/exampleSite/content/docs/advanced-customisation/index.zh-cn.md b/exampleSite/content/docs/advanced-customisation/index.zh-cn.md
index 94ba2ce5..2b014e1b 100644
--- a/exampleSite/content/docs/advanced-customisation/index.zh-cn.md
+++ b/exampleSite/content/docs/advanced-customisation/index.zh-cn.md
@@ -125,7 +125,7 @@ html {
 
 ### 更换语法高亮主题
 
-Blowfish 使用自定义的语法高亮样式，颜色定义在 `assets/css/schemes` 中。要更换语法高亮主题，请创建 `assets/css/custom.css`，然后添加以下内容：
+要更换语法高亮主题，请创建 `assets/css/custom.css`，然后添加以下内容：
 
 ```css
 .chroma,