jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

css: rework dark mode color palette.

Browse Source 
* Switch from flat greys to cool blue greys.
* Define colors with HSLuv (https://www.hsluv.org) so that each band of
  colors is perceptually uniform (has the same brightness and contrast).
This commit is contained in:
evazion
2019-09-22 02:58:09 -05:00
parent d15b29c0cc
commit 0a08f9ea9b
1 changed files with 26 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
app/javascript/src/styles/base/040_colors.css
View File

@@ -228,30 +228,32 @@ body[data-user-theme="light"] {
/* variables that aren't defined in the dark theme fall back to the :root theme */ /* variables that aren't defined in the dark theme fall back to the :root theme */
body[data-user-theme="dark"] { body[data-user-theme="dark"] {
--grey-1: hsl(0, 0%, 15%); --grey-1: #1f202c; /* hsluv(265, 15, 12.50); */
--grey-2: hsl(0, 0%, 20%); --grey-2: #2c2c3c; /* hsluv(265, 15, 18.75); */
--grey-3: hsl(0, 0%, 30%); --grey-3: #393a4d; /* hsluv(265, 15, 25.00); */
--grey-4: hsl(0, 0%, 60%); --grey-4: #9596a8; /* hsluv(265, 15, 62.50); */
--grey-5: hsl(0, 0%, 85%); --grey-5: #c9c9d2; /* hsluv(265, 15, 81.25); */
--red-0: #652828; /* hsluv(12, 50, 25); */
--red-0: hsl(0, 75%, 30%); --red-1: #f07a7b; /* hsluv(12, 80, 65); */
--red-1: hsl(0, 90%, 65%); --red-2: #f3a4a4; /* hsluv(12, 80, 75); */
--red-2: hsl(0, 90%, 75%); --yellow-0: #625121; /* hsluv(65, 80, 35); */
--aqua-0: hsl(180, 60%, 20%); --yellow-1: #e8c259; /* hsluv(65, 80, 80); */
--blue-0: hsl(225, 65%, 25%); --yellow-2: #fae0a8; /* hsluv(65, 80, 90); */
--blue-1: hsl(200, 70%, 50%); --green-0: #164423; /* hsluv(135, 80, 25); */
--blue-2: hsl(200, 70%, 65%); --green-1: #46b265; /* hsluv(135, 80, 65); */
--indigo-0: hsl(240, 35%, 40%); --green-2: #53d077; /* hsluv(135, 80, 75); */
--indigo-1: hsl(240, 80%, 80%); --aqua-0: #293f3d; /* hsluv(180, 50, 25); */
--green-0: hsl(120, 40%, 20%); --aqua-1: #4aada3; /* hsluv(180, 80, 65); */
--green-1: hsl(130, 65%, 50%); --aqua-2: #57cabe; /* hsluv(180, 80, 75); */
--green-2: hsl(130, 65%, 70%); --blue-0: #2c3d51; /* hsluv(245, 50, 25); */
--purple-0: hsl(300, 65%, 20%); --blue-1: #51a3ec; /* hsluv(245, 80, 65); */
--purple-1: hsl(285, 65%, 65%); --blue-2: #8fbcf1; /* hsluv(245, 80, 75); */
--purple-2: hsl(285, 65%, 75%); --indigo-0: #323573; /* hsluv(265, 50, 25); */
--yellow-0: hsl(60, 90%, 15%); --indigo-1: #9396ec; /* hsluv(265, 80, 65); */
--yellow-1: hsl(50, 90%, 50%); --indigo-2: #b2b4f1; /* hsluv(265, 80, 75); */
--yellow-2: hsl(50, 90%, 75%); --purple-0: #473067; /* hsluv(280, 50, 25); */
--purple-1: #b38bec; /* hsluv(280, 80, 65); */
--purple-2: #c7adf1; /* hsluv(280, 80, 75); */
/* main background colors */ /* main background colors */
--body-background-color: var(--grey-1); --body-background-color: var(--grey-1);