Theme switching uses CSS variables

4 files changed, 56 insertions, 27 deletions

diff --git a/static/css/aafu.css b/static/css/aafu.css
index 7942d28..a51d565 100644
--- a/static/css/aafu.css
+++ b/static/css/aafu.css
@@ -2,6 +2,8 @@ body {
   font-family: "Roboto", sans-serif;
   overflow-y: scroll;
   transition: all 0.15s;
+  background-color: var(--primaryBg);
+  color: var(--primaryText);
 }
 code {
   font-family: "Roboto Mono", monospace !important;
@@ -19,6 +21,38 @@ h3,
 h4 {
   font-family: "Didact Gothic", sans-serif;
 }
+a,
+a:hover,
+.accordion,
+.accordion:hover {
+  color: var(--primaryLinks);
+}
+.profile-area a,
+.profile-area .accordion:hover,
+.social-icons * {
+  color: var(--secondaryLinks);
+}
+.fa-toggle-on,
+.fa-toggle-off {
+  color: var(--primaryLinks);
+}
+.skillbar {
+  background-color: var(--primaryBg);
+  border: solid 1px var(--primaryText);
+}
+#skill-percent {
+  background-color: var(--primaryLinks);
+}
+.profile-area {
+  background-color: var(--secondaryBg);
+  color: var(--secondaryText);
+}
+.shadow {
+  box-shadow: -4px -4px 5px 2px var(--shadow) !important;
+}
+.top-h1 {
+  font-size: 2.5em;
+}
 .zoomlink {
   font-size: 2em;
 }
@@ -30,15 +64,24 @@ h4 {
   max-height: 0;
   transition: 0.3s ease-out;
 }
-.toggleSwitchContainer {
-  position: absolute;
-  top: 15px;
-  left: 15px;
-}
 .skillbar {
   border-radius: 3px;
 }
 #skill-percent {
   height: 15px;
   transition: all 0.7s;
+}
+.pagination * {
+  background-color: var(--primaryBg) !important;
+  color: var(--primaryLinks) !important;
+}
+.page-item {
+  border: solid 1px var(--primaryLinks) !important;
+}
+.page-item.disabled * {
+  color: var(--primaryText) !important;
+}
+.page-item.active * {
+  color: var(--secondaryText) !important;
+  background-color: var(--secondaryBg) !important;
 }
\ No newline at end of file
diff --git a/static/css/aafu_dark.css b/static/css/aafu_dark.css
index ddf214d..08c446f 100644
--- a/static/css/aafu_dark.css
+++ b/static/css/aafu_dark.css
@@ -5,7 +5,10 @@ body {
 
 .profile-area {
   background-color: #373737;
-  box-shadow: -4px -4px 5px 2px black;
+}
+
+.shadow {
+  box-shadow: -4px -4px 5px 2px black !important;
 }
 
 a,
diff --git a/static/css/aafu_light.css b/static/css/aafu_light.css
index 711b890..fd40910 100644
--- a/static/css/aafu_light.css
+++ b/static/css/aafu_light.css
@@ -1,24 +1,4 @@
-body {
-  background-color: #f8f9fa;
-  color: black;
-}
 
-.profile-area {
-  background-color: #fff;
-  box-shadow: -4px -4px 5px 2px #595659;
-}
 
-a,
-.accordion,
-.social-icons * {
-  color: #007bff;
-}
 
-.skillbar {
-  background-color: #fff;
-  border: solid 1px black;
-}
 
-#skill-percent {
-  background-color: #007bff;
-}
diff --git a/static/css/aafu_pinkish.css b/static/css/aafu_pinkish.css
index e820610..9310bbf 100644
--- a/static/css/aafu_pinkish.css
+++ b/static/css/aafu_pinkish.css
@@ -6,7 +6,10 @@ body {
 .profile-area {

   background-color: #81415f;

   color: white;

-  box-shadow: -4px -4px 5px 2px #595659;

+}

+

+.shadow {

+  box-shadow: -4px -4px 5px 2px #595659 !important;

 }

 

 a,