Use CSS variables for colors

assets/css/bobastyle.css

@@ -2,6 +2,55 @@
  * https://github.com/BBaoVanC/bobatheme.
  */
 
+:root {
+  --background: #111;
+  --background-2: #222;
+  --background-3: #282828;
+  --background-4: #333;
+  --background-5: #444;
+  --text-normal: #d3d3d3;
+  --link-color: #4da6ff;
+  --figure-border: #1b5b9b;
+
+  --pagination-active-hover-text: black;
+  --pagination-active-background: #163b64;
+  --pagination-active-hover-background: #286ab2;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --background: #eee;
+    --background-2: #ddd;
+    --background-3: #d8d8d8;
+    --background-4: #bbb;
+    --background-5: #aaa;
+    --text-normal: #000;
+    --link-color: #0057bf;
+    --figure-border: #2e7bc9;
+
+    --pagination-active-hover-text: white;
+    --pagination-active-background: #3977bd;
+    --pagination-active-hover-background: #154172;
+  }
+}
+
+@media print {
+  :root {
+    --background: #fff;
+    --background-2: #ddd;
+    --background-3: #d8d8d8;
+    --background-4: #bbb;
+    --background-5: #aaa;
+    --text-normal: #000;
+    --link-color: #0057bf;
+    --figure-border: #2e7bc9;
+
+    --pagination-active-hover-text: white;
+    --pagination-active-background: #3977bd;
+    --pagination-active-hover-background: #154172;
+  }
+}
+
 
 /* Post layout (in list pages) */
 .list-page-content {
@@ -26,7 +75,7 @@
   padding-right: 24px;
   padding-bottom: 24px;
   border-radius: 12px;
-  background-color: #222;
+  background-color: var(--background-2);
 }
 
 .post-title {
@@ -76,14 +125,14 @@
 }
 
 .tag-list a {
-  background-color: #222;
+  background-color: var(--background-2);
   padding: 8px 12px;
   border-radius: 12px;
 }
 
 .tag-list a:hover {
   text-decoration: none;
-  background-color: #333;
+  background-color: var(--background-4);
 }
 
 
@@ -95,7 +144,7 @@
   flex-flow: row wrap;
   list-style: none;
   padding: 0;
-  background-color: #111;
+  background-color: var(--background);
   padding: 8px;
   border-radius: 16px;
 }
@@ -115,14 +164,13 @@
 }
 
 .section {
-  background-color: #222;
+  background-color: var(--background-2);
   border-radius: 12px;
   padding: 1px 25px;
 }
 
 .section:hover {
-  background-color: #333;
+  background-color: var(--background-4);
-  color: #fff;
 }
 
 .section-title {
@@ -166,14 +214,14 @@
 
 /* Content formatting */
 .series-box {
-  background-color: #222;
+  background-color: var(--background-2);
   padding: 8px 16px;
   border-radius: 8px;
   margin: 15px 0;
 }
 
 .table-of-contents {
-  background-color: #222;
+  background-color: var(--background-2);
   padding: 8px 20px;
   border-radius: 8px;
   margin: 10px 0;
@@ -204,7 +252,7 @@ footer {
   display: flex;
   flex-wrap: nowrap;
   flex-direction: row;
-  background-color: #222;
+  background-color: var(--background-2);
   border-radius: 8px;
   margin-top: 5px;
   padding: 4px;
@@ -228,7 +276,7 @@ footer {
 .navbar-item:hover,
 .langpicker summary:hover,
 .langpicker[open] summary {
-  background-color: #444;
+  background-color: var(--background-5);
   text-decoration: none;
 }
 
@@ -252,8 +300,8 @@ footer {
   position: absolute;
   margin-top: 8px;
   right: 0;
-  background-color: #222;
+  background-color: var(--background-2);
-  border: 2px solid #333;
+  border: 2px solid var(--background-4);
   padding: 8px 12px;
   border-radius: 8px;
   list-style: none;
@@ -272,8 +320,8 @@ footer {
 
 /* Basic elements */
 body {
-  background-color: #111;
+  background-color: var(--background);
-  color: lightgray;
+  color: var(--text-normal);
   font-family: "Open Sans", "Noto Sans", sans-serif;
   margin: auto;
   max-width: 720px;
@@ -288,13 +336,13 @@ video {
 .post-media > figure.border img,
 .post-media > figure.border video {
   padding: 5px;
-  border: 7px solid #1b5b9b;
+  border: 7px solid var(--figure-border);
 }
 
 figure.border img,
 figure.border video {
   padding: 5px;
-  border: 2px solid #1b5b9b;
+  border: 2px solid var(--figure-border);
 }
 
 figure {
@@ -309,14 +357,14 @@ figcaption {
 }
 
 aside {
-  background-color: #222;
+  background-color: var(--background-2);
   padding: 12px 16px;
   margin: 16px 0;
   border-radius: 8px;
 }
 
 a {
-  color: #4da6ff;
+  color: var(--link-color);
   text-decoration: inherit;
 }
 
@@ -325,12 +373,12 @@ a:hover {
 }
 
 blockquote {
-  border-left: 5px solid #333;
+  border-left: 5px solid var(--background-4);
   padding-left: 15px;
 }
 
 hr {
-  border-color: #444;
+  border-color: var(--background-5);
 }
 
 * {
@@ -350,7 +398,7 @@ hr {
 }
 
 :not(pre) > code {
-  background-color: #282828;
+  background-color: var(--background-3);
   padding: 2px 4px;
   overflow-wrap: break-word;
 }
@@ -369,7 +417,7 @@ code {
 .icon {
   width: 20px;
   height: 20px;
-  color: lightgray;
+  color: var(--text-normal);
   text-align: center;
   display: inline;
   vertical-align: middle;
@@ -396,17 +444,17 @@ h1 svg.icon {
 .page-link {
   padding: 8px 16px;
   border-radius: 5px;
-  color: lightgray;
+  color: var(--text-normal);
 }
 
 .page-item.active .page-link {
-  background-color: #163b64;
+  background-color: var(--pagination-active-background);
   color: inherit;
 }
 
 .page-item.active .page-link:hover {
-  background-color: #2b72c0;
+  background-color: var(--pagination-active-hover-background);
-  color: white;
+  color: var(--pagination-active-hover-text);
 }
 
 .page-link:hover {
@@ -414,8 +462,7 @@ h1 svg.icon {
 }
 
 :not(li.disabled) > .page-link:hover {
-  background-color: #444;
+  background-color: var(--background-5);
-  color: white;
 }
 
 li.disabled {
@@ -463,12 +510,12 @@ li.disabled > .page-link:hover {
   display: flex;
   flex-direction: column;
   color: inherit;
-  background-color: #222;
+  background-color: var(--background-2);
   padding: 8px 16px;
 }
 
 .prevnext > a:hover {
-  background-color: #333;
+  background-color: var(--background-4);
   text-decoration: none;
 }
 
@@ -500,90 +547,10 @@ li.disabled > .page-link:hover {
 /* Light mode */
 @media print, (prefers-color-scheme: light) {
   /* Basic elements */
-  body {
-    background-color: #eee;
-    color: black;
-  }
-
-  a {
-    color: #0057bf;
-  }
-
-  .icon {
-    color: black;
-  }
-
-  .post-media > figure.border img,
-  .post-media > figure.border video,
-  figure.border img,
-  figure.border video {
-    border-color: #2e7bc9;
-  }
-
-  aside,
-  :not(pre) > code {
-    background-color: #ddd;
-  }
-
-  hr {
-    border-color: #ccc;
-  }
-
-
-  .topbar,
-  .section,
-  .tag-list a,
-  .page-list li,
-  .series-taxonomy li,
-  .series-box,
-  .prevnext > *,
-  .table-of-contents {
-    background-color: #ddd;
-  }
-
   .section:hover {
     color: inherit;
   }
 
-  .section:hover,
-  .tag-list a:hover,
-  .navbar-item:hover,
-  .langpicker summary:hover,
-  .langpicker[open] summary,
-  .prevnext > a:hover {
-    background-color: #bbb;
-  }
-
-  .langpicker .languages {
-    background-color: #bbb;
-    border-color: #999;
-  }
-
-  .series-pages ul {
-    background-color: #eee;
-  }
-
-
-  /* Pagination */
-  .page-link {
-    color: black;
-  }
-
-  .page-item.active .page-link {
-    background-color: #3977bd;
-    color: white;
-  }
-
-  .page-item.active .page-link:hover {
-    background-color: #154172;
-    color: white;
-  }
-
-  :not(li.disabled) > .page-link:hover {
-    background-color: #bbb;
-    color: inherit;
-  }
-
   li.disabled {
     opacity: .25;
   }
@@ -607,7 +574,6 @@ li.disabled > .page-link:hover {
   }
 
   body {
-    background-color: white;
     max-width: 100%;
   }