From d37cc9cdf26c2195ab6c22e7c9544a5d9f782c48 Mon Sep 17 00:00:00 2001 From: rhpidfyre Date: Wed, 11 Dec 2024 20:28:36 -0500 Subject: [PATCH] CSS variables for coloring --- web/src/app/_components/styles/header.scss | 20 +++++------ web/src/app/globals.scss | 34 +++++++++++++++++-- .../[submissionId]/(styles)/page.scss | 2 +- .../(styles)/page/commentWindow.scss | 3 +- .../(styles)/page/comments.scss | 2 +- .../(styles)/page/ratingWindow.scss | 2 +- .../[submissionId]/(styles)/page/review.scss | 5 ++- 7 files changed, 48 insertions(+), 20 deletions(-) diff --git a/web/src/app/_components/styles/header.scss b/web/src/app/_components/styles/header.scss index 3e1d248..eb98216 100644 --- a/web/src/app/_components/styles/header.scss +++ b/web/src/app/_components/styles/header.scss @@ -4,34 +4,34 @@ align-items: center; width: 100vw; height: 60px; - background: rgb(59,64,70); - background: linear-gradient(180deg, #363b40 0%, #353a40 100%); + background: var(--header-grad-left); + background: linear-gradient(180deg, var(--header-grad-left) 0%, var(--header-grad-right) 100%); button { background-color: transparent; border: 0; - color: white; + color: var(--header-button-left); } - + .left { margin-left: 15px; - + button { font-size: 1.2rem; } } - + .right { display: flex; gap: 7px; margin-right: 50px; - + button { font-size: 1rem; - color: rgb(180,180,180); - + color: var(--header-button-right); + &:hover { - color: white + color: var(--header-button-hover) } } } diff --git a/web/src/app/globals.scss b/web/src/app/globals.scss index fdebe0a..d49b067 100644 --- a/web/src/app/globals.scss +++ b/web/src/app/globals.scss @@ -1,5 +1,4 @@ -$review-border-color: #c8c8c8; -$review-border: 1px solid $review-border-color; +$review-border: 1px solid var(--review-border); @mixin border-with-radius { border: $review-border { @@ -8,13 +7,42 @@ $review-border: 1px solid $review-border-color; } :root { - color-scheme: light; + color-scheme: light dark; + + --page: white; + --header-grad-left: #363b40; + --header-grad-right: #353a40; + --header-button-left: white; + --header-button-right: #b4b4b4; + --header-button-hover: white; + --review-border: #c8c8c8; + --text-color: #1e1e1e; + --anchor-link-review: #008fd6; + --window-header: #f5f5f5; + --comment-highlighted: #ffffd7; + --comment-area: white; + + @media (prefers-color-scheme: dark) { + --page: rgb(15,15,15); + --header-grad-left: #363b40; + --header-grad-right: #353a40; + --header-button-left: white; + --header-button-right: #b4b4b4; + --header-button-hover: white; + --review-border: rgb(50,50,50); + --text-color: rgb(230,230,230); + --anchor-link-review: #008fd6; + --window-header: rgb(10,10,10); + --comment-highlighted: #ffffd7; + --comment-area: rgb(20,20,20); + } } body { font-family: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"; box-sizing: border-box; margin: 0; + background-color: var(--page); } button { diff --git a/web/src/app/submissions/[submissionId]/(styles)/page.scss b/web/src/app/submissions/[submissionId]/(styles)/page.scss index 9001461..09314d0 100644 --- a/web/src/app/submissions/[submissionId]/(styles)/page.scss +++ b/web/src/app/submissions/[submissionId]/(styles)/page.scss @@ -18,7 +18,7 @@ display: block; width: 100%; height: 1px; - background-color: globals.$review-border-color; + background-color: var(--review-border); } .by-creator { diff --git a/web/src/app/submissions/[submissionId]/(styles)/page/commentWindow.scss b/web/src/app/submissions/[submissionId]/(styles)/page/commentWindow.scss index bd3f755..d04b140 100644 --- a/web/src/app/submissions/[submissionId]/(styles)/page/commentWindow.scss +++ b/web/src/app/submissions/[submissionId]/(styles)/page/commentWindow.scss @@ -5,6 +5,7 @@ resize: none; width: 100%; height: 100px; + background-color: var(--comment-area) } .leave-comment-window { @@ -36,7 +37,7 @@ header { display: flex; align-items: center; - background-color: #f5f5f5; + background-color: var(--window-header); border-bottom: globals.$review-border; height: 45px; diff --git a/web/src/app/submissions/[submissionId]/(styles)/page/comments.scss b/web/src/app/submissions/[submissionId]/(styles)/page/comments.scss index 4967f8d..d74b8a6 100644 --- a/web/src/app/submissions/[submissionId]/(styles)/page/comments.scss +++ b/web/src/app/submissions/[submissionId]/(styles)/page/comments.scss @@ -16,7 +16,7 @@ $comments-size: 60px; //BhopMaptest comment &[data-highlighted="true"] { - background-color: #ffffd7; + background-color: var(--comment-highlighted); } > img { border-radius: 50%; diff --git a/web/src/app/submissions/[submissionId]/(styles)/page/ratingWindow.scss b/web/src/app/submissions/[submissionId]/(styles)/page/ratingWindow.scss index bb5fa65..770fe16 100644 --- a/web/src/app/submissions/[submissionId]/(styles)/page/ratingWindow.scss +++ b/web/src/app/submissions/[submissionId]/(styles)/page/ratingWindow.scss @@ -27,7 +27,7 @@ header { display: flex; align-items: center; - background-color: #f5f5f5; + background-color: var(--window-header); border-bottom: globals.$review-border; height: 45px; diff --git a/web/src/app/submissions/[submissionId]/(styles)/page/review.scss b/web/src/app/submissions/[submissionId]/(styles)/page/review.scss index 7173337..08fc5c0 100644 --- a/web/src/app/submissions/[submissionId]/(styles)/page/review.scss +++ b/web/src/app/submissions/[submissionId]/(styles)/page/review.scss @@ -8,10 +8,9 @@ display: flex; justify-content: space-between; align-items: center; - } p, h1 { - color: #1e1e1e; + color: var(--text-color); } h1 { font: { @@ -21,7 +20,7 @@ margin: 0; } a { - color: #008fd6; + color: var(--anchor-link-review); &:hover { text-decoration: underline;