From ede327daa5721ad696c6844b886077a60d801d53 Mon Sep 17 00:00:00 2001 From: vanten-s Date: Mon, 22 Jul 2024 23:27:23 +0200 Subject: [PATCH] Added light mode --- themes/vanten/assets/css/latte.css | 279 +++++++++++++++++++ themes/vanten/assets/css/main.css | 36 ++- themes/vanten/layouts/partials/head/css.html | 10 + 3 files changed, 317 insertions(+), 8 deletions(-) create mode 100644 themes/vanten/assets/css/latte.css diff --git a/themes/vanten/assets/css/latte.css b/themes/vanten/assets/css/latte.css new file mode 100644 index 0000000..8f548bd --- /dev/null +++ b/themes/vanten/assets/css/latte.css @@ -0,0 +1,279 @@ +@media (prefers-color-scheme: light) { +.chroma { + color: #4c4f69; + background-color: #eff1f5; +} +.chroma .cl { + color: #4c4f69; +} +.chroma .err { + color: #d20f39; +} +.chroma .x { + color: #4c4f69; +} +.chroma .lntd { + border: 0; + margin: 0; + padding: 0; + vertical-align: top; +} +.chroma .lntable { + width: auto; + border: 0; + margin: 0; + display: block; + padding: 0; + overflow: auto; + border-spacing: 0; +} +.chroma .hl { + width: 100%; + display: block; + background-color: #bcc0cc; +} +.chroma .lnt { + color: #8c8fa1; + padding: 0 0.4em 0 0.4em; + font-size: 0.875rem; + margin-right: 0.4em; +} +.chroma .ln { + color: #8c8fa1; + padding: 0 0.4em 0 0.4em; + margin-right: 0.4em; +} +.chroma .k { + color: #8839ef; +} +.chroma .kr { + color: #8839ef; +} +.chroma .kp { + color: #8839ef; +} +.chroma .kc { + color: #fe640b; +} +.chroma .kd { + color: #d20f39; +} +.chroma .kn { + color: #179299; +} +.chroma .kt { + color: #d20f39; +} +.chroma .n { + color: #4c4f69; +} +.chroma .nc { + color: #df8e1d; +} +.chroma .no { + color: #df8e1d; +} +.chroma .nd { + color: #1e66f5; + font-weight: bold; +} +.chroma .ni { + color: #179299; +} +.chroma .ne { + color: #fe640b; +} +.chroma .nf { + color: #1e66f5; +} +.chroma .fm { + color: #1e66f5; +} +.chroma .nl { + color: #04a5e5; +} +.chroma .nn { + color: #fe640b; +} +.chroma .py { + color: #fe640b; +} +.chroma .nt { + color: #8839ef; +} +.chroma .nv { + color: #dc8a78; +} +.chroma .vc { + color: #dc8a78; +} +.chroma .vg { + color: #dc8a78; +} +.chroma .vi { + color: #dc8a78; +} +.chroma .vm { + color: #dc8a78; +} +.chroma .na { + color: #1e66f5; +} +.chroma .nb { + color: #04a5e5; +} +.chroma .bp { + color: #04a5e5; +} +.chroma .nx { + color: #4c4f69; +} +.chroma .l { + color: #4c4f69; +} +.chroma .ld { + color: #4c4f69; +} +.chroma .s { + color: #40a02b; +} +.chroma .sc { + color: #40a02b; +} +.chroma .s1 { + color: #40a02b; +} +.chroma .s2 { + color: #40a02b; +} +.chroma .sb { + color: #40a02b; +} +.chroma .sx { + color: #40a02b; +} +.chroma .ss { + color: #40a02b; +} +.chroma .si { + color: #40a02b; +} +.chroma .sa { + color: #d20f39; +} +.chroma .dl { + color: #1e66f5; +} +.chroma .se { + color: #1e66f5; +} +.chroma .sr { + color: #179299; +} +.chroma .sd { + color: #9ca0b0; +} +.chroma .sh { + color: #9ca0b0; +} +.chroma .m { + color: #fe640b; +} +.chroma .mb { + color: #fe640b; +} +.chroma .mh { + color: #fe640b; +} +.chroma .mi { + color: #fe640b; +} +.chroma .mf { + color: #fe640b; +} +.chroma .il { + color: #fe640b; +} +.chroma .mo { + color: #fe640b; +} +.chroma .o { + color: #04a5e5; + font-weight: bold; +} +.chroma .ow { + color: #04a5e5; + font-weight: bold; +} +.chroma .c { + color: #9ca0b0; + font-style: italic; +} +.chroma .c1 { + color: #9ca0b0; + font-style: italic; +} +.chroma .cm { + color: #9ca0b0; + font-style: italic; +} +.chroma .cs { + color: #9ca0b0; + font-style: italic; +} +.chroma .ch { + color: #acb0be; + font-style: italic; +} +.chroma .cp { + color: #9ca0b0; + font-style: italic; +} +.chroma .cpf { + color: #9ca0b0; + font-weight: bold; +} +.chroma .g { + color: #4c4f69; +} +.chroma .gi { + color: #40a02b; + background-color: #ccd0da; +} +.chroma .gd { + color: #d20f39; + background-color: #ccd0da; +} +.chroma .ge { + color: #4c4f69; + font-style: italic; +} +.chroma .gs { + color: #4c4f69; + font-weight: bold; +} +.chroma .gl { + color: #4c4f69; + text-decoration: underline; +} +.chroma .gh { + color: #fe640b; + font-weight: bold; +} +.chroma .gu { + color: #fe640b; + font-weight: bold; +} +.chroma .go { + color: #4c4f69; +} +.chroma .gp { + color: #4c4f69; +} +.chroma .gr { + color: #d20f39; +} +.chroma .gt { + color: #d20f39; +} +} diff --git a/themes/vanten/assets/css/main.css b/themes/vanten/assets/css/main.css index d720058..5cdbc6d 100644 --- a/themes/vanten/assets/css/main.css +++ b/themes/vanten/assets/css/main.css @@ -1,6 +1,26 @@ +:root { + --bg: #181825; + --navbar: #1e1e2e; + --text: #cdd6f4; + --link: #94e2d5; + --link-highligt: #fff; + --border: #222; +} + +@media (prefers-color-scheme: light) { + :root { + --bg: #e6e9ef; + --navbar: #eff1f5; + --text: #4c4f69; + --link: #179299; + --link-highligt: #000; + --border: #eff1f5; + } +} + body { - color: #cdd6f4; - background-color: #181825; + color: var(--text); + background-color: var(--bg); font-family: monospace; font-size: 1.2em; line-height: 1.5; @@ -10,17 +30,17 @@ body { } header { - border-bottom: 1px solid #222; + border-bottom: 1px solid var(--border); margin-bottom: 1rem; } footer { - border-top: 1px solid #222; + border-top: 1px solid var(--border); margin-top: 1rem; } a { - color: #94e2d5; + color: var(--link); text-decoration: none; } @@ -28,7 +48,7 @@ a { position: fixed; right: 0; top: 0; - background-color: #1e1e2e; + background-color: var(--navbar); bottom: 0; width: 5.5em; } @@ -44,10 +64,10 @@ a { } .navbar > ul > li > a:hover { - color: #ffffff; + color: var(--link-highligt); } .separator { - border-top: 1px solid #222; + border-top: 1px solid var(--border); margin-top: 1rem; } diff --git a/themes/vanten/layouts/partials/head/css.html b/themes/vanten/layouts/partials/head/css.html index 583dc15..8a9758f 100644 --- a/themes/vanten/layouts/partials/head/css.html +++ b/themes/vanten/layouts/partials/head/css.html @@ -18,3 +18,13 @@ {{- end }} {{- end }} +{{- with resources.Get "css/latte.css" }} + {{- if eq hugo.Environment "development" }} + + {{- else }} + {{- with . | minify | fingerprint }} + + {{- end }} + {{- end }} +{{- end }} +