[design] add theme preset

src/css/theme.css

@@ -367,3 +367,23 @@
 .theme-preset-accent-whoosh {
   background-color: rgb(var(--theme-preset-accent-whoosh))
 }
+
+.theme-preset-background-eldergold-01 {
+  background-color: rgb(var(--theme-preset-background-eldergold-01))
+}
+
+.theme-preset-background-eldergold-02 {
+  background-color: rgb(var(--theme-preset-background-eldergold-02))
+}
+
+.theme-preset-background-eldergold-03 {
+  background-color: rgb(var(--theme-preset-background-eldergold-03))
+}
+
+.theme-preset-background-eldergold-04 {
+  background-color: rgb(var(--theme-preset-background-eldergold-04))
+}
+
+.theme-preset-accent-eldergold {
+  background-color: rgb(var(--theme-preset-accent-eldergold))
+}

src/index.html

@@ -1477,6 +1477,18 @@
                   <span class="button-text small">Whoosh</span>
                 </button>
               </div>
+              <div class="button-wrap form-inline">
+                <button class="control-theme-preset-eldergold theme-preset-button button mb-0" tabindex="-1">
+                  <div class="theme-preset-preview">
+                    <span class="theme-preset-background-01 theme-preset-background-eldergold-01"></span>
+                    <span class="theme-preset-background-02 theme-preset-background-eldergold-02"></span>
+                    <span class="theme-preset-background-03 theme-preset-background-eldergold-03"></span>
+                    <span class="theme-preset-background-04 theme-preset-background-eldergold-04"></span>
+                    <span class="theme-preset-accent theme-preset-accent-eldergold"></span>
+                  </div>
+                  <span class="button-text small">Elder Gold</span>
+                </button>
+              </div>
             </div>
           </div>
           <div class="menu-item">

src/js/control.js

@@ -2740,6 +2740,21 @@ var control = (function() {
       render.update();
       render.class();
     }
+  }, {
+    element: helper.e(".control-theme-preset-eldergold"),
+    type: "button",
+    func: function() {
+      theme.preset("eldergold");
+      theme.render.font.display();
+      theme.render.font.ui();
+      theme.style.check();
+      theme.render.color.shade();
+      theme.render.accent.color();
+      theme.render.radius();
+      link.groupAndItems();
+      render.update();
+      render.class();
+    }
   }, {
     element: helper.e(".control-theme-style-dark"),
     path: "theme.style",

src/js/theme.js

@@ -490,6 +490,31 @@ var theme = (function() {
         },
         radius: 1.2,
         style: "dark"
+      },
+      eldergold: {
+        font: {
+          display: "Life Savers",
+          ui: "Quicksand"
+        },
+        color: {
+          hsl: {
+            h: 209,
+            s: 50,
+            l: 45
+          },
+          rgb: {
+            r: 58,
+            g: 118,
+            b: 175
+          }
+        },
+        accent: {
+          r: 255,
+          g: 160,
+          b: 0
+        },
+        radius: 0.5,
+        style: "dark"
       }
     }
   };