organize theme-colorbox widget

lib/views/admin/customize.html

@@ -52,26 +52,16 @@
         <fieldset>
           <legend>{{ t('customize_page.Theme') }}</legend>
 
-          <div id="themeOptions" class="d-flex">
-            <a id="theme-option-default" href="#"
-                class="default {% if 'default' === settingForm['customize:theme'] %}active{% endif %}"
-                onclick="selectTheme('default')"
-                data-theme="{{ webpack_asset('style-theme-default').css }}">
-              {% include 'widget/theme-colorbox.html' %}
-            </a>
-            <a id="theme-option-default-dark" href="#"
-                class="default-dark {% if 'default-dark' === settingForm['customize:theme'] %}active{% endif %}"
-                onclick="selectTheme('default-dark')"
-                data-theme="{{ webpack_asset('style-theme-default-dark').css }}">
-              {% include 'widget/theme-colorbox.html' %}
-            </a>
-            <a id="theme-option-nature" href="#"
-                class="nature {% if 'nature' === settingForm['customize:theme'] %}active{% endif %}"
-                onclick="selectTheme('nature')"
-                data-theme="{{ webpack_asset('style-theme-nature').css }}">
-              {% include 'widget/theme-colorbox.html' %}
-            </a>
-
+          <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' } %}
+            </div>
+            <div class="d-flex">
+              {% include 'widget/theme-colorbox.html' with { themeName: 'default-dark' } %}
+            </div>
+          {# Dark Themes #}
           </div>
 
           <div class="form-group">

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

@@ -1,7 +1,14 @@
-<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>
-  </g>
-</svg>
+<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 }}">
+
+  <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>
+    </g>
+  </svg>
+
+</a>