From ed4d32c7ee2d35117f3627e2172eeb12d5573b3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonathan=20C=C3=A9lio?= Date: Thu, 18 Nov 2021 22:07:55 -0300 Subject: [PATCH] feat: add dark theme --- .../src/components/global/styles/global.css | 42 +++++++++++++------ webapp/src/pages/_document.tsx | 2 +- 2 files changed, 30 insertions(+), 14 deletions(-) diff --git a/webapp/src/components/global/styles/global.css b/webapp/src/components/global/styles/global.css index 6264947..80aadf3 100644 --- a/webapp/src/components/global/styles/global.css +++ b/webapp/src/components/global/styles/global.css @@ -4,13 +4,30 @@ --color-grape: #F3E5F5; --color-purple: #AA00FF; --color-purple-darker: #311B92; + --color-white: #e9e9e9; +} + +body[data-theme='light'] { + --background-color: var(--color-white); + --text-color: var(--color-black); + --link-color: var(--color-purple); + --link-visited-color: var(--color-purple-darker); + --selection-color: var(--color-grape); +} + +body[data-theme='dark'] { + --background-color: var(--color-black); + --text-color: var(--color-white); + --link-color: var(--color-purple); + --link-visited-color: var(--color-purple); + --selection-color: var(--color-gray); } ::selection { - background: var(--color-grape); + background: var(--selection-color); } ::-moz-selection { - background: var(--color-grape); + background: var(--selection-color); } html { @@ -22,14 +39,15 @@ body { font-weight: 400; font-size: 1.25rem; letter-spacing: 0.5px; - color: var(--color-gray); + color: var(--text-color); + background-color: var(--background-color); padding: 0px 1rem; max-width: 600px; margin: 0 auto !important; } a { - color: var(--color-purple); + color: var(--link-color); } a:hover { @@ -37,7 +55,7 @@ a:hover { } a:visited { - color: var(--color-purple-darker); + color: var(--link-visited-color); } p { @@ -50,11 +68,15 @@ strong { } h1, h2, h3, h4, h5, h6 { + color: var(--text-color); font-family: 'Kameron', serif; font-weight: 700; margin-top: 3rem; margin-bottom: 1.25rem; - color: var(--color-black); +} + +small { + color: var(--text-color); } h1 { @@ -78,12 +100,6 @@ h4 { h5 { margin: 0; } -/* h3, h4, h5 { - font-family: 'Fira Sans', sans-serif; - font-weight: 200; - font-style: italic; - font-size: 1.5em; -} */ header { text-align: center; @@ -104,7 +120,7 @@ footer { } header a, header a:visited, footer a, footer a:visited { - color: var(--color-gray); + color: var(--text-color); } article img { diff --git a/webapp/src/pages/_document.tsx b/webapp/src/pages/_document.tsx index a7fbef3..516f3b1 100644 --- a/webapp/src/pages/_document.tsx +++ b/webapp/src/pages/_document.tsx @@ -12,7 +12,7 @@ class MyDocument extends Document { rel="stylesheet" /> - +