feat: implement title and link color variables

torontojs · Aug 8, 2024 · db164d0 · db164d0
1 parent dbdc287
commit db164d0
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/src/components/PostCard/styles.css b/src/components/PostCard/styles.css
@@ -42,7 +42,7 @@
 
 .post-card .post-card-read-more {
 	grid-area: read-more;
-	color: var(--yellow-6);
+	color: var(--title-color);
 	font-weight: bold;
 	text-transform: uppercase;
 	text-decoration-color: var(--tjs-red-7);
@@ -66,7 +66,7 @@
 }
 
 .post-card h2 a {
-	color: var(--yellow-6);
+	color: var(--title-color);
 	text-shadow: var(--size-1) var(--size-1) var(--size-1) var(--tjs-dark-bg);
 	text-decoration-color: var(--tjs-red-7);
 	text-underline-offset: var(--size-2);

diff --git a/src/layouts/Base/variables.css b/src/layouts/Base/variables.css
@@ -23,6 +23,18 @@
 	--tjs-dark-bg: #13110b;
 
 	--theme-color: var(--tjs-red-7);
+	--surface-1: var(--gray-4);
+
+	--link: maroon;
+	--title-color: rgb(255, 193, 36);
 
 	accent-color: var(--theme-color);
 }
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--link: rgb(255, 59, 59);
+		--title-color: var(--yellow-6);
+		--surface-1: var(--gray-9);
+	}
+}
diff --git a/src/layouts/BlogPost/styles.css b/src/layouts/BlogPost/styles.css
@@ -18,7 +18,7 @@
 }
 
 #post-contents :is(h2, h3, h4, h5, h6) {
-	color: var(--yellow-6);
+	color: var(--title-color);
 	text-shadow: var(--size-1) var(--size-1) var(--size-1) var(--tjs-dark-bg);
 }