- --navbar-bg: #292f2f;
- --jumbotron-bg: #3a4346;
- --copyright-bg: #292f2f;
- --link-color: #2fa6bc;
- --footer-link-color: #ecf7fa;
- --nlink-col: #000;
- --text-color: #292f2f;
- --footer-text-color: #ecf7fa;
- --copyright-text-color: #ecf7fa;
- --jumbotron-text-color: #ecf7fa;
- --border-color: #292f2f;
- --box-color: #4c5456;
- --box-hover-color: #292f2f;
- --box-round: 10px;
- --max-width: 600px;
+ --c-dark: #292f2f;
+ --c-bg-dark: #3a4346;
+ --c-bg-light: #4c5456;
+ --c-light: #ecf7fa;
+ --c-hl-dark: #008499;
+ --c-hl-light: #3baec4;
+ --c-shadow: #dae5e2;
+
+ /* backgrounds */
+ --navbar-bg: var(--c-dark);
+ --jumbotron-bg: var(--c-bg-dark);
+ --copyright-bg: var(--c-dark);
+
+ /* link colors */
+ --link-color: var(--c-hl-dark);
+ --link-hover-color: var(--c-hl-light);
+ --footer-link-color: var(--c-light);
+ --footer-hover-color: #fff;
+
+ /* text colors */
+ --text-color: var(--c-dark);
+ --footer-text-color: var(--c-light);
+ --copyright-text-color: var(--c-light);
+ --jumbotron-text-color: var(--c-light);
+ --art-date-color: color(var(--c-dark) tint(50%));
+
+ /* background colors */
+ --background-color: var(--c-light);
+
+ /* box colors */
+ --border-color: var(--c-dark);
+ --box-color: var(--c-bg-light);
+ --box-hover-color: var(--c-dark);
+ --box-round: 10px;
+ --navbar-border-color: var(--border-color);
+ --footer-shadow-color: rgba(150,150,150,.36);
+
+ /* other */
+ --max-width: 600px;
+ --max-width-box: 800px;
+ --margin-box-fa: 5px;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --text-color: var(--c-light);
+ --background-color: var(--c-dark);
+ --link-color: #00c8e8;
+ --link-hover-color: #21a9c1;
+ --c-shadow: var(--c-bg-light);
+ --border-color: #000000;
+ --navbar-border-color: var(--c-dark);
+ --footer-shadow-color: rgba(70, 70, 70, 0.5);
+ }