From 70b9f2e90bbd3776a83dcc85e6ba89d95e341f64 Mon Sep 17 00:00:00 2001
From: David Luevano Alvarado <david@luevano.xyz>
Date: Sat, 27 Feb 2021 02:49:34 -0700
Subject: Actually fix light-dark button, feels nice

---
 static/css/dark.css          | 14 ++++++++++++--
 static/css/general_style.css | 15 +++++++++++++++
 static/css/light.css         | 14 ++++++++++++--
 3 files changed, 39 insertions(+), 4 deletions(-)

(limited to 'static')

diff --git a/static/css/dark.css b/static/css/dark.css
index 29af64b..13a3ea3 100644
--- a/static/css/dark.css
+++ b/static/css/dark.css
@@ -20,10 +20,12 @@
   --fg-acc4: var(--color14);
   --fg-acc5: var(--color15);
 
-  --switch-bg: var(--color1);
-  --switch-slider: var(--color4);
+  --switch-bg: var(--color3);
+  --switch-slider: var(--color0);
   --switch-toggled-bg: var(--color10);
   --switch-ol: var(--color4);
+  --switch-moon: var(--color3);
+  --switch-sun: var(--color13);
 }
 
 html {
@@ -61,6 +63,14 @@ h3 {
   background-color: var(--switch-bg);
 }
 
+#theme-switcher-container i.fa-moon {
+  color: var(--switch-moon);
+}
+
+#theme-switcher-container i.fa-sun {
+  color: var(--switch-sun);
+}
+
 .slider:before {
   background-color: var(--switch-slider);
 }
diff --git a/static/css/general_style.css b/static/css/general_style.css
index e49edb7..a4e032e 100644
--- a/static/css/general_style.css
+++ b/static/css/general_style.css
@@ -26,6 +26,21 @@ a{
   height: 1rem;
 }
 
+/* specifically the theme switcher */
+#theme-switcher-container {
+  position: absolute;
+  top: 1.6em;
+  --hardcoded-pos: calc(50vw - 25.2em);
+  --resized-pos: calc(0.4px + 0.5em);
+  --calculated-pos: max(var(--hardcoded-pos), var(--resized-pos));
+  right: var(--calculated-pos);
+}
+
+#theme-switcher-container i {
+  position: relative;
+  top: -0.2em;
+}
+
 .switch input {
   opacity: 0;
   width: 0;
diff --git a/static/css/light.css b/static/css/light.css
index cee7f22..b295ccf 100644
--- a/static/css/light.css
+++ b/static/css/light.css
@@ -20,10 +20,12 @@
   --fg-acc4: var(--color14);
   --fg-acc5: var(--color15);
 
-  --switch-bg: var(--color1);
+  --switch-bg: var(--color3);
   --switch-slider: var(--color4);
   --switch-toggled-bg: var(--color10);
-  --switch-ol: var(--color4);
+  --switch-ol: var(--color0);
+  --switch-moon: var(--color3);
+  --switch-sun: var(--color13);
 }
 
 html {
@@ -61,6 +63,14 @@ h3 {
   background-color: var(--switch-bg);
 }
 
+#theme-switcher-container i.fa-moon {
+  color: var(--switch-moon);
+}
+
+#theme-switcher-container i.fa-sun {
+  color: var(--switch-sun);
+}
+
 .slider:before {
   background-color: var(--switch-slider);
 }
-- 
cgit v1.2.3-70-g09d2