diff --git a/web/styles/pygments.css b/web/styles/pygments.css
index c1baf3137b..e2860f2296 100644
--- a/web/styles/pygments.css
+++ b/web/styles/pygments.css
@@ -2,239 +2,240 @@
 
 /* Begin Pygments Default Colors */
 
-.codehilite .hll {
-    background-color: #ffc;
+%light-theme {
+    .codehilite .hll {
+        background-color: #ffc;
+    }
+
+    .codehilite .c {
+        color: #3d7b7b;
+        font-style: italic;
+    } /* Comment */
+    .codehilite .err {
+        border: 1px solid #f00;
+    } /* Error */
+    .codehilite .k {
+        color: #008000;
+        font-weight: bold;
+    } /* Keyword */
+    .codehilite .o {
+        color: #666;
+    } /* Operator */
+    .codehilite .ch {
+        color: #3d7b7b;
+        font-style: italic;
+    } /* Comment.Hashbang */
+    .codehilite .cm {
+        color: #3d7b7b;
+        font-style: italic;
+    } /* Comment.Multiline */
+    .codehilite .cp {
+        color: #9c6500;
+    } /* Comment.Preproc */
+    .codehilite .cpf {
+        color: #3d7b7b;
+        font-style: italic;
+    } /* Comment.PreprocFile */
+    .codehilite .c1 {
+        color: #3d7b7b;
+        font-style: italic;
+    } /* Comment.Single */
+    .codehilite .cs {
+        color: #3d7b7b;
+        font-style: italic;
+    } /* Comment.Special */
+    .codehilite .gd {
+        color: #a00000;
+    } /* Generic.Deleted */
+    .codehilite .ge {
+        font-style: italic;
+    } /* Generic.Emph */
+    .codehilite .ges {
+        font-weight: bold;
+        font-style: italic;
+    } /* Generic.EmphStrong */
+    .codehilite .gr {
+        color: #e40000;
+    } /* Generic.Error */
+    .codehilite .gh {
+        color: #000080;
+        font-weight: bold;
+    } /* Generic.Heading */
+    .codehilite .gi {
+        color: #008400;
+    } /* Generic.Inserted */
+    .codehilite .go {
+        color: #717171;
+    } /* Generic.Output */
+    .codehilite .gp {
+        color: #000080;
+        font-weight: bold;
+    } /* Generic.Prompt */
+    .codehilite .gs {
+        font-weight: bold;
+    } /* Generic.Strong */
+    .codehilite .gu {
+        color: #800080;
+        font-weight: bold;
+    } /* Generic.Subheading */
+    .codehilite .gt {
+        color: #04d;
+    } /* Generic.Traceback */
+    .codehilite .kc {
+        color: #008000;
+        font-weight: bold;
+    } /* Keyword.Constant */
+    .codehilite .kd {
+        color: #008000;
+        font-weight: bold;
+    } /* Keyword.Declaration */
+    .codehilite .kn {
+        color: #008000;
+        font-weight: bold;
+    } /* Keyword.Namespace */
+    .codehilite .kp {
+        color: #008000;
+    } /* Keyword.Pseudo */
+    .codehilite .kr {
+        color: #008000;
+        font-weight: bold;
+    } /* Keyword.Reserved */
+    .codehilite .kt {
+        color: #b00040;
+    } /* Keyword.Type */
+    .codehilite .m {
+        color: #666;
+    } /* Literal.Number */
+    .codehilite .s {
+        color: #ba2121;
+    } /* Literal.String */
+    .codehilite .na {
+        color: #687822;
+    } /* Name.Attribute */
+    .codehilite .nb {
+        color: #008000;
+    } /* Name.Builtin */
+    .codehilite .nc {
+        color: #00f;
+        font-weight: bold;
+    } /* Name.Class */
+    .codehilite .no {
+        color: #800;
+    } /* Name.Constant */
+    .codehilite .nd {
+        color: #a2f;
+    } /* Name.Decorator */
+    .codehilite .ni {
+        color: #717171;
+        font-weight: bold;
+    } /* Name.Entity */
+    .codehilite .ne {
+        color: #cb3f38;
+        font-weight: bold;
+    } /* Name.Exception */
+    .codehilite .nf {
+        color: #00f;
+    } /* Name.Function */
+    .codehilite .nl {
+        color: #767600;
+    } /* Name.Label */
+    .codehilite .nn {
+        color: #00f;
+        font-weight: bold;
+    } /* Name.Namespace */
+    .codehilite .nt {
+        color: #008000;
+        font-weight: bold;
+    } /* Name.Tag */
+    .codehilite .nv {
+        color: #19177c;
+    } /* Name.Variable */
+    .codehilite .ow {
+        color: #a2f;
+        font-weight: bold;
+    } /* Operator.Word */
+    .codehilite .w {
+        color: #bbb;
+    } /* Text.Whitespace */
+    .codehilite .mb {
+        color: #666;
+    } /* Literal.Number.Bin */
+    .codehilite .mf {
+        color: #666;
+    } /* Literal.Number.Float */
+    .codehilite .mh {
+        color: #666;
+    } /* Literal.Number.Hex */
+    .codehilite .mi {
+        color: #666;
+    } /* Literal.Number.Integer */
+    .codehilite .mo {
+        color: #666;
+    } /* Literal.Number.Oct */
+    .codehilite .sa {
+        color: #ba2121;
+    } /* Literal.String.Affix */
+    .codehilite .sb {
+        color: #ba2121;
+    } /* Literal.String.Backtick */
+    .codehilite .sc {
+        color: #ba2121;
+    } /* Literal.String.Char */
+    .codehilite .dl {
+        color: #ba2121;
+    } /* Literal.String.Delimiter */
+    .codehilite .sd {
+        color: #ba2121;
+        font-style: italic;
+    } /* Literal.String.Doc */
+    .codehilite .s2 {
+        color: #ba2121;
+    } /* Literal.String.Double */
+    .codehilite .se {
+        color: #aa5d1f;
+        font-weight: bold;
+    } /* Literal.String.Escape */
+    .codehilite .sh {
+        color: #ba2121;
+    } /* Literal.String.Heredoc */
+    .codehilite .si {
+        color: #a45a77;
+        font-weight: bold;
+    } /* Literal.String.Interpol */
+    .codehilite .sx {
+        color: #008000;
+    } /* Literal.String.Other */
+    .codehilite .sr {
+        color: #a45a77;
+    } /* Literal.String.Regex */
+    .codehilite .s1 {
+        color: #ba2121;
+    } /* Literal.String.Single */
+    .codehilite .ss {
+        color: #19177c;
+    } /* Literal.String.Symbol */
+    .codehilite .bp {
+        color: #008000;
+    } /* Name.Builtin.Pseudo */
+    .codehilite .fm {
+        color: #00f;
+    } /* Name.Function.Magic */
+    .codehilite .vc {
+        color: #19177c;
+    } /* Name.Variable.Class */
+    .codehilite .vg {
+        color: #19177c;
+    } /* Name.Variable.Global */
+    .codehilite .vi {
+        color: #19177c;
+    } /* Name.Variable.Instance */
+    .codehilite .vm {
+        color: #19177c;
+    } /* Name.Variable.Magic */
+    .codehilite .il {
+        color: #666;
+    } /* Literal.Number.Integer.Long */
 }
-
-.codehilite .c {
-    color: #3d7b7b;
-    font-style: italic;
-} /* Comment */
-.codehilite .err {
-    border: 1px solid #f00;
-} /* Error */
-.codehilite .k {
-    color: #008000;
-    font-weight: bold;
-} /* Keyword */
-.codehilite .o {
-    color: #666;
-} /* Operator */
-.codehilite .ch {
-    color: #3d7b7b;
-    font-style: italic;
-} /* Comment.Hashbang */
-.codehilite .cm {
-    color: #3d7b7b;
-    font-style: italic;
-} /* Comment.Multiline */
-.codehilite .cp {
-    color: #9c6500;
-} /* Comment.Preproc */
-.codehilite .cpf {
-    color: #3d7b7b;
-    font-style: italic;
-} /* Comment.PreprocFile */
-.codehilite .c1 {
-    color: #3d7b7b;
-    font-style: italic;
-} /* Comment.Single */
-.codehilite .cs {
-    color: #3d7b7b;
-    font-style: italic;
-} /* Comment.Special */
-.codehilite .gd {
-    color: #a00000;
-} /* Generic.Deleted */
-.codehilite .ge {
-    font-style: italic;
-} /* Generic.Emph */
-.codehilite .ges {
-    font-weight: bold;
-    font-style: italic;
-} /* Generic.EmphStrong */
-.codehilite .gr {
-    color: #e40000;
-} /* Generic.Error */
-.codehilite .gh {
-    color: #000080;
-    font-weight: bold;
-} /* Generic.Heading */
-.codehilite .gi {
-    color: #008400;
-} /* Generic.Inserted */
-.codehilite .go {
-    color: #717171;
-} /* Generic.Output */
-.codehilite .gp {
-    color: #000080;
-    font-weight: bold;
-} /* Generic.Prompt */
-.codehilite .gs {
-    font-weight: bold;
-} /* Generic.Strong */
-.codehilite .gu {
-    color: #800080;
-    font-weight: bold;
-} /* Generic.Subheading */
-.codehilite .gt {
-    color: #04d;
-} /* Generic.Traceback */
-.codehilite .kc {
-    color: #008000;
-    font-weight: bold;
-} /* Keyword.Constant */
-.codehilite .kd {
-    color: #008000;
-    font-weight: bold;
-} /* Keyword.Declaration */
-.codehilite .kn {
-    color: #008000;
-    font-weight: bold;
-} /* Keyword.Namespace */
-.codehilite .kp {
-    color: #008000;
-} /* Keyword.Pseudo */
-.codehilite .kr {
-    color: #008000;
-    font-weight: bold;
-} /* Keyword.Reserved */
-.codehilite .kt {
-    color: #b00040;
-} /* Keyword.Type */
-.codehilite .m {
-    color: #666;
-} /* Literal.Number */
-.codehilite .s {
-    color: #ba2121;
-} /* Literal.String */
-.codehilite .na {
-    color: #687822;
-} /* Name.Attribute */
-.codehilite .nb {
-    color: #008000;
-} /* Name.Builtin */
-.codehilite .nc {
-    color: #00f;
-    font-weight: bold;
-} /* Name.Class */
-.codehilite .no {
-    color: #800;
-} /* Name.Constant */
-.codehilite .nd {
-    color: #a2f;
-} /* Name.Decorator */
-.codehilite .ni {
-    color: #717171;
-    font-weight: bold;
-} /* Name.Entity */
-.codehilite .ne {
-    color: #cb3f38;
-    font-weight: bold;
-} /* Name.Exception */
-.codehilite .nf {
-    color: #00f;
-} /* Name.Function */
-.codehilite .nl {
-    color: #767600;
-} /* Name.Label */
-.codehilite .nn {
-    color: #00f;
-    font-weight: bold;
-} /* Name.Namespace */
-.codehilite .nt {
-    color: #008000;
-    font-weight: bold;
-} /* Name.Tag */
-.codehilite .nv {
-    color: #19177c;
-} /* Name.Variable */
-.codehilite .ow {
-    color: #a2f;
-    font-weight: bold;
-} /* Operator.Word */
-.codehilite .w {
-    color: #bbb;
-} /* Text.Whitespace */
-.codehilite .mb {
-    color: #666;
-} /* Literal.Number.Bin */
-.codehilite .mf {
-    color: #666;
-} /* Literal.Number.Float */
-.codehilite .mh {
-    color: #666;
-} /* Literal.Number.Hex */
-.codehilite .mi {
-    color: #666;
-} /* Literal.Number.Integer */
-.codehilite .mo {
-    color: #666;
-} /* Literal.Number.Oct */
-.codehilite .sa {
-    color: #ba2121;
-} /* Literal.String.Affix */
-.codehilite .sb {
-    color: #ba2121;
-} /* Literal.String.Backtick */
-.codehilite .sc {
-    color: #ba2121;
-} /* Literal.String.Char */
-.codehilite .dl {
-    color: #ba2121;
-} /* Literal.String.Delimiter */
-.codehilite .sd {
-    color: #ba2121;
-    font-style: italic;
-} /* Literal.String.Doc */
-.codehilite .s2 {
-    color: #ba2121;
-} /* Literal.String.Double */
-.codehilite .se {
-    color: #aa5d1f;
-    font-weight: bold;
-} /* Literal.String.Escape */
-.codehilite .sh {
-    color: #ba2121;
-} /* Literal.String.Heredoc */
-.codehilite .si {
-    color: #a45a77;
-    font-weight: bold;
-} /* Literal.String.Interpol */
-.codehilite .sx {
-    color: #008000;
-} /* Literal.String.Other */
-.codehilite .sr {
-    color: #a45a77;
-} /* Literal.String.Regex */
-.codehilite .s1 {
-    color: #ba2121;
-} /* Literal.String.Single */
-.codehilite .ss {
-    color: #19177c;
-} /* Literal.String.Symbol */
-.codehilite .bp {
-    color: #008000;
-} /* Name.Builtin.Pseudo */
-.codehilite .fm {
-    color: #00f;
-} /* Name.Function.Magic */
-.codehilite .vc {
-    color: #19177c;
-} /* Name.Variable.Class */
-.codehilite .vg {
-    color: #19177c;
-} /* Name.Variable.Global */
-.codehilite .vi {
-    color: #19177c;
-} /* Name.Variable.Instance */
-.codehilite .vm {
-    color: #19177c;
-} /* Name.Variable.Magic */
-.codehilite .il {
-    color: #666;
-} /* Literal.Number.Integer.Long */
-
 /* End Pygments Default Colors */
 
 %dark-theme {
@@ -486,6 +487,22 @@
 }
 /* stylelint-enable color-no-hex, no-duplicate-selectors */
 
+@media screen {
+    :root:not(.color-scheme-automatic, .dark-theme) {
+        @extend %light-theme;
+    }
+}
+
+@media screen and (not (prefers-color-scheme: dark)) {
+    :root.color-scheme-automatic {
+        @extend %light-theme;
+    }
+}
+
+@media not screen {
+    @extend %light-theme;
+}
+
 @media screen {
     :root.dark-theme {
         @extend %dark-theme;