refactor: color scheme #1245 (#1253)

* refactor: color scheme

* refactor: colors in Tailwind Config

* fix: scss variables use error

* feat: partially adopt Prime Design for the dark theme

* feat: pick selection color

* feat: pick link color

* feat: pick codeblock, table, blockquote color

* feat: pick more colors

* refactor: remove black theme

* fix: code background color

* refactor: extract primitive colors

* refactor: use primitive colors in tailwind config

* chore: use --verbose

* chore: sync github CI build step

---------

Co-authored-by: PCloud <[email protected]>

.github/workflows/build.yml

@@ -32,4 +32,4 @@ jobs:
         run: npm install
 
       - name: Build
-        run: hugo -v --source=exampleSite --themesDir ../.. --gc
+        run: npm run build

README.md

@@ -99,7 +99,7 @@ the DoIt theme may be more suitable for you.
 ### Appearance and Layout
 
 * **Responsive** layout
-* **Light/Dark/Black** mode
+* **Light/Dark** mode
 * Globally consistent **design language**
 * **Pagination** supported
 * Easy-to-use and self-expanding **table of contents**

assets/css/_core/_base.scss

@@ -33,28 +33,13 @@ html {
 
 ::selection {
   background-color: $selection-color;
-
-  [theme=dark] & {
-    background-color: $selection-color-dark;
-  }
-  [theme=black] & {
-    background-color: $selection-color-black;
-  }
 }
 
 body {
   background-color: $global-background-color;
   color: $global-font-color;
   @include overflow-wrap(break-word);
   scrollbar-color: auto;
-  &[theme=dark] {
-    color: $global-font-color-dark;
-    background-color: $global-background-color-dark;
-  }
-  &[theme=black] {
-    color: $global-font-color-black;
-    background-color: $global-background-color-black;
-  }
 }
 
 @include ms;

assets/css/_mixin/_link.scss

@@ -3,24 +3,16 @@
     text-decoration: none;
 
     color: if($light, $global-link-color, $single-link-color);
-
-    [theme=dark] & {
-      color: if($dark, $global-link-color-dark, $single-link-color-dark);
-    }
-    [theme=black] & {
-      color: if($dark, $global-link-color-black, $single-link-color-black);
+    .dark & {
+      color: if($dark, $global-link-color, $single-link-color);
     }
   }
 
   a:active,
   a:hover {
     color: if($light, $global-link-hover-color, $single-link-hover-color);
-
-    [theme=dark] & {
-      color: if($dark, $global-link-hover-color-dark, $single-link-hover-color-dark);
-    }
-    [theme=black] & {
-      color: if($dark, $global-link-hover-color-black, $single-link-hover-color-black);
+    .dark & {
+      color: if($dark, $global-link-hover-color, $single-link-hover-color);
     }
   }
 }

assets/css/_page/_home.scss

@@ -58,13 +58,6 @@
       margin: 0;
       padding: .5rem;
       color: $global-font-secondary-color;
-
-      [theme=dark] & {
-        color: $global-font-secondary-color-dark;
-      }
-      [theme=black] & {
-        color: $global-font-secondary-color-black;
-      }
     }
   }
 }
@@ -85,15 +78,6 @@
     color: $global-font-color;
     border-bottom: 3px dashed $global-border-color;
 
-    [theme=dark] & {
-      color: $global-font-color-dark;
-      border-bottom: 3px dashed $global-border-color-dark;
-    }
-    [theme=black] & {
-      color: $global-font-color-black;
-      border-bottom: 3px dashed $global-border-color-black;
-    }
-
     .featured-image-preview {
       width: 100%;
       padding: 30% 0 0;
@@ -131,12 +115,6 @@
       @include overflow-wrap(break-word);
       color: $global-font-secondary-color;
 
-      [theme=dark] & {
-        color: $global-font-secondary-color-dark;
-      }
-      [theme=black] & {
-        color: $global-font-secondary-color-black;
-      }
 
       h2,
       h3,
@@ -162,13 +140,6 @@
 
       b, strong {
         color: $global-font-secondary-color;
-
-        [theme=dark] & {
-          color: $global-font-secondary-color-dark;
-        }
-        [theme=black] & {
-          color: $global-font-secondary-color-black;
-        }
       }
     }