From 4061fdd9becaa5e259624e72bf7089c567f5bd24 Mon Sep 17 00:00:00 2001
From: Alvie Rahman <alvierahman90@gmail.com>
Date: Thu, 14 Apr 2022 19:31:39 +0100
Subject: [PATCH] switch more colors over to variables

---
 base.css                  | 17 ++++++++++-------
 colors.txt                |  2 ++
 colors/base16-default.css |  2 ++
 colors/gruvbox.css        |  2 ++
 modules/darkmode.css      |  2 ++
 5 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/base.css b/base.css
index 1958264..cae2759 100644
--- a/base.css
+++ b/base.css
@@ -3,15 +3,20 @@
 	--dark: var(--colorscheme-dark);
 
 	--fg: var(--dark);
+	--fg-lc: var(--colorscheme-dark-lighter);
 	--bg: var(--light);
+	--bg-lc: var(#d9d9d9 );
+
+	--body-max-width: 800px;
+	--font-size: 16px;
 }
 
 body {
 	font-family: monospace, sans-serif;
 	color: var(--fg);
-	font-size: 16px;
+	font-size: var(--font-size);
 	margin: 2em auto;
-	max-width: 800px;
+	max-width: var(--body-max-width);
 	padding: 1em;
 	line-height: 1.4;
 	overflow-wrap: break-word;
@@ -34,20 +39,18 @@ table {
 
 th, td {
 	padding: 1em;
-	border: 1px solid #454545;
+	border: 1px solid var(--fg-lc);
 	margin: 0;
 }
 
 
-
 pre {
 	padding: 1em;
 	overflow: scroll;
 }
 
 code, pre{
-	background-color: #d9d9d9 ;
-	color: #000;
+	background-color: var(--bg-lc) ;
 }
 
 
@@ -66,7 +69,7 @@ li {
 
 
 blockquote {
-	border-left: 0.4em solid #454545;
+	border-left: 0.4em solid var(--fg-lc);
 	margin-left: 0;
 	padding-left: 1em;
 	padding-top: 0.5em;
diff --git a/colors.txt b/colors.txt
index ba0d864..2905079 100644
--- a/colors.txt
+++ b/colors.txt
@@ -16,7 +16,9 @@ switching between colorschemes easily)
 	--purple
 
 	--colorscheme-light
+	--colorscheme-light-darker
 	--colorscheme-dark
+	--colorscheme-dark-lighter
 
 colorschemes also have their own custom colors inside, which can be used if
 switching themes is not a concern.
diff --git a/colors/base16-default.css b/colors/base16-default.css
index e91afe0..847449e 100644
--- a/colors/base16-default.css
+++ b/colors/base16-default.css
@@ -30,7 +30,9 @@
 	--base16-brown: var(--base16-base0F);
 
 	--colorscheme-light: var(--base16-fg);
+	--colorscheme-light-darker: var(--base16-base04);
 	--colorscheme-dark: var(--base16-bg);
+	--colorscheme-dark-lighter: var(--base16-base01);
 
 	--orange: var(--base16-orange);
 	--red: var(--base16-red);
diff --git a/colors/gruvbox.css b/colors/gruvbox.css
index 1c7ab77..436a5ed 100644
--- a/colors/gruvbox.css
+++ b/colors/gruvbox.css
@@ -34,7 +34,9 @@
 	--gruvbox-gray:  #928374;
 
 	--colorscheme-light: var(--gruvbox-fg);
+	--colorscheme-light-darker: var(--gruvbox-fg4);
 	--colorscheme-dark: var(--gruvbox-bg);
+	--colorscheme-dark-lighter: var(--gruvbox-bg4);
 
 	--orange: var(--gruvbox-orange);
 	--red: var(--gruvbox-red);
diff --git a/modules/darkmode.css b/modules/darkmode.css
index 1084aee..aab393b 100644
--- a/modules/darkmode.css
+++ b/modules/darkmode.css
@@ -3,6 +3,8 @@
 @media (prefers-color-scheme: dark) {
 	:root {
 		--fg: var(--colorscheme-light);
+		--fg-lc: var(--colorscheme-light-darker);
 		--bg: var(--colorscheme-dark);
+		--bg-lc: var(--colorscheme-dark-lighter);
 	}
 }