1 files changed, 64 insertions, 0 deletions
diff --git a/src/scss/styles/_variables.scss b/src/scss/styles/_variables.scss
new file mode 100644
index 0000000..69c1662
--- /dev/null
+++ b/src/scss/styles/_variables.scss
@@ -0,0 +1,64 @@
+:root {
+    /* Light mode */
+    --light-text:           #000000;
+    --light-aside-text:     #FFFFFF;
+    --light-p-bg:           #080808;
+    --light-s-bg:           #FFFFFF;
+    --light-link:           #1976D2;
+    --light-link-visited:   #7755FF;
+    --light-link-hover:     #FFC20E;
+    --light-border:         #1976D2;
+    --light-button:         #004BA0;
+    --light-button-text:    #FFFFFF;
+    --light-button-hover:   #1976D2;
+    --light-button-border:  #080808;
+    --light-search-text:    #FFFFFF;
+    --light-switch-icon:    url("/dist/images/icons/sun.svg");
+    --light-switch-shadow:  #373D4E;
+    --light-switch-p-bg:    #1976d2;
+    --light-switch-s-bg:    #FFFFFF;
+    --light-switch-border:  #1976d2;
+    --light-switch-transform: translate(0%, 0%);
+
+    /* Dark mode */
+    --dark-text:            #FFFFFF;
+    --dark-aside-text:      #FFFFFF;
+    --dark-p-bg:            #080808;
+    --dark-s-bg:            #101010;
+    --dark-link:            #1976D2;
+    --dark-link-visited:    #7755FF;
+    --dark-link-hover:      #FFC20E;
+    --dark-border:          #1976D2;
+    --dark-button:          #004BA0;
+    --dark-button-text:     #FFFFFF;
+    --dark-button-hover:    #1976D2;
+    --dark-button-border:   #080808;
+    --dark-search-text:     #FFFFFF;
+    --dark-switch-icon:     url("/dist/images/icons/moon.svg");
+    --dark-switch-shadow:   #FCE477;
+    --dark-switch-p-bg:     #1976d2;
+    --dark-switch-s-bg:     #080808;
+    --dark-switch-border:   #1976d2;
+    --dark-switch-transform: translate(74%, 0%);
+
+    /* Default mode */
+    --text:          var(--dark-text);
+    --aside-text:    var(--dark-aside-text);
+    --p-background:  var(--dark-p-bg);
+    --s-background:  var(--dark-s-bg);
+    --link:          var(--dark-link);
+    --link-visited:  var(--dark-link-visited);
+    --link-hover:    var(--dark-link-hover);
+    --border:        var(--dark-border);
+    --button:        var(--dark-button);
+    --button-text:   var(--dark-button-text);
+    --button-hover:  var(--dark-button-hover);
+    --button-border: var(--dark-button-border);
+    --search-text:   var(--dark-search-text);
+    --switch-icon:   var(--dark-switch-icon);
+    --switch-shadow-color: var(--dark-switch-shadow);
+    --switch-p-bg: var(--dark-switch-p-bg);
+    --switch-s-bg: var(--dark-switch-s-bg);
+    --switch-border: var(--dark-switch-border);
+    --switch-transform: var(--dark-switch-transform);
+}