From 6e72c592a165b71162564b85449dc46abb12d7f9 Mon Sep 17 00:00:00 2001 From: Tyler Hallada Date: Sun, 24 Aug 2025 21:25:15 -0400 Subject: [PATCH] Fix dark mode: no more filter invert css The filter invert style was causing weird issues. Instead, I computed what the colors should be inverted 90% and set them absolutely instead. --- css/main_dark.css | 38 ++++--- css/syntax.css | 255 +++++++++++++++++++++++++++++++++----------- css/syntax_dark.css | 216 +++++++++++++++++++++++++++---------- 3 files changed, 374 insertions(+), 135 deletions(-) diff --git a/css/main_dark.css b/css/main_dark.css index 87645ff..34c90e9 100644 --- a/css/main_dark.css +++ b/css/main_dark.css @@ -1,37 +1,35 @@ /* Dark theme */ html { - filter: invert(90%); background-color: rgba(10, 10, 10, 0.9); } -img:not(.icon), video, div.video-container { - filter: invert(100%); +body { + background-color: #222222 !important; } -img:not(.icon) { - opacity: .90; - transition: opacity .5s ease-in-out; -} - -img:hover:not(.icon) { - opacity: 1; -} - -a:not(.card), a:hover:not(.card) { - filter: invert(100%); -} - -a:not(.card) img:not(.icon) { - filter: none; +.root { + color: #afafaf !important; } .card { - box-shadow: 0 1px 2px #fff !important; + box-shadow: 0 1px 2px #5e5e5e !important; + background-color: #1a1a1a !important; } .post pre { - background-color: #fff !important; + background-color: #271a26 !important; + border: 1px solid #354535 !important; +} + +.post code { + background-color: #271a26 !important; + border: 1px solid #354535 !important; +} + +.post pre code { + background-color: #271a26 !important; + border: none !important; } .post a code { diff --git a/css/syntax.css b/css/syntax.css index 2774b76..d0c9bad 100644 --- a/css/syntax.css +++ b/css/syntax.css @@ -1,60 +1,195 @@ -.highlight { background: #ffffff; } -.highlight .c { color: #999988; font-style: italic } /* Comment */ -.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ -.highlight .k { font-weight: bold } /* Keyword */ -.highlight .o { font-weight: bold } /* Operator */ -.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ -.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ -.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ -.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ -.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ -.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ -.highlight .ge { font-style: italic } /* Generic.Emph */ -.highlight .gr { color: #aa0000 } /* Generic.Error */ -.highlight .gh { color: #999999 } /* Generic.Heading */ -.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ -.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ -.highlight .go { color: #888888 } /* Generic.Output */ -.highlight .gp { color: #555555 } /* Generic.Prompt */ -.highlight .gs { font-weight: bold } /* Generic.Strong */ -.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ -.highlight .gt { color: #aa0000 } /* Generic.Traceback */ -.highlight .kc { font-weight: bold } /* Keyword.Constant */ -.highlight .kd { font-weight: bold } /* Keyword.Declaration */ -.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ -.highlight .kr { font-weight: bold } /* Keyword.Reserved */ -.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ -.highlight .m { color: #009999 } /* Literal.Number */ -.highlight .s { color: #d14 } /* Literal.String */ -.highlight .na { color: #008080 } /* Name.Attribute */ -.highlight .nb { color: #0086B3 } /* Name.Builtin */ -.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ -.highlight .no { color: #008080 } /* Name.Constant */ -.highlight .ni { color: #800080 } /* Name.Entity */ -.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ -.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ -.highlight .nn { color: #555555 } /* Name.Namespace */ -.highlight .nt { color: #000080 } /* Name.Tag */ -.highlight .nv { color: #008080 } /* Name.Variable */ -.highlight .ow { font-weight: bold } /* Operator.Word */ -.highlight .w { color: #bbbbbb } /* Text.Whitespace */ -.highlight .mf { color: #009999 } /* Literal.Number.Float */ -.highlight .mh { color: #009999 } /* Literal.Number.Hex */ -.highlight .mi { color: #009999 } /* Literal.Number.Integer */ -.highlight .mo { color: #009999 } /* Literal.Number.Oct */ -.highlight .sb { color: #d14 } /* Literal.String.Backtick */ -.highlight .sc { color: #d14 } /* Literal.String.Char */ -.highlight .sd { color: #d14 } /* Literal.String.Doc */ -.highlight .s2 { color: #d14 } /* Literal.String.Double */ -.highlight .se { color: #d14 } /* Literal.String.Escape */ -.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ -.highlight .si { color: #d14 } /* Literal.String.Interpol */ -.highlight .sx { color: #d14 } /* Literal.String.Other */ -.highlight .sr { color: #009926 } /* Literal.String.Regex */ -.highlight .s1 { color: #d14 } /* Literal.String.Single */ -.highlight .ss { color: #990073 } /* Literal.String.Symbol */ -.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ -.highlight .vc { color: #008080 } /* Name.Variable.Class */ -.highlight .vg { color: #008080 } /* Name.Variable.Global */ -.highlight .vi { color: #008080 } /* Name.Variable.Instance */ -.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ +.highlight { + background: #ffffff; +} +.highlight .c { + color: #999988; + font-style: italic; +} /* Comment */ +.highlight .err { + color: #a61717; + background-color: #e3d2d2; +} /* Error */ +.highlight .k { + font-weight: bold; +} /* Keyword */ +.highlight .o { + font-weight: bold; +} /* Operator */ +.highlight .cm { + color: #999988; + font-style: italic; +} /* Comment.Multiline */ +.highlight .cp { + color: #999999; + font-weight: bold; +} /* Comment.Preproc */ +.highlight .c1 { + color: #999988; + font-style: italic; +} /* Comment.Single */ +.highlight .cs { + color: #999999; + font-weight: bold; + font-style: italic; +} /* Comment.Special */ +.highlight .gd { + color: #000000; + background-color: #ffdddd; +} /* Generic.Deleted */ +.highlight .gd .x { + color: #000000; + background-color: #ffaaaa; +} /* Generic.Deleted.Specific */ +.highlight .ge { + font-style: italic; +} /* Generic.Emph */ +.highlight .gr { + color: #aa0000; +} /* Generic.Error */ +.highlight .gh { + color: #999999; +} /* Generic.Heading */ +.highlight .gi { + color: #000000; + background-color: #ddffdd; +} /* Generic.Inserted */ +.highlight .gi .x { + color: #000000; + background-color: #aaffaa; +} /* Generic.Inserted.Specific */ +.highlight .go { + color: #888888; +} /* Generic.Output */ +.highlight .gp { + color: #555555; +} /* Generic.Prompt */ +.highlight .gs { + font-weight: bold; +} /* Generic.Strong */ +.highlight .gu { + color: #aaaaaa; +} /* Generic.Subheading */ +.highlight .gt { + color: #aa0000; +} /* Generic.Traceback */ +.highlight .kc { + font-weight: bold; +} /* Keyword.Constant */ +.highlight .kd { + font-weight: bold; +} /* Keyword.Declaration */ +.highlight .kp { + font-weight: bold; +} /* Keyword.Pseudo */ +.highlight .kr { + font-weight: bold; +} /* Keyword.Reserved */ +.highlight .kt { + color: #445588; + font-weight: bold; +} /* Keyword.Type */ +.highlight .m { + color: #009999; +} /* Literal.Number */ +.highlight .s { + color: #d14; +} /* Literal.String */ +.highlight .na { + color: #008080; +} /* Name.Attribute */ +.highlight .nb { + color: #0086b3; +} /* Name.Builtin */ +.highlight .nc { + color: #445588; + font-weight: bold; +} /* Name.Class */ +.highlight .no { + color: #008080; +} /* Name.Constant */ +.highlight .ni { + color: #800080; +} /* Name.Entity */ +.highlight .ne { + color: #990000; + font-weight: bold; +} /* Name.Exception */ +.highlight .nf { + color: #990000; + font-weight: bold; +} /* Name.Function */ +.highlight .nn { + color: #555555; +} /* Name.Namespace */ +.highlight .nt { + color: #000080; +} /* Name.Tag */ +.highlight .nv { + color: #008080; +} /* Name.Variable */ +.highlight .ow { + font-weight: bold; +} /* Operator.Word */ +.highlight .w { + color: #bbbbbb; +} /* Text.Whitespace */ +.highlight .mf { + color: #009999; +} /* Literal.Number.Float */ +.highlight .mh { + color: #009999; +} /* Literal.Number.Hex */ +.highlight .mi { + color: #009999; +} /* Literal.Number.Integer */ +.highlight .mo { + color: #009999; +} /* Literal.Number.Oct */ +.highlight .sb { + color: #d14; +} /* Literal.String.Backtick */ +.highlight .sc { + color: #d14; +} /* Literal.String.Char */ +.highlight .sd { + color: #d14; +} /* Literal.String.Doc */ +.highlight .s2 { + color: #d14; +} /* Literal.String.Double */ +.highlight .se { + color: #d14; +} /* Literal.String.Escape */ +.highlight .sh { + color: #d14; +} /* Literal.String.Heredoc */ +.highlight .si { + color: #d14; +} /* Literal.String.Interpol */ +.highlight .sx { + color: #d14; +} /* Literal.String.Other */ +.highlight .sr { + color: #009926; +} /* Literal.String.Regex */ +.highlight .s1 { + color: #d14; +} /* Literal.String.Single */ +.highlight .ss { + color: #990073; +} /* Literal.String.Symbol */ +.highlight .bp { + color: #999999; +} /* Name.Builtin.Pseudo */ +.highlight .vc { + color: #008080; +} /* Name.Variable.Class */ +.highlight .vg { + color: #008080; +} /* Name.Variable.Global */ +.highlight .vi { + color: #008080; +} /* Name.Variable.Instance */ +.highlight .il { + color: #009999; +} /* Literal.Number.Integer.Long */ diff --git a/css/syntax_dark.css b/css/syntax_dark.css index 21bd002..04d311b 100644 --- a/css/syntax_dark.css +++ b/css/syntax_dark.css @@ -1,56 +1,162 @@ -.highlight code { - filter: invert(100%); - background-color: #000 !important; +.highlight { + background: #0f0908; + color: #e0ccae; } -.highlight { background: #0F0908; color: #E0CCAE; } -.highlight .c { color: #6B4035; } /* Comment */ -.highlight .err { color: #F2DDBC; background-color: #66292F } /* Error */ -.highlight .o { color: #A67458 } /* Operator */ -.highlight .cm { color: #6B4035; } /* Comment.Multiline */ -.highlight .cp { color: #6B4035; } /* Comment.Preproc */ -.highlight .c1 { color: #6B4035; } /* Comment.Single */ -.highlight .cs { color: #6B4035; } /* Comment.Special */ -.highlight .gd { color: #BF472C; background-color: #291916 } /* Generic.Deleted */ -.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ -.highlight .gr { color: #66292F } /* Generic.Error */ -.highlight .gh { color: #F2A766 } /* Generic.Heading */ -.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ -.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ -.highlight .go { color: #E0CCAE } /* Generic.Output */ -.highlight .gp { color: #8A4B53 } /* Generic.Prompt */ -.highlight .gu { color: #F2A766 } /* Generic.Subheading */ -.highlight .gt { color: #BF472C } /* Generic.Traceback */ -.highlight .kt { color: #BF472C } /* Keyword.Type */ -.highlight .m { color: #8A4B53 } /* Literal.Number */ -.highlight .s { color: #D47D49 } /* Literal.String */ -.highlight .na { color: #BF472C } /* Name.Attribute */ -.highlight .nb { color: #F2A766 } /* Name.Builtin */ -.highlight .nc { color: #445588 } /* Name.Class */ -.highlight .no { color: #F2DDBC } /* Name.Constant */ -.highlight .ni { color: #a4896f } /* Name.Entity */ -.highlight .ne { color: #990000 } /* Name.Exception */ -.highlight .nf { color: #BF472C } /* Name.Function */ -.highlight .nn { color: #BF472C } /* Name.Namespace */ -.highlight .nt { color: #F2A766 } /* Name.Tag */ -.highlight .nv { color: #A67458 } /* Name.Variable */ -.highlight .w { color: #bbbbbb } /* Text.Whitespace */ -.highlight .mf { color: #8A4B53 } /* Literal.Number.Float */ -.highlight .mh { color: #8A4B53 } /* Literal.Number.Hex */ -.highlight .mi { color: #8A4B53 } /* Literal.Number.Integer */ -.highlight .mo { color: #8A4B53 } /* Literal.Number.Oct */ -.highlight .sb { color: #D47D49 } /* Literal.String.Backtick */ -.highlight .sc { color: #D47D49 } /* Literal.String.Char */ -.highlight .sd { color: #D47D49 } /* Literal.String.Doc */ -.highlight .s2 { color: #D47D49 } /* Literal.String.Double */ -.highlight .se { color: #D47D49 } /* Literal.String.Escape */ -.highlight .sh { color: #D47D49 } /* Literal.String.Heredoc */ -.highlight .si { color: #D47D49 } /* Literal.String.Interpol */ -.highlight .sx { color: #D47D49 } /* Literal.String.Other */ -.highlight .sr { color: #D47D49 } /* Literal.String.Regex */ -.highlight .s1 { color: #D47D49 } /* Literal.String.Single */ -.highlight .ss { color: #D47D49 } /* Literal.String.Symbol */ -.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ -.highlight .vc { color: #A67458 } /* Name.Variable.Class */ -.highlight .vg { color: #A67458 } /* Name.Variable.Global */ -.highlight .vi { color: #A67458 } /* Name.Variable.Instance */ -.highlight .il { color: #8A4B53 } /* Literal.Number.Integer.Long */ +.highlight .c { + color: #6b4035; +} /* Comment */ +.highlight .err { + color: #f2ddbc; + background-color: #66292f; +} /* Error */ +.highlight .o { + color: #a67458; +} /* Operator */ +.highlight .cm { + color: #6b4035; +} /* Comment.Multiline */ +.highlight .cp { + color: #6b4035; +} /* Comment.Preproc */ +.highlight .c1 { + color: #6b4035; +} /* Comment.Single */ +.highlight .cs { + color: #6b4035; +} /* Comment.Special */ +.highlight .gd { + color: #bf472c; + background-color: #291916; +} /* Generic.Deleted */ +.highlight .gd .x { + color: #000000; + background-color: #ffaaaa; +} /* Generic.Deleted.Specific */ +.highlight .gr { + color: #66292f; +} /* Generic.Error */ +.highlight .gh { + color: #f2a766; +} /* Generic.Heading */ +.highlight .gi { + color: #000000; + background-color: #ddffdd; +} /* Generic.Inserted */ +.highlight .gi .x { + color: #000000; + background-color: #aaffaa; +} /* Generic.Inserted.Specific */ +.highlight .go { + color: #e0ccae; +} /* Generic.Output */ +.highlight .gp { + color: #8a4b53; +} /* Generic.Prompt */ +.highlight .gu { + color: #f2a766; +} /* Generic.Subheading */ +.highlight .gt { + color: #bf472c; +} /* Generic.Traceback */ +.highlight .kt { + color: #bf472c; +} /* Keyword.Type */ +.highlight .m { + color: #8a4b53; +} /* Literal.Number */ +.highlight .s { + color: #d47d49; +} /* Literal.String */ +.highlight .na { + color: #bf472c; +} /* Name.Attribute */ +.highlight .nb { + color: #f2a766; +} /* Name.Builtin */ +.highlight .nc { + color: #445588; +} /* Name.Class */ +.highlight .no { + color: #f2ddbc; +} /* Name.Constant */ +.highlight .ni { + color: #a4896f; +} /* Name.Entity */ +.highlight .ne { + color: #990000; +} /* Name.Exception */ +.highlight .nf { + color: #bf472c; +} /* Name.Function */ +.highlight .nn { + color: #bf472c; +} /* Name.Namespace */ +.highlight .nt { + color: #f2a766; +} /* Name.Tag */ +.highlight .nv { + color: #a67458; +} /* Name.Variable */ +.highlight .w { + color: #bbbbbb; +} /* Text.Whitespace */ +.highlight .mf { + color: #8a4b53; +} /* Literal.Number.Float */ +.highlight .mh { + color: #8a4b53; +} /* Literal.Number.Hex */ +.highlight .mi { + color: #8a4b53; +} /* Literal.Number.Integer */ +.highlight .mo { + color: #8a4b53; +} /* Literal.Number.Oct */ +.highlight .sb { + color: #d47d49; +} /* Literal.String.Backtick */ +.highlight .sc { + color: #d47d49; +} /* Literal.String.Char */ +.highlight .sd { + color: #d47d49; +} /* Literal.String.Doc */ +.highlight .s2 { + color: #d47d49; +} /* Literal.String.Double */ +.highlight .se { + color: #d47d49; +} /* Literal.String.Escape */ +.highlight .sh { + color: #d47d49; +} /* Literal.String.Heredoc */ +.highlight .si { + color: #d47d49; +} /* Literal.String.Interpol */ +.highlight .sx { + color: #d47d49; +} /* Literal.String.Other */ +.highlight .sr { + color: #d47d49; +} /* Literal.String.Regex */ +.highlight .s1 { + color: #d47d49; +} /* Literal.String.Single */ +.highlight .ss { + color: #d47d49; +} /* Literal.String.Symbol */ +.highlight .bp { + color: #999999; +} /* Name.Builtin.Pseudo */ +.highlight .vc { + color: #a67458; +} /* Name.Variable.Class */ +.highlight .vg { + color: #a67458; +} /* Name.Variable.Global */ +.highlight .vi { + color: #a67458; +} /* Name.Variable.Instance */ +.highlight .il { + color: #8a4b53; +} /* Literal.Number.Integer.Long */