thallada/thallada.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix dark mode: no more filter invert css

Browse Source 
The filter invert style was causing weird issues. Instead, I computed
what the colors should be inverted 90% and set them absolutely instead.
This commit is contained in:
Tyler Hallada
2025-08-24 21:25:15 -04:00
parent e1968ea90f
commit 6e72c592a1
3 changed files with 374 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
css/main_dark.css
View File

@@ -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 {

255
css/syntax.css
View File

@@ -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 */

216
css/syntax_dark.css
View File

@@ -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 */