diff options
| -rw-r--r-- | app.css | 100 |
1 files changed, 72 insertions, 28 deletions
@@ -1,10 +1,37 @@ +/* :root { + --fg-rgb: 0,0,0; + --selection: royalblue; + --selection-rgb: 65,105,225; +} */ :root { - --bg: white; - --bg-rgb: 255,255,255; - --fg: black; - --dialog-bg: white; - --dark-red: #910e0e; - --dark-blue: #6d99c6; + --theme-light-bg-rgb: 250,250,250; + --theme-light-bg: rgb(var(--theme-light-bg-rgb)); + --theme-light-fg: black; + --theme-light-dialog-bg: rgb(245,245,245); + --theme-light-dialog-bg-rgb: 245,245,245; + --theme-light-key-bg-rgb: 233,233,237; + --theme-light-key-bg-base: rgb(var(--theme-light-key-bg-rgb)); + --theme-light-key-color-rgb: 50,50,50; + --theme-light-key-color-base: rgb(var(--theme-light-key-color-rgb)); + --theme-light-key-color-extreme: #313131; + --theme-light-key-color-hover: white; + --theme-light-code-bg: rgba(0, 0, 0, 0.1); + + --theme-dark-fg: rgb(230,230,230); + --theme-dark-fg-rgb: 230,230,230; + --theme-dark-bg: hsl(211, 20%, 12%); + --theme-dark-bg-rgb: 17,34,51; + --theme-dark-dialog-bg: hsl(210, 10%, 12%); + --theme-dark-dialog-bg-rgb: 28, 31, 34; + --theme-dark-key-bg-base: hsl(208.2, 23%, 18%); + --theme-dark-key-bg-rgb: 49, 65, 78; + --theme-dark-key-color-base: hsl(0, 0%, 75%); + --theme-dark-key-color-rgb: 230,230,230; + --theme-dark-key-color-extreme: #e7e7e7; + --theme-dark-code-bg: rgba(255, 255, 255, 0.1); + + --dark-red: #910e0e; + --dark-blue: #6d99c6; --error-highlight: rgb(179, 60, 60); --selection: rgb(60, 179, 113); --hover-selection: rgba(60, 179, 113, 0.85); @@ -12,13 +39,21 @@ --delete-faint: rgba(179, 60, 72, 0.6); --link: royalblue; --link-hover: #6d99c6; - --key-bg-base: #f2f2f2; - --key-bg-hover: white; - --key-bg-highlight: sandybrown; - --key-color-base: hsl(0, 0%, 30%); - --key-color-extreme: #313131; - --key-color-hover: white; - --code-bg: rgba(0, 0, 0, 0.15); +} + +[data-theme="light"], body:not([data-theme="dark"]) { + --bg-rgb: var(--theme-light-bg-rgb); + --bg: var(--theme-light-bg); + --fg: var(--theme-light-fg); + --dialog-bg: var(--theme-light-dialog-bg); + --dialog-bg-rgb: var(--theme-light-dialog-bg-rgb); + --key-bg-rgb: var(--theme-light-key-bg-rgb); + --key-bg-base: var(--theme-light-key-bg-base); + --key-color-rgb: var(--theme-light-key-color-rgb); + --key-color-base: var(--theme-light-key-color-base); + --key-color-extreme: var(--theme-light-key-color-extreme); + --key-color-hover: var(--theme-light-key-color-hover); + --code-bg: var(--theme-light-code-bg); } html { font-family: sans-serif; @@ -37,26 +72,35 @@ h1, h2, h3, h4, h5, h6 { font-family: Quicksand, avenir, sans-serif; } -body[data-theme="dark"] { +[data-theme="dark"] { color-scheme: dark; - --fg: white; - --bg: hsl(211, 31.9%, 13%); - --bg-rgb: 17,34,51; - --dialog-bg: hsl(210, 30%, 17%); - --key-bg-base: hsl(208.2, 23%, 25%); - --key-color-base: hsl(0, 0%, 90%); - --key-color-extreme: #e7e7e7; + --fg: var(--theme-dark-fg); + --fg-rgb: var(--theme-dark-fg-rgb); + --bg: var(--theme-dark-bg); + --bg-rgb: var(--theme-dark-bg-rgb); + --dialog-bg: var(--theme-dark-dialog-bg); + --dialog-bg-rgb: var(--theme-dark-dialog-bg-rgb); + --key-bg-base: var(--theme-dark-key-bg-base); + --key-bg-rgb: var(--theme-dark-key-bg-rgb); + --key-color-base: var(--theme-dark-key-color-base); + --key-color-rgb: var(--theme-dark-key-color-rgb); + --key-color-extreme: var(--theme-dark-key-color-extreme); + --code-bg: var(--theme-dark-code-bg); } @media (prefers-color-scheme: dark) { body[data-theme="system"] { color-scheme: dark; - --fg: white; - --bg: hsl(211, 31.9%, 13%); - --bg-rgb: 17,34,51; - --dialog-bg: hsl(210, 30%, 17%); - --key-bg-base: hsl(208.2, 23%, 25%); - --key-color-base: hsl(0, 0%, 90%); - --key-color-extreme: #e7e7e7; + --fg: var(--theme-dark-fg); + --fg-rgb: var(--theme-dark-fg-rgb); + --bg: var(--theme-dark-bg); + --bg-rgb: var(--theme-dark-bg-rgb); + --dialog-bg: var(--theme-dark-dialog-bg); + --key-bg-base: var(--theme-dark-key-bg-base); + --key-bg-rgb: var(--theme-dark-key-bg-rgb); + --key-color-base: var(--theme-dark-key-color-base); + --key-color-rgb: var(--theme-dark-key-color-rgb); + --key-color-extreme: var(--theme-dark-key-color-extreme); + --code-bg: var(--theme-dark-code-bg); } } |