From add6e71177402eb246ab693fb1e66b824be24168 Mon Sep 17 00:00:00 2001 From: tastytea Date: Tue, 20 Jul 2021 14:37:19 +0200 Subject: [PATCH] Add light theme. --- assets/blog.css | 52 ++++++++++++++++++++----- layouts/partials/extra_head.html | 2 - static/perldoc.css | 66 ++++++++++++++++++++++++++++++++ 3 files changed, 108 insertions(+), 12 deletions(-) delete mode 100644 layouts/partials/extra_head.html create mode 100644 static/perldoc.css diff --git a/assets/blog.css b/assets/blog.css index 0bd0c71..777ce7c 100644 --- a/assets/blog.css +++ b/assets/blog.css @@ -1,3 +1,6 @@ +@import url("monokai.css") screen and (prefers-color-scheme: dark); +@import url("perldoc.css") (prefers-color-scheme: light), print; + :root { --bg: #1d1f21; @@ -12,11 +15,40 @@ --link-hover: MediumAquamarine; --link-visited: Plum; + --fg-note: LimeGreen; + --fg-tip: CornflowerBlue; + --fg-important: Gold; + --fg-caution: Orange; + --fg-warning: OrangeRed; + --font-serif: "Source Serif Pro", serif; --font-sans-serif: "Source Sans Pro", sans-serif; --font-mono: "Source Code Pro", monospace; } +@media (prefers-color-scheme: light), print { + :root + { + --bg: LightGray; + --bg-code: #eeeedd; /* From perldoc.css */ + --bg-code-trans: #aaaa; + --bg-hover: Gainsboro; + --sel: Gray; + --bg-dark: #cdcdcd; + --fg: #1d1f21; + --fg-dim: Gray; + --link: MediumBlue; + --link-hover: ForestGreen; + --link-visited: MediumVioletRed; + + --fg-note: LimeGreen; + --fg-tip: CornflowerBlue; + --fg-important: Chocolate; + --fg-caution: Tomato; + --fg-warning: Red; + } +} + html { background-color: var(--bg); @@ -156,52 +188,52 @@ div.admonitionblock table div.note td.icon { - color: LimeGreen; + color: var(--fg-note); } div.note table { - box-shadow: 0 0 0.1em 0 LimeGreen; + box-shadow: 0 0 0.1em 0 var(--fg-note); } div.tip td.icon { - color: CornflowerBlue; + color: var(--fg-tip); } div.tip table { - box-shadow: 0 0 0.1em 0 CornflowerBlue; + box-shadow: 0 0 0.1em 0 var(--fg-tip); } div.important td.icon { - color: Gold; + color: var(--fg-important); } div.important table { - box-shadow: 0 0 0.1em 0 Gold; + box-shadow: 0 0 0.1em 0 var(--fg-important); } div.caution td.icon { - color: Orange; + color: var(--fg-caution); } div.caution table { - box-shadow: 0 0 0.1em 0 Orange; + box-shadow: 0 0 0.1em 0 var(--fg-caution); } div.warning td.icon { - color: OrangeRed; + color: var(--fg-warning); } div.warning table { - box-shadow: 0 0 0.1em 0 OrangeRed; + box-shadow: 0 0 0.1em 0 var(--fg-warning); } /* Overwrite background color for highlighted sections. */ diff --git a/layouts/partials/extra_head.html b/layouts/partials/extra_head.html deleted file mode 100644 index e9395b7..0000000 --- a/layouts/partials/extra_head.html +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/static/perldoc.css b/static/perldoc.css new file mode 100644 index 0000000..50ad111 --- /dev/null +++ b/static/perldoc.css @@ -0,0 +1,66 @@ +.highlight .tok-hll { background-color: #ffffcc } +.highlight { background: #eeeedd; } +.highlight .tok-c { color: #228B22 } /* Comment */ +.highlight .tok-err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.highlight .tok-k { color: #8B008B; font-weight: bold } /* Keyword */ +.highlight .tok-ch { color: #228B22 } /* Comment.Hashbang */ +.highlight .tok-cm { color: #228B22 } /* Comment.Multiline */ +.highlight .tok-cp { color: #1e889b } /* Comment.Preproc */ +.highlight .tok-cpf { color: #228B22 } /* Comment.PreprocFile */ +.highlight .tok-c1 { color: #228B22 } /* Comment.Single */ +.highlight .tok-cs { color: #8B008B; font-weight: bold } /* Comment.Special */ +.highlight .tok-gd { color: #aa0000 } /* Generic.Deleted */ +.highlight .tok-ge { font-style: italic } /* Generic.Emph */ +.highlight .tok-gr { color: #aa0000 } /* Generic.Error */ +.highlight .tok-gh { color: #000080; font-weight: bold } /* Generic.Heading */ +.highlight .tok-gi { color: #00aa00 } /* Generic.Inserted */ +.highlight .tok-go { color: #888888 } /* Generic.Output */ +.highlight .tok-gp { color: #555555 } /* Generic.Prompt */ +.highlight .tok-gs { font-weight: bold } /* Generic.Strong */ +.highlight .tok-gu { color: #800080; font-weight: bold } /* Generic.Subheading */ +.highlight .tok-gt { color: #aa0000 } /* Generic.Traceback */ +.highlight .tok-kc { color: #8B008B; font-weight: bold } /* Keyword.Constant */ +.highlight .tok-kd { color: #8B008B; font-weight: bold } /* Keyword.Declaration */ +.highlight .tok-kn { color: #8B008B; font-weight: bold } /* Keyword.Namespace */ +.highlight .tok-kp { color: #8B008B; font-weight: bold } /* Keyword.Pseudo */ +.highlight .tok-kr { color: #8B008B; font-weight: bold } /* Keyword.Reserved */ +.highlight .tok-kt { color: #00688B; font-weight: bold } /* Keyword.Type */ +.highlight .tok-m { color: #B452CD } /* Literal.Number */ +.highlight .tok-s { color: #CD5555 } /* Literal.String */ +.highlight .tok-na { color: #658b00 } /* Name.Attribute */ +.highlight .tok-nb { color: #658b00 } /* Name.Builtin */ +.highlight .tok-nc { color: #008b45; font-weight: bold } /* Name.Class */ +.highlight .tok-no { color: #00688B } /* Name.Constant */ +.highlight .tok-nd { color: #707a7c } /* Name.Decorator */ +.highlight .tok-ne { color: #008b45; font-weight: bold } /* Name.Exception */ +.highlight .tok-nf { color: #008b45 } /* Name.Function */ +.highlight .tok-nn { color: #008b45; text-decoration: underline } /* Name.Namespace */ +.highlight .tok-nt { color: #8B008B; font-weight: bold } /* Name.Tag */ +.highlight .tok-nv { color: #00688B } /* Name.Variable */ +.highlight .tok-ow { color: #8B008B } /* Operator.Word */ +.highlight .tok-w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .tok-mb { color: #B452CD } /* Literal.Number.Bin */ +.highlight .tok-mf { color: #B452CD } /* Literal.Number.Float */ +.highlight .tok-mh { color: #B452CD } /* Literal.Number.Hex */ +.highlight .tok-mi { color: #B452CD } /* Literal.Number.Integer */ +.highlight .tok-mo { color: #B452CD } /* Literal.Number.Oct */ +.highlight .tok-sa { color: #CD5555 } /* Literal.String.Affix */ +.highlight .tok-sb { color: #CD5555 } /* Literal.String.Backtick */ +.highlight .tok-sc { color: #CD5555 } /* Literal.String.Char */ +.highlight .tok-dl { color: #CD5555 } /* Literal.String.Delimiter */ +.highlight .tok-sd { color: #CD5555 } /* Literal.String.Doc */ +.highlight .tok-s2 { color: #CD5555 } /* Literal.String.Double */ +.highlight .tok-se { color: #CD5555 } /* Literal.String.Escape */ +.highlight .tok-sh { color: #1c7e71; font-style: italic } /* Literal.String.Heredoc */ +.highlight .tok-si { color: #CD5555 } /* Literal.String.Interpol */ +.highlight .tok-sx { color: #cb6c20 } /* Literal.String.Other */ +.highlight .tok-sr { color: #1c7e71 } /* Literal.String.Regex */ +.highlight .tok-s1 { color: #CD5555 } /* Literal.String.Single */ +.highlight .tok-ss { color: #CD5555 } /* Literal.String.Symbol */ +.highlight .tok-bp { color: #658b00 } /* Name.Builtin.Pseudo */ +.highlight .tok-fm { color: #008b45 } /* Name.Function.Magic */ +.highlight .tok-vc { color: #00688B } /* Name.Variable.Class */ +.highlight .tok-vg { color: #00688B } /* Name.Variable.Global */ +.highlight .tok-vi { color: #00688B } /* Name.Variable.Instance */ +.highlight .tok-vm { color: #00688B } /* Name.Variable.Magic */ +.highlight .tok-il { color: #B452CD } /* Literal.Number.Integer.Long */