Overhaul color scheme

This commit is contained in:
BBaoVanC 2022-05-14 23:19:52 -05:00
parent 833edacc1f
commit 9c3a076e96
Signed by: bbaovanc
GPG Key ID: 18089E4E3CCF1D3A

View File

@ -2,40 +2,51 @@
* https://github.com/BBaoVanC/bobatheme. * https://github.com/BBaoVanC/bobatheme.
*/ */
/* color notes:
*
* lightness (dark):
* background-0: 5
* background-1: 12.5
* background-2: 20
* background-highlight: 27.5
* text-0: 92.5
* text-1: 85
*/
:root { :root {
--background-0: #111111; --background-0: #111111; /* lch(5, 0, X) */
--background-1: #212121; --background-1: #212121; /* lch(12.5, 0, X) */
--background-2: #303030; --background-2: #303030; /* lch(20, 0, X) */
--background-highlight: #414141; --background-3: #414141; /* lch(27.5, 0, X) */
--background-accent-red: #2d1411; /* lch(10, 15, 30) */ --background-pink-1: #331821; /* lch(12.5, 15, 0) */
--background-accent-orange: #291705; /* lch(10, 15, 60) */ --background-red-1: #331917; /* lch(12.5, 15, 30) */
--background-accent-yellow: #2b2510; /* lch(15, 15, 90) */ --background-orange-1: #2e1c0e; /* lch(12.5, 15, 60) */
--background-accent-lime: #202813; /* lch(15, 15, 120) */ --background-yellow-1: #262008; /* lch(12.5, 15, 90) */
--background-accent-green: #092010; /* lch(10, 15, 150) */ --background-lime-1: #1b230c; /* lch(12.5, 15, 120) */
--background-accent-turquoise: #062b25; /* lch(15, 15, 180) */ --background-green-1: #0e2516; /* lch(12.5, 15, 150) */
--background-accent-teal: #002b30; /* lch(15, 15, 210) */ --background-turquoise-1: #012620; /* lch(12.5, 15, 180) */
--background-accent-cerulean: #022331; /* lch(12, 15, 240) */ --background-teal-1: #00262b; /* lch(12.5, 15, 210) -- out of sRGB */
--background-accent-blue: #101c30; /* lch(10, 15, 270) */ --background-cerulean-1: #032432; /* lch(12.5, 15, 240) */
--background-accent-purple: #1e182d; /* lch(10, 15, 300) */ --background-blue-1: #152135; /* lch(12.5, 15, 270) */
--background-accent-pink: #291526; /* lch(10, 15, 330) */ --background-purple-1: #241d33; /* lch(12.5, 15, 300) */
--background-magenta-1: #2e1a2b; /* lch(12.5, 15, 330) */
--background-accent: var(--background-accent-blue); --background-pink-2: #4b2431; /* lch(20, 20, 0) */
--background-red-2: #4a2623; /* lch(20, 20, 30) */
--background-orange-2: #432a17; /* lch(20, 20, 60) */
--background-yellow-2: #373012; /* lch(20, 20, 90) */
--background-lime-2: #283416; /* lch(20, 20, 120) */
--background-green-2: #163721; /* lch(20, 20, 150) */
--background-turquoise-2: #003830; /* lch(20, 20, 180) -- out of sRGB */
--background-teal-2: #00373e; /* lch(20, 20, 210) -- out of sRGB */
--background-cerulean-2: #013549; /* lch(20, 20, 240) */
--background-blue-2: #1f314e; /* lch(20, 20, 270) */
--background-purple-2: #352c4a; /* lch(20, 20, 300) */
--background-magenta-2: #43263f; /* lch(20, 20, 330) */
--background-accent-1: var(--background-blue-1);
--background-accent-2: var(--background-blue-2);
--text-0: #d4d4d4; /* lch(85, 0, X) */
--text-1: #d4d4d4; /* lch(85, 0, X) */
--text-2: #d4d4d4; /* lch(85, 0, X) */
--text-3: #e9e9e9; /* lch(92.5, 0, X) */
--text-gray-0: #ababab; /* lch(70, 0, X) */
--text-gray-1: #919191; /* lch(60, 0, X) */
--link-0: #3a94fb; /* lch(60, 60, 270) */
--text-0: #e9e9e9;
--text-1: #d4d4d4;
--link-color: #3a94fb; /* lch(60, 60, 270) */
--figure-border: #1f5593; /* lch(35, 40, 270) */ --figure-border: #1f5593; /* lch(35, 40, 270) */
--pagination-active-hover-text: black; --pagination-active-hover-text: black;
@ -45,28 +56,50 @@
@media print, (prefers-color-scheme: light) { @media print, (prefers-color-scheme: light) {
:root { :root {
--background-0: #f1f1f1; --background-0: #f1f1f1; /* lch(95, 0, X) */
--background-1: #dbdbdb; --background-1: #dbdbdb; /* lch(87.5, 0, X) */
--background-2: #c6c6c6; --background-2: #c6c6c6; /* lch(80, 0, X) */
--background-highlight: #c6c6c6; --background-3: #b2b2b2; /* lch(72.5, 0, X) */
--background-accent-red: #f1cbc7; /* lch(85, 15, 30); */ --background-pink-1: #f7d1dc; /* lch(87.5, 15, 0) */
--background-accent-orange: #f8ddca; /* lch(90, 15, 60); */ --background-red-1: #f8d2ce; /* lch(87.5, 15, 30) */
--background-accent-yellow: #f0e1b2; /* lch(90, 25, 90); */ --background-orange-1: #f1d6c3; /* lch(87.5, 15, 60) */
--background-accent-lime: #dce6c9; /* lch(90, 15, 120); */ --background-yellow-1: #e4dbbf; /* lch(87.5, 15, 90) */
--background-accent-green: #cdead3; /* lch(90, 15, 150); */ --background-lime-1: #d5dfc2; /* lch(87.5, 15, 120) */
--background-accent-turquoise: #c3ebe2; /* lch(90, 15, 180); */ --background-green-1: #c6e3cc; /* lch(87.5, 15, 150) */
--background-accent-teal: #c1eaf0; /* lch(90, 15, 210); */ --background-turquoise-1: #bce4db; /* lch(87.5, 15, 180) */
--background-accent-cerulean: #c8e7fb; /* lch(90, 15, 240); */ --background-teal-1: #bae3e9; /* lch(87.5, 15, 210) */
--background-accent-blue: #d7e3ff; /* lch(90, 15, 270); */ --background-cerulean-1: #c2e0f4; /* lch(87.5, 15, 240) */
--background-accent-purple: #e8defb; /* lch(90, 15, 300); */ --background-blue-1: #d0dcf8; /* lch(87.5, 15, 270) */
--background-accent-pink: #f6daf1; /* lch(90, 15, 330); */ --background-purple-1: #e1d7f4; /* lch(87.5, 15, 300) */
--background-magenta-1: #efd3ea; /* lch(87.5, 15, 330) */
--background-accent: var(--background-accent-blue); --background-pink-2: #fbb1c8; /* lch(80, 30, 0) */
--background-red-2: #fbb4ac; /* lch(80, 30, 30) */
--background-orange-2: #eebc97; /* lch(80, 30, 60) */
--background-yellow-2: #d6c58e; /* lch(80, 30, 90) */
--background-lime-2: #b8ce95; /* lch(80, 30, 120) */
--background-green-2: #9ad4a9; /* lch(80, 30, 150) */
--background-turquoise-2: #81d6c5; /* lch(80, 30, 180) */
--background-teal-2: #7ad5e1; /* lch(80, 30, 210) */
--background-cerulean-2: #8cd0f6; /* lch(80, 30, 240) */
--background-blue-2: #adc8fe; /* lch(80, 30, 270) */
--background-purple-2: #d0bef7; /* lch(80, 30, 300) */
--background-magenta-2: #ecb5e3; /* lch(80, 30, 330) */
--background-accent-1: var(--background-blue-1);
--background-accent-2: var(--background-blue-2);
--text-0: #262626; /* lch(15, 0, X) */
--text-1: #262626; /* lch(15, 0, X) */
--text-2: #262626; /* lch(15, 0, X) */
--text-3: #171717; /* lch(72.5, 0, X) */
--text-gray-0: #474747; /* lch(30, 0, X) */
--text-gray-1: #5e5e5e; /* lch(40, 0, X) */
--link-0: #2061a8; /* lch(40, 45, 270) */
--text-0: #171717;
--text-1: #262626;
--link-color: #2061a8; /* lch(40, 45, 270) */
--figure-border: #367acd; /* lch(50, 50, 270) */ --figure-border: #367acd; /* lch(50, 50, 270) */
--pagination-active-hover-text: white; --pagination-active-hover-text: white;
@ -111,6 +144,7 @@
padding-bottom: 24px; padding-bottom: 24px;
border-radius: 12px; border-radius: 12px;
background-color: var(--background-1); background-color: var(--background-1);
color: var(--text-1);
} }
.post-series-position { .post-series-position {
@ -182,6 +216,7 @@
.taxonomy-list li { .taxonomy-list li {
background-color: var(--background-1); background-color: var(--background-1);
color: var(--text-1);
padding: 8px 12px; padding: 8px 12px;
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
@ -215,6 +250,7 @@
flex-flow: row wrap; flex-flow: row wrap;
list-style: none; list-style: none;
background-color: var(--background-0); background-color: var(--background-0);
color: var(--text-0);
padding: 8px; padding: 8px;
border-radius: 16px; border-radius: 16px;
} }
@ -235,12 +271,14 @@
.section { .section {
background-color: var(--background-1); background-color: var(--background-1);
color: var(--text-1);
border-radius: 12px; border-radius: 12px;
padding: 1px 25px; padding: 1px 25px;
} }
.section:hover { .section:hover {
background-color: var(--background-2); background-color: var(--background-2);
color: var(--text-2);
} }
.section-title { .section-title {
@ -285,6 +323,7 @@ h1.header {
/* Content formatting */ /* Content formatting */
.series-box { .series-box {
background-color: var(--background-1); background-color: var(--background-1);
color: var(--text-1);
padding: 8px 16px; padding: 8px 16px;
border-radius: 8px; border-radius: 8px;
margin: 15px 0; margin: 15px 0;
@ -292,6 +331,7 @@ h1.header {
.table-of-contents { .table-of-contents {
background-color: var(--background-1); background-color: var(--background-1);
color: var(--text-1);
padding: 8px 20px; padding: 8px 20px;
border-radius: 8px; border-radius: 8px;
margin: 10px 0; margin: 10px 0;
@ -364,6 +404,7 @@ h1.header {
/* Social media share buttons */ /* Social media share buttons */
.share-buttons { .share-buttons {
background: var(--background-1); background: var(--background-1);
color: var(--text-1);
margin: 25px 0; margin: 25px 0;
padding: 8px 0; padding: 8px 0;
border-radius: 8px; border-radius: 8px;
@ -375,6 +416,7 @@ h1.header {
.share-buttons button, .share-buttons button,
.share-buttons a { .share-buttons a {
background-color: var(--background-2); background-color: var(--background-2);
color: var(--text-2);
padding: 4px; padding: 4px;
border-radius: 8px; border-radius: 8px;
} }
@ -400,6 +442,7 @@ h1.header {
/* See also formating */ /* See also formating */
.see-also { .see-also {
background-color: var(--background-1); background-color: var(--background-1);
color: var(--text-1);
padding: 8px 12px; padding: 8px 12px;
border-radius: 8px; border-radius: 8px;
margin: 10px 0; margin: 10px 0;
@ -417,6 +460,7 @@ h1.header {
bottom: 25px; bottom: 25px;
right: 25px; right: 25px;
background-color: var(--background-1); background-color: var(--background-1);
color: var(--text-1);
border-radius: 100%; border-radius: 100%;
padding: 12px; padding: 12px;
display: none; display: none;
@ -430,6 +474,7 @@ h1.header {
flex-wrap: nowrap; flex-wrap: nowrap;
flex-direction: row; flex-direction: row;
background-color: var(--background-1); background-color: var(--background-1);
color: var(--text-1);
border-radius: 8px; border-radius: 8px;
margin-top: 5px; margin-top: 5px;
padding: 4px; padding: 4px;
@ -451,10 +496,15 @@ h1.header {
.navbar-item:hover, .navbar-item:hover,
.langpicker summary:hover, .langpicker summary:hover,
.langpicker[open] summary { .langpicker[open] summary {
background-color: var(--background-highlight); background-color: var(--background-3);
text-decoration: none; text-decoration: none;
} }
.langpicker summary:hover,
.langpicker[open] summary {
color: var(--text-3);
}
.topbar .active { .topbar .active {
font-weight: bold; font-weight: bold;
} }
@ -476,6 +526,7 @@ h1.header {
margin-top: 8px; margin-top: 8px;
right: 0; right: 0;
background-color: var(--background-1); background-color: var(--background-1);
color: var(--text-1);
border: 2px solid var(--background-2); border: 2px solid var(--background-2);
padding: 8px 12px; padding: 8px 12px;
border-radius: 8px; border-radius: 8px;
@ -506,7 +557,7 @@ html {
body { body {
background-color: var(--background-0); background-color: var(--background-0);
color: var(--text-1); color: var(--text-0);
font-family: "Open Sans", "Noto Sans", sans-serif; font-family: "Open Sans", "Noto Sans", sans-serif;
margin: 20px; margin: 20px;
max-width: 720px; max-width: 720px;
@ -556,7 +607,7 @@ figcaption {
} }
a { a {
color: var(--link-color); color: var(--link-0);
text-decoration: inherit; text-decoration: inherit;
} }
@ -570,7 +621,7 @@ blockquote {
} }
hr { hr {
border: 1px solid var(--background-highlight); border: 1px solid var(--background-3);
} }
table.markdown { table.markdown {
@ -580,6 +631,7 @@ table.markdown {
.markdown thead { .markdown thead {
background-color: var(--background-2); background-color: var(--background-2);
color: var(--text-2);
} }
.markdown th, .markdown th,
@ -589,9 +641,11 @@ table.markdown {
.markdown tbody tr:nth-child(odd) { .markdown tbody tr:nth-child(odd) {
background-color: var(--background-0); background-color: var(--background-0);
color: var(--text-0);
} }
.markdown tbody tr:nth-child(even) { .markdown tbody tr:nth-child(even) {
background-color: var(--background-1); background-color: var(--background-1);
color: var(--text-1);
} }
* { * {
@ -612,6 +666,7 @@ table.markdown {
:not(pre) > code { :not(pre) > code {
background-color: var(--background-2); background-color: var(--background-2);
color: var(--text-2);
padding: 2px 4px; padding: 2px 4px;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
@ -631,6 +686,7 @@ aside {
padding: 8px 16px; padding: 8px 16px;
margin: 16px 0; margin: 16px 0;
border-radius: 8px; border-radius: 8px;
color: var(--text-1);
} }
.aside-title { .aside-title {
@ -647,19 +703,19 @@ aside {
} }
aside.note { aside.note {
background-color: var(--background-accent-blue); background-color: var(--background-blue-1);
} }
aside.info { aside.info {
background-color: var(--background-accent-green); background-color: var(--background-green-1);
} }
aside.tip { aside.tip {
background-color: var(--background-accent-teal); background-color: var(--background-teal-1);
} }
aside.warning { aside.warning {
background-color: var(--background-accent-yellow); background-color: var(--background-yellow-1);
} }
aside.example { aside.example {
background-color: var(--background-accent-purple); background-color: var(--background-purple-1);
} }
aside.quote { aside.quote {
background-color: var(--background-1); background-color: var(--background-1);
@ -716,7 +772,7 @@ h1 svg.icon {
} }
:not(li.disabled) > .page-link:hover { :not(li.disabled) > .page-link:hover {
background-color: var(--background-highlight); background-color: var(--background-3);
} }
li.disabled { li.disabled {
@ -763,11 +819,13 @@ li.disabled > .page-link:hover {
flex-direction: column; flex-direction: column;
color: inherit; color: inherit;
background-color: var(--background-1); background-color: var(--background-1);
color: var(--text-1);
padding: 8px 16px; padding: 8px 16px;
} }
.prevnext > a:hover { .prevnext > a:hover {
background-color: var(--background-2); background-color: var(--background-2);
color: var(--text-2);
text-decoration: none; text-decoration: none;
} }
@ -799,11 +857,6 @@ li.disabled > .page-link:hover {
/* Light mode */ /* Light mode */
@media print, @media print,
(prefers-color-scheme: light) { (prefers-color-scheme: light) {
/* Basic elements */
.section:hover {
color: inherit;
}
li.disabled { li.disabled {
opacity: .25; opacity: .25;
} }