refactor /admin/customize

lib/views/admin/customize.html

@@ -55,11 +55,11 @@
           <div id="themeOptions">
           {# Light Themes #}
             <div class="d-flex">
-              {% include 'widget/theme-colorbox.html' with { themeName: 'default' } %}
-              {% include 'widget/theme-colorbox.html' with { themeName: 'nature' } %}
+              {% include 'widget/theme-colorbox.html' with { name: 'default',  bg: '#ffffff', topbar: '#334455', theme: '#112744' } %}
+              {% include 'widget/theme-colorbox.html' with { name: 'nature',   bg: '#f9fff3', topbar: '#118050', theme: '#460039' } %}
             </div>
             <div class="d-flex">
-              {% include 'widget/theme-colorbox.html' with { themeName: 'default-dark' } %}
+              {% include 'widget/theme-colorbox.html' with { name: 'default-dark', bg: '#212731', topbar: '#151515', theme: '#f75b36' } %}
             </div>
           {# Dark Themes #}
           </div>

lib/views/admin/widget/theme-colorbox.html

@@ -1,13 +1,13 @@
-<a id="theme-option-{{themeName}}" href="#"
-    class="{{themeName}} {% if themeName === settingForm['customize:theme'] %}active{% endif %}"
-    onclick="selectTheme('{{themeName}}')"
-    data-theme="{{ webpack_asset('style-theme-' + themeName).css }}">
+<a id="theme-option-{{name}}" href="#"
+    class="{{name}} {% if name === settingForm['customize:theme'] %}active{% endif %}"
+    onclick="selectTheme('{{name}}')"
+    data-theme="{{ webpack_asset('style-theme-' + name).css }}">
 
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
     <g>
-      <path class="color1" d="M -1 -1 L65 -1 L65 65 L-1 65 L-1 -1 Z" fill="#ccc"></path>
-      <path class="color2" d="M -1 -1 L65 -1 L65 15 L-1 15 L-1 -1 Z" fill="#000"></path>
-      <path class="color3" d="M 44 15 L65 15 L65 65 L44 65 L44 15 Z" fill="#300"></path>
+      <path d="M -1 -1 L65 -1 L65 65 L-1 65 L-1 -1 Z" fill="{{bg}}"></path>
+      <path d="M -1 -1 L65 -1 L65 15 L-1 15 L-1 -1 Z" fill="{{topbar}}"></path>
+      <path d="M 44 15 L65 15 L65 65 L44 65 L44 15 Z" fill="{{theme}}"></path>
     </g>
   </svg>
 

resource/styles/scss/_admin.scss

@@ -92,40 +92,5 @@
         background-color: $brand-success;
       }
     }
-
-    // theme color
-    .default {
-      .color1 {
-        fill: white;
-      }
-      .color2 {
-        fill: #334455;
-      }
-      .color3 {
-        fill: #112744;
-      }
-    }
-    .default-dark {
-      .color1 {
-        fill: #212731;
-      }
-      .color2 {
-        fill: #151515;
-      }
-      .color3 {
-        fill: #f75b36;
-      }
-    }
-    .nature {
-      .color1 {
-        fill: #f9fff3;
-      }
-      .color2 {
-        fill: #118050;
-      }
-      .color3 {
-        fill: #460039;
-      }
-    }
   }
 }