completes working themes with system, dark and light working well.

syntaxfm · Sep 8, 2023 · 039ac02 · 039ac02
1 parent 692bbe9
commit 039ac02
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 7 deletions.
diff --git a/src/lib/ShowCard.svelte b/src/lib/ShowCard.svelte
@@ -13,7 +13,7 @@
 <article
 	class={display}
 	style={display === 'highlight'
-		? `--bg: var(--black); background-image:linear-gradient(to top, #00000000, var(--bg)), url(${white_grit})`
+		? `background-image:linear-gradient(to top, #00000000, var(--bg)), url(${white_grit})`
 		: '--bg=var(--bg-sheet)'}
 >
 	<a href={`/shows/${show.number}/${show.slug}`}>
@@ -85,8 +85,8 @@
 		}
 
 		&.highlight {
-			--fg: var(--bg-sheet);
-			--bg: var(--fg-sheet);
+			--bg: var(--bg-root);
+			--fg: var(--fg-root);
 			border: none;
 			grid-column: 1 / -1;
 		}

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -58,6 +58,8 @@
 
 <style lang="postcss">
 	.theme-wrapper {
+		--bg-root: var(--bg);
+		--fg-root: var(--fg);
 		min-height: 100vh;
 		border-top: var(--border);
 		border-color: var(--primary);

diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css
@@ -1,7 +1,7 @@
 /* System theme */
 .theme-system {
 	--bg-sheet: var(--white);
-	--bg: var(--blackish);
+	--bg: var(--black);
 	--fg: var(--white);
 	--fg-sheet: var(--black);
 	--primary: var(--yellow);
@@ -37,7 +37,7 @@
 
 .theme-light {
 	--bg-sheet: var(--white);
-	--bg: var(--blackish);
+	--bg: var(--black);
 	--fg: var(--white);
 	--fg-sheet: var(--black);
 	--primary: var(--yellow);

diff --git a/src/styles/variables.css b/src/styles/variables.css
@@ -131,9 +131,9 @@
 	/* Light Theme as the default */
 	/* Backgrounds */
 
-	--bg-sheet: var(--white);
-	--bg: var(--blackish);
+	--bg: var(--black);
 	--bg-1: var(--black-1);
+	--bg-sheet: var(--white);
 
 	/* Foreground */
 	--fg: var(--white);