updated style with dark mode and theme color selector variables

1 files changed, 69 insertions, 11 deletions

diff --git a/style.css b/style.css
index f3428ea..b189cb5 100644
--- a/style.css
+++ b/style.css
@@ -1,23 +1,81 @@
+:root{
+	--dark-theme-check: 1;
+	--theme-color-check: 1;
+	--accent-color-check: 1;
+	--theme-hue: 90;
+	--accent-offset: 60;
+	--accent-hue: calc(var(--theme-hue) + var(--accent-offset));
+	
+	/* Contrast hue - the color for hyperlinks and selection.
+	Default hue is 210, but we want it the +180 opposite hue of theme if there is a theme color.*/
+	--theme-contrast-hue: calc(calc(var(--theme-hue) + 180) * var(--theme-color-check));
+	--default-contrast-hue: calc(210 - calc(var(--theme-color-check) * 210));
+	--contrast-hue: calc(var(--theme-contrast-hue) + var(--default-contrast-hue));
+
+	--foreground-lightness: calc(10% + calc(var(--dark-theme-check) * 70%));
+	--background-lightness: calc(80% - calc(var(--dark-theme-check) * 70%));
+	--contrast-lightness: calc(30% + calc(var(--dark-theme-check) * 55%));
+	--foreground-theme-color: hsl(
+		var(--theme-hue),
+		calc(var(--theme-color-check) * 100%),
+		var(--foreground-lightness)
+		);
+	--background-theme-color: hsl(
+		var(--theme-hue),
+		calc(var(--theme-color-check) * 25%),
+		var(--background-lightness)
+		);
+	--foreground-accent-color: hsl(
+		var(--accent-hue),
+		calc(var(--accent-color-check) * 100%),
+		var(--foreground-lightness)
+		);
+	--background-accent-color: hsl(
+		var(--accent-hue),
+		calc(var(--accent-color-check) * 100%),
+		var(--background-lightness)
+		);
+	--contrast-color: hsl(var(--contrast-hue), 100%, var(--contrast-lightness));				
+}
+
+::selection {
+	background-color: var(--contrast-color);
+	color: hsl(0, 0%, var(--background-lightness));
+}
+
 body {
-	background-color: black;
+	color: var(--foreground-theme-color);
+	background-color: var(--background-theme-color);
+}
+
+hr {
+	color: var(--foreground-accent-color);
+}
+
+nav {
+	color: var(--foreground-accent-color);
+}
+
+h1 {
+	color: var(--foreground-accent-color);
 }
 
-h1  {
-	color : magenta;
+h2 {
+	color: var(--foreground-accent-color);
 }
 
-h2  {
-	color : cyan;
+h3 {
+	color: var(--foreground-accent-color);
 }
 
-h3  {
-	color : yellow;
+a {
+	color: var(--contrast-color);
 }
 
-p {
-	color: white;
+a:visited {
+	color: hsl(calc(var(--contrast-hue) + 60), 100%, var(--contrast-lightness))
 }
 
-li {
-	color: white;
+a:hover {
+	color: hsl(calc(var(--contrast-hue) - 150), 100%, var(--contrast-lightness))
 }
\ No newline at end of file