Add multiple color palettes

assets/scss/palettes/blue.scss

@@ -0,0 +1,82 @@
+/*
+* Blue palette
+*/
+
+@import "common.scss";
+
+/*
+*   Global style
+*/
+:root {
+    --body-background: #e7f5ff;
+
+    --accent-color: #2e8edd;
+    --accent-color-darker: #1864ab;
+    --accent-color-text: #ffffff;
+    --body-text-color: #1c7ed6;
+
+    --scrollbar-thumb: #a5d8ff;
+
+    &[data-scheme="dark"] {
+        --body-background: #001b33;
+        --accent-color: #4dabf7;
+        --accent-color-darker: #228be6;
+        --accent-color-text: #ffffff;
+        --body-text-color: rgba(255,255,255,0.8);
+        --scrollbar-thumb: #1864ab;
+    }
+}
+
+/*
+*   Card style
+*/
+:root {
+    --card-background: #f1f9ff;
+    --card-background-selected: #dbeeff;
+
+    --card-text-color-main: #000;
+    --card-text-color-secondary: #5b6b77;
+    --card-text-color-tertiary: #5a6b78;
+    --card-separator-color: rgba(139,173,206,0.5);
+
+    &[data-scheme="dark"] {
+        --card-background: #2b3e50;
+        --card-background-selected: rgba(255,255,255,0.16);
+        --card-text-color-main: rgba(255,255,255,0.9);
+        --card-text-color-secondary: rgba(255,255,255,0.7);
+        --card-text-color-tertiary: rgba(255,255,255,0.5);
+        --card-separator-color: rgba(255,255,255,0.12);
+    }
+}
+
+/*
+*   Article content style
+*/
+:root {
+    --blockquote-background-color: #e1f3fe;
+
+    --link-background-color: 189, 195, 199;
+
+    --pre-background-color: #fafafa;
+    --pre-text-color: #272822;
+
+    --code-background-color: rgba(0, 0, 0, 0.12);
+    --code-text-color: #808080;
+
+    --table-border-color: #339af0;
+    --tr-even-background-color: #e1f3fe;
+
+    --kbd-border-color: #339af0;
+
+    &[data-scheme="dark"] {
+        --pre-background-color: #272822;
+        --pre-text-color: #fafafa;
+        --code-background-color: #272822;
+        --code-text-color: rgba(255,255,255,0.9);
+
+        --table-border-color: #2b5b82;
+        --tr-even-background-color: #002e55;
+
+        --blockquote-background-color: #002e55;
+    }
+}

assets/scss/variables.scss → assets/scss/palettes/common.scss

@@ -1,3 +1,7 @@
+/*
+* common scss across all palettes
+*/
+
 $defaultTagBackgrounds: #8ea885, #df7988, #0177b8, #ffb900, #6b69d6;
 $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 
@@ -11,27 +15,13 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
         --main-top-padding: 50px;
     }
 
-    --body-background: #f5f5fa;
-
-    --accent-color: #34495e;
-    --accent-color-darker: #2c3e50;
-    --accent-color-text: #fff;
-    --body-text-color: #707070;
-
     --tag-border-radius: 4px;
 
     --section-separation: 40px;
 
-    --scrollbar-thumb: hsl(0, 0%, 85%);
     --scrollbar-track: var(--body-background);
 
     &[data-scheme="dark"] {
-        --body-background: #303030;
-        --accent-color: #ecf0f1;
-        --accent-color-darker: #bdc3c7;
-        --accent-color-text: #000;
-        --body-text-color: rgba(255, 255, 255, 0.7);
-        --scrollbar-thumb: hsl(0, 0%, 40%);
         --scrollbar-track: var(--body-background);
     }
 }
@@ -51,14 +41,6 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 *   Card style
 */
 :root {
-    --card-background: #fff;
-    --card-background-selected: #eaeaea;
-
-    --card-text-color-main: #000;
-    --card-text-color-secondary: #747474;
-    --card-text-color-tertiary: #767676;
-    --card-separator-color: rgba(218, 218, 218, 0.5);
-
     --card-border-radius: 10px;
 
     --card-padding: 20px;
@@ -76,15 +58,6 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
     @include respond(md) {
         --small-card-padding: 25px;
     }
-
-    &[data-scheme="dark"] {
-        --card-background: #424242;
-        --card-background-selected: rgba(255, 255, 255, 0.16);
-        --card-text-color-main: rgba(255, 255, 255, 0.9);
-        --card-text-color-secondary: rgba(255, 255, 255, 0.7);
-        --card-text-color-tertiary: rgba(255, 255, 255, 0.5);
-        --card-separator-color: rgba(255, 255, 255, 0.12);
-    }
 }
 
 /**
@@ -106,34 +79,12 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 */
 :root {
     --blockquote-border-size: 4px;
-    --blockquote-background-color: rgb(248 248 248);
 
     --heading-border-size: 4px;
 
-    --link-background-color: 189, 195, 199;
     --link-background-opacity: 0.5;
     --link-background-opacity-hover: 0.7;
 
-    --pre-background-color: #272822;
-    --pre-text-color: #f8f8f2;
-
-    --code-background-color: rgba(0, 0, 0, 0.12);
-    --code-text-color: #808080;
-
-    --table-border-color: #dadada;
-    --tr-even-background-color: #efefee;
-
-    --kbd-border-color: #dadada;
-
-    &[data-scheme="dark"] {
-        --code-background-color: #272822;
-        --code-text-color: rgba(255, 255, 255, 0.9);
-
-        --table-border-color: #717171;
-        --tr-even-background-color: #545454;
-
-        --blockquote-background-color: rgb(75 75 75);
-    }
 }
 
 /*

assets/scss/palettes/default.scss

@@ -0,0 +1,82 @@
+/*
+* Default palette
+*/
+
+@import "common.scss";
+
+/*
+*   Global style
+*/
+:root {
+    --body-background: #f5f5fa;
+
+    --accent-color: #34495e;
+    --accent-color-darker: #2c3e50;
+    --accent-color-text: #fff;
+    --body-text-color: #707070;
+
+    --scrollbar-thumb: hsl(0, 0%, 85%);
+
+    &[data-scheme="dark"] {
+        --body-background: #303030;
+        --accent-color: #ecf0f1;
+        --accent-color-darker: #bdc3c7;
+        --accent-color-text: #000;
+        --body-text-color: rgba(255, 255, 255, 0.7);
+        --scrollbar-thumb: hsl(0, 0%, 40%);
+    }
+}
+
+/*
+*   Card style
+*/
+:root {
+    --card-background: #fff;
+    --card-background-selected: #eaeaea;
+
+    --card-text-color-main: #000;
+    --card-text-color-secondary: #747474;
+    --card-text-color-tertiary: #767676;
+    --card-separator-color: rgba(218, 218, 218, 0.5);
+
+    &[data-scheme="dark"] {
+        --card-background: #424242;
+        --card-background-selected: rgba(255, 255, 255, 0.16);
+        --card-text-color-main: rgba(255, 255, 255, 0.9);
+        --card-text-color-secondary: rgba(255, 255, 255, 0.7);
+        --card-text-color-tertiary: rgba(255, 255, 255, 0.5);
+        --card-separator-color: rgba(255, 255, 255, 0.12);
+    }
+}
+
+/*
+*   Article content style
+*/
+:root {
+    --blockquote-background-color: rgb(248 248 248);
+
+    --link-background-color: 189, 195, 199;
+
+    --pre-background-color: #fafafa;
+    --pre-text-color: #272822;
+
+    --code-background-color: rgba(0, 0, 0, 0.12);
+    --code-text-color: #808080;
+
+    --table-border-color: #dadada;
+    --tr-even-background-color: #efefee;
+
+    --kbd-border-color: #dadada;
+
+    &[data-scheme="dark"] {
+        --pre-background-color: #272822;
+        --pre-text-color: #fafafa;
+        --code-background-color: #272822;
+        --code-text-color: rgba(255, 255, 255, 0.9);
+
+        --table-border-color: #717171;
+        --tr-even-background-color: #545454;
+
+        --blockquote-background-color: rgb(75 75 75);
+    }
+}

assets/scss/palettes/green.scss

@@ -0,0 +1,82 @@
+/*
+* Green palette
+*/
+
+@import "common.scss";
+
+/*
+*   Global style
+*/
+:root {
+    --body-background: #e7ffe7;
+
+    --accent-color: #2ecc71;
+    --accent-color-darker: #28a745;
+    --accent-color-text: #ffffff;
+    --body-text-color: #1c7e1c;
+
+    --scrollbar-thumb: #a5f5a5;
+
+    &[data-scheme="dark"] {
+        --body-background: #001b12;
+        --accent-color: #4daf7f;
+        --accent-color-darker: #228b45;
+        --accent-color-text: #ffffff;
+        --body-text-color: rgba(255,255,255,0.8);
+        --scrollbar-thumb: #186d34;
+    }
+}
+
+/*
+*   Card style
+*/
+:root {
+    --card-background: #f1fff1;
+    --card-background-selected: #dbeedb;
+
+    --card-text-color-main: #000;
+    --card-text-color-secondary: #5b776b;
+    --card-text-color-tertiary: #5a6b5a;
+    --card-separator-color: rgba(139,173,139,0.5);
+
+    &[data-scheme="dark"] {
+        --card-background: #2b503e;
+        --card-background-selected: rgba(0,128,0,0.16);
+        --card-text-color-main: rgba(255,255,255,0.9);
+        --card-text-color-secondary: rgba(255,255,255,0.7);
+        --card-text-color-tertiary: rgba(255,255,255,0.5);
+        --card-separator-color: rgba(139,173,139,0.12);
+    }
+}
+
+/*
+*   Article content style
+*/
+:root {
+    --blockquote-background-color: #e1fbe1;
+
+    --link-background-color: 189, 199, 189;
+
+    --pre-background-color: #fafafa;
+    --pre-text-color: #272822;
+
+    --code-background-color: rgba(0, 0, 0, 0.12);
+    --code-text-color: #808080;
+
+    --table-border-color: #33aa33;
+    --tr-even-background-color: #e1fbe1;
+
+    --kbd-border-color: #33aa33;
+
+    &[data-scheme="dark"] {
+        --pre-background-color: #272822;
+        --pre-text-color: #fafafa;
+        --code-background-color: #272822;
+        --code-text-color: rgba(255,255,255,0.9);
+
+        --table-border-color: #2b7b2b;
+        --tr-even-background-color: #002e22;
+
+        --blockquote-background-color: #002e22;
+    }
+}