diff options
author | Smitty <me@smitop.com> | 2021-10-14T16·52-0400 |
---|---|---|
committer | smitop <me@smitop.com> | 2021-10-20T19·52+0000 |
commit | 4ea7fc392a562fac2158973191ad626baca16644 (patch) | |
tree | d9d7de365aebd07b87f41122562d00a55916eb06 /web/panettone | |
parent | 263260bbdf04ba595f993dbb19d9c66452f36d64 (diff) |
feat(web/panettone): support dark mode r/2984
When the system is set to dark mode, this is detected through prefers-color-scheme and the color scheme is adjusted accordingly. This fixes #18. The colors are set using CSS variables on the body that are overrridden based on the current color scheme. Change-Id: Id2f95dee4d6968e1b62ce37534f623e489fabde4 Reviewed-on: https://cl.tvl.fyi/c/depot/+/3722 Tested-by: BuildkiteCI Reviewed-by: grfn <grfn@gws.fyi> Reviewed-by: sterni <sternenseemann@systemli.org>
Diffstat (limited to 'web/panettone')
-rw-r--r-- | web/panettone/src/css.lisp | 86 |
1 files changed, 41 insertions, 45 deletions
diff --git a/web/panettone/src/css.lisp b/web/panettone/src/css.lisp index 0919cc62f602..aa753cb50fc5 100644 --- a/web/panettone/src/css.lisp +++ b/web/panettone/src/css.lisp @@ -1,33 +1,9 @@ (in-package :panettone.css) (declaim (optimize (safety 3))) -(defparameter color/black - "rgb(24, 24, 24)") - -(defparameter color/light-gray - "#EEE") - -(defparameter color/gray - "#8D8D8D") - -(defparameter color/primary - "rgb(106, 154, 255)") - -(defparameter color/primary-light - "rgb(150, 166, 200)") - -(defparameter color/success - "rgb(168, 249, 166)") - -(defparameter color/success-2 - "rgb(168, 249, 166)") - -(defparameter color/failure - "rgb(247, 167, 167)") - (defun button (selector) `((,selector - :background-color ,color/success + :background-color "var(--success)" :padding "0.5rem" :text-decoration "none" :transition "box-shadow" "0.15s" "ease-in-out") @@ -42,7 +18,7 @@ (defparameter markdown-styles `((blockquote - :border-left "5px" "solid" ,color/light-gray + :border-left "5px" "solid" "var(--light)"-gray :padding-left "1rem" :margin-left "0rem") (pre @@ -60,7 +36,7 @@ :padding-bottom "1rem") ((li + li) - :border-top "1px" "solid" ,color/gray) + :border-top "1px" "solid" "var(--gray)") (a :text-decoration "none" @@ -70,20 +46,20 @@ :outline "none" (.issue-subject - :color ,color/primary))) + :color "var(--primary)"))) (.comment-count - :color ,color/gray))) + :color "var(--gray)"))) (defparameter issue-history-styles `((.issue-history :list-style "none" - :border-top "1px" "solid" ,color/gray + :border-top "1px" "solid" "var(--gray)" :padding-top "1rem" :padding-left "2rem" (.comment-info - :color ,color/gray + :color "var(--gray)" :margin 0 :padding-top "1rem" @@ -94,16 +70,16 @@ ((:or .comment .event) :padding-top "1rem" :padding-bottom "1rem" - :border-bottom "1px" "solid" ,color/gray + :border-bottom "1px" "solid" "var(--gray)" (p :margin 0)) ((:and (:or .comment .event) :target) - :border-color ,color/primary + :border-color "var(--primary)" :border-bottom-width "3px") (.event - :color ,color/gray)))) + :color "var(--gray)")))) (defparameter form-styles `(((:or (:and input (:or (:= type "text") @@ -115,7 +91,7 @@ :border-top "none" :border-left "none" :border-right "none" - :border-bottom "1px" "solid" ,color/gray + :border-bottom "1px" "solid" "var(--gray)" :margin-bottom "1rem") (textarea @@ -158,12 +134,12 @@ :flex 1) (.edit-issue - :background-color ,color/light-gray + :background-color "var(--light)"-gray :flex 0 :margin-right "0.5rem") (.close-issue - :background-color ,color/failure)))) + :background-color "var(--failure)")))) (defparameter styles `(,@form-styles @@ -174,7 +150,27 @@ (body :font-family "sans-serif" - :color ,color/black) + :color "var(--text)" + :background "var(--bg)" + :--text "rgb(24, 24, 24)" + :--bg "white" + :--gray "#8D8D8D" + :--primary "rgb(106, 154, 255)" + :--primary-light "rgb(150, 166, 200)" + :--success "rgb(168, 249, 166)" + :--failure "rgb(247, 167, 167)" + :--light-gray "#EEE") + + (:media "(prefers-color-scheme: dark)" + (body + :--text "rgb(240, 240, 240)" + :--bg "black" + :--gray "#8D8D8D" + :--primary "rgb(106, 154, 255)" + :--primary-light "rgb(150, 166, 200)" + :--success "rgb(14, 130, 11)" + :--failure "rgb(124, 14, 14)" + :--light-gray "#222")) (a :color "inherit") @@ -185,7 +181,7 @@ (header :display "flex" :align-items "center" - :border-bottom "1px" "solid" ,color/black + :border-bottom "1px" "solid" "var(--text)" :margin-bottom "1rem" (h1 @@ -193,12 +189,12 @@ :flex 1) (.issue-number - :color ,color/gray + :color "var(--gray)" :font-size "1.5rem")) (nav :display "flex" - :color ,color/gray + :color "var(--gray)" :justify-content "space-between" (.nav-group @@ -207,21 +203,21 @@ :margin-left "0.5rem"))) (footer - :border-top "1px" "solid" ,color/gray + :border-top "1px" "solid" "var(--gray)" :padding-top "1rem" :margin-top "1rem" - :color ,color/gray) + :color "var(--gray)") ,@(button '.new-issue) (.alert :padding "0.5rem" :margin-bottom "1rem" - :background-color ,color/failure) + :background-color "var(--failure)") (.login-form :max-width "300px" :margin "0 auto") (.created-by-at - :color ,color/gray))) + :color "var(--gray)"))) |