switch more colors over to variables

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;

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.

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);

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);

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);
 	}
 }