A better dark mode/gist embed for Atega Hugo theme based on Atom One Dark/Light

_gist-override.scss

body .gist-file {
  border-color: var(--syntax-highlighting-background) !important;

  .gist-data {
    background-color: var(--syntax-highlighting-background) !important;
    border-bottom: none;

    table,
    tr,
    td {
      background-color: var(--syntax-highlighting-background);
      border: none;
    }
  }
}

/* Default (Light Mode) Variables */
:root {
  --gist-base: #fafafa;
  --gist-mono-1: #383a42;
  --gist-mono-2: #686b77;
  --gist-mono-3: #a0a1a7;
  --gist-hue-1: #0184bb;
  --gist-hue-2: #4078f2;
  --gist-hue-3: #a626a4;
  --gist-hue-4: #50a14f;
  --gist-hue-5: #e45649;
  --gist-hue-5-2: #c91243;
  --gist-hue-6: #986801;
  --gist-hue-6-2: #c18401;
  --gist-ii: #e0c184;
  --gist-iu: #e05151;
  --gist-ms1-bg: #373b41;
  --gist-mi1-bg: #020;
  --gist-mdhf-bg: #200;
  --gist-ii-color: #fff;
}

/* Dark Mode Variables */
.dark-mode {
  --gist-base: #282c34;
  --gist-mono-1: #abb2bf;
  --gist-mono-2: #818896;
  --gist-mono-3: #5c6370;
  --gist-hue-1: #56b6c2;
  --gist-hue-2: #61aeee;
  --gist-hue-3: #c678dd;
  --gist-hue-4: #98c379;
  --gist-hue-5: #e06c75;
  --gist-hue-5-2: #be5046;
  --gist-hue-6: #d19a66;
  --gist-hue-6-2: #e6c07b;
  --gist-ii: #e0c184;
  --gist-iu: #e05151;
  --gist-ms1-bg: #373b41;
  --gist-mi1-bg: #020;
  --gist-mdhf-bg: #200;
  --gist-ii-color: #fff;
  body .gist .gist-meta {
    color: #ffffff;
    background: #373737;
  }
  body .gist .gist-meta a {
    color: #ffffff;
  }
}

body .gist .blob-num,
body .gist .blob-code-inner,
body .gist .highlight,
body .gist .pl-enm,
body .gist .pl-ko,
body .gist .pl-mo,
body .gist .pl-mp1 .pl-sf,
body .gist .pl-ms,
body .gist .pl-pdc1,
body .gist .pl-scp,
body .gist .pl-smc,
body .gist .pl-som,
body .gist .pl-va,
body .gist .pl-vpf,
body .gist .pl-vpu,
body .gist .pl-mdr {
  color: var(--gist-mono-1);
}

body .gist .pl-mb,
body .gist .pl-pdb {
  font-weight: 700;
}

body .gist .pl-c,
body .gist .pl-c span,
body .gist .pl-pdc {
  color: var(--gist-mono-3);
  font-style: italic;
}

body .gist .pl-sr .pl-cce {
  color: var(--gist-hue-1);
  font-weight: 400;
}

body .gist .pl-ef,
body .gist .pl-en,
body .gist .pl-enf,
body .gist .pl-eoai,
body .gist .pl-kos,
body .gist .pl-mh .pl-pdh,
body .gist .pl-mr {
  color: var(--gist-hue-2);
}

body .gist .pl-ens,
body .gist .pl-vi {
  color: var(--gist-hue-5-2);
}

body .gist .pl-enti,
body .gist .pl-mai .pl-sf,
body .gist .pl-ml,
body .gist .pl-sf,
body .gist .pl-sr,
body .gist .pl-sr .pl-sra,
body .gist .pl-src,
body .gist .pl-st,
body .gist .pl-vo {
  color: var(--gist-hue-1);
}

body .gist .pl-eoi,
body .gist .pl-mri,
body .gist .pl-pds,
body .gist .pl-pse .pl-s1,
body .gist .pl-s,
body .gist .pl-s1 {
  color: var(--gist-hue-4);
}

body .gist .pl-k,
body .gist .pl-kolp,
body .gist .pl-mc,
body .gist .pl-pde {
  color: var(--gist-hue-3);
}

body .gist .pl-mi,
body .gist .pl-pdi {
  color: var(--gist-hue-3);
  font-style: italic;
}

body .gist .pl-mp,
body .gist .pl-stp {
  color: var(--gist-mono-2);
}

body .gist .pl-mdh,
body .gist .pl-mdi,
body .gist .pl-mdr {
  font-weight: 400;
}

body .gist .pl-mdht,
body .gist .pl-mi1 {
  color: var(--gist-hue-4);
  background: var(--gist-mi1-bg); // This color is not defined as a variable
}

body .gist .pl-md,
body .gist .pl-mdhf {
  color: var(--gist-hue-5);
  background: var(--gist-mdhf-bg); // This color is not defined as a variable
}

body .gist .pl-corl {
  color: var(--gist-hue-5);
  text-decoration: underline;
}

body .gist .pl-ib {
  background: var(--gist-hue-5);
}

body .gist .pl-ii {
  background: var(--gist-ii);
  color: var(--gist-ii-color);
}

body .gist .pl-iu {
  background: var(--gist-iu);
}

body .gist .pl-ms1 {
  color: var(--gist-mono-1);
  background: var(--gist-ms1-bg);
}

body .gist .pl-c1,
body .gist .pl-cn,
body .gist .pl-e,
body .gist .pl-eoa,
body .gist .pl-eoac,
body .gist .pl-eoac .pl-pde,
body .gist .pl-kou,
body .gist .pl-mm,
body .gist .pl-mp .pl-s3,
body .gist .pl-mq,
body .gist .pl-s3,
body .gist .pl-sok,
body .gist .pl-sv,
body .gist .pl-mb {
  color: var(--gist-hue-6);
}

body .gist .pl-enc,
body .gist .pl-entc,
body .gist .pl-pse .pl-s2,
body .gist .pl-s2,
body .gist .pl-sc,
body .gist .pl-smp,
body .gist .pl-sr .pl-sre,
body .gist .pl-stj,
body .gist .pl-v,
body .gist .pl-pdb {
  color: var(--gist-hue-6-2);
}

body .gist .pl-ent,
body .gist .pl-entl,
body .gist .pl-entm,
body .gist .pl-mh,
body .gist .pl-pdv,
body .gist .pl-smi,
body .gist .pl-sol,
body .gist .pl-mdh,
body .gist .pl-mdi {
  color: var(--gist-hue-5);
}

head.html

<!-- this replaces the embedded script in head.html when auto is set it will follow prefers-color-scheme -->
  <script>
    {{ if eq .Site.Params.color_scheme "auto" }}
      function updateThemeBasedOnPreference() {
        var theme = localStorage.getItem("theme");
        var userPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        if (theme === "dark" || (!theme && userPrefersDark)) {
          document.documentElement.setAttribute("dark", "");
          document.documentElement.classList.add('dark-mode');
        } else {
          document.documentElement.removeAttribute("dark");
          document.documentElement.classList.remove('dark-mode');
        }
      }
      updateThemeBasedOnPreference();
      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateThemeBasedOnPreference);
    {{ else if eq .Site.Params.color_scheme "light" }}
      document.documentElement.removeAttribute("dark");
      document.documentElement.classList.remove('dark-mode');
    {{ else if eq .Site.Params.color_scheme "dark" }}
      document.documentElement.setAttribute("dark", "");
      document.documentElement.classList.add('dark-mode');
    {{ else }}
      if (localStorage.getItem("theme") === "dark") {
        document.documentElement.setAttribute("dark", "");
        document.documentElement.classList.add('dark-mode');
      }
    {{ end }}
  </script>