feat(color): add new color scheme

- cyan (default), nord, orange, teal

Close #40

Author: adorade

README.md

@@ -58,7 +58,7 @@ To build the theme or customize it with your preferences you must have **Node**,
 1. Open your command-line and navigate to your projects folder
 2. Clone this repo locally: `git clone https://github.com/adorade/boodark .`
 3. Install project dependecies: `yarn install`
-4. Do any modifications you want
+4. Do any modifications you want (eg. change color scheme)
 5. Compile `scss` files to `css`
 
     ```sh
@@ -70,6 +70,34 @@ To build the theme or customize it with your preferences you must have **Node**,
 
 6. Theme files are in `themes/boodark`.
 
+## Color Scheme
+
+BooDark has several color schemes: _cyan_ (default), _teal_, _nord_ and _orange_. There is currently no way to change the color scheme in GUI.
+
+**How to change color scheme?**
+
+Option 1. Edit `scss/_variables.scss` (see [Building](#building))
+
+```scss
+// Theme color scheme
+// Values: "cyan", "teal", "nord", "orange"
+// Default: "cyan"
+// Set this value for the desired color scheme
+// Change cyan
+$color-scheme: cyan !default;
+// to nord
+$color-scheme: nord !default;
+
+// then run `yarn run build`
+```
+
+Option 2. Replace the CSS files. For example:
+
+```sh
+mv themes/boodark/css/theme.css themes/boodark/css/theme-cyan.css
+mv themes/boodark/css/theme-nord.css themes/boodark/css/theme.css
+```
+
 ## Bugs and feature requests
 
 Have a bug or a feature request? Please search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/adorade/boodark/issues/new).

themes/boodark/css/theme-nord.css

@@ -468,7 +468,7 @@ div#tablestatistics table {
 
   .dropdown-toggle {
     &::after {
-      color: $pma-cyan;
+      color: $pma-link-color;
     }
   }
 }
@@ -1473,7 +1473,7 @@ input#auto_increment_opt {
       background: none;
 
       &:hover {
-        color: $pma-cyan;
+        color: $pma-link-color;
         cursor: pointer;
       }
     }
@@ -1713,7 +1713,7 @@ table.show_create {
   background: rgba($pma-body-bg, .8);
   height: 100%;
   z-index: 999;
-  color: $pma-cyan;
+  color: $pma-link-color;
   font-size: 30pt;
   text-align: center;
   padding-top: 20%;

themes/boodark/css/theme-nord.css.map

@@ -3,7 +3,7 @@
 // Icons
 
 // Icon Colors
-$svg-color:     $pma-link-color;          // #0dcaf0, $pma-cyan
+$svg-color:     $pma-link-color;          // #0dcaf0, default color scheme: cyan
 $disable-color: $pma-disable-color;       // #adb5bd
 $ajax-color:    $pma-body-color;          // #fff
 $green-color:   $pma-green;               // #198754

themes/boodark/css/theme-orange.css

@@ -0,0 +1,14 @@
+// List group
+
+#li_select_theme {
+  form::after {
+    padding-top: 0.325rem;
+    padding-left: calc(var(--bs-gutter-x) * .5);
+    content: "Scheme: #{$color-scheme} / Version: #{$pma-theme-version}";
+    color: $pma-link-color;
+
+    @include media-breakpoint-up(lg) {
+      padding-top: 0;
+    }
+  }
+}

themes/boodark/css/theme-orange.css.map

@@ -2,6 +2,9 @@
 // Variables
 // =============================================================================
 
+// Theme version
+$pma-theme-version: "1.0.4-dev";
+
 // PMA color system
 // -----------------------------------------------------------------------------
 $white:             #fff;
@@ -34,6 +37,7 @@ $pma-yellow:        #ffc107;
 $pma-green:         #198754;
 $pma-teal:          #20c997;
 $pma-cyan:          #0dcaf0;
+$pma-nord:          #88c0d0;
 
 // Theme Colors
 $pma-theme-colors: (
@@ -57,9 +61,25 @@ $pma-theme-colors: (
   "yellow":   $pma-yellow,
   "green":    $pma-green,
   "teal":     $pma-teal,
-  "cyan":     $pma-cyan
+  "cyan":     $pma-cyan,
+  "nord":     $pma-nord
 );
 
+// Theme color scheme
+// Values: "cyan", "teal", "nord", "orange"
+// Default: "cyan"
+// Set this value for the desired color scheme
+$color-scheme: cyan !default;
+$pma-color-scheme: $pma-cyan;
+
+@if $color-scheme == teal {
+  $pma-color-scheme: $pma-teal;
+} @else if $color-scheme == nord {
+  $pma-color-scheme: $pma-nord;
+} @else if $color-scheme == orange {
+  $pma-color-scheme: $pma-orange;
+}
+
 // PMA Base Style
 // -----------------------------------------------------------------------------
 $pma-body-color:              $white;
@@ -76,8 +96,8 @@ $pma-fieldset-bg:             $pma-gray-600;
 $pma-border-color:            $pma-gray-600;
 $pma-disable-color:           $pma-gray-500;
 $pma-cond-border-color:       $black;
-$pma-button-color:            $pma-cyan;
-$pma-link-color:              $pma-cyan;
+$pma-button-color:            $pma-color-scheme;
+$pma-link-color:              $pma-color-scheme;
 $pma-link-hover-color:        $pma-red;
 $pma-custom-color:            $pma-orange;
 

themes/boodark/css/theme-teal.css

@@ -0,0 +1,6 @@
+// stylelint-disable no-invalid-position-at-import-rule
+// Theme: boodark - color scheme nord
+
+$color-scheme: nord;
+
+@import "theme";

themes/boodark/css/theme-teal.css.map

@@ -0,0 +1,6 @@
+// stylelint-disable no-invalid-position-at-import-rule
+// Theme: boodark - color scheme orange
+
+$color-scheme: orange;
+
+@import "theme";

themes/boodark/css/theme.css

@@ -0,0 +1,6 @@
+// stylelint-disable no-invalid-position-at-import-rule
+// Theme: boodark - color scheme teal
+
+$color-scheme: teal;
+
+@import "theme";

themes/boodark/css/theme.css.map

@@ -27,7 +27,7 @@
 @import "breadcrumb";
 // @import "pagination";
 // @import "alert";
-// @import "list-group";
+@import "list-group";
 @import "modal";
 @import "console";
 @import "settings";