show theme name

src/client/styles/agile-admin/inverse/colors/_apply-colors-dark.scss

@@ -156,7 +156,7 @@ legend {
  */
 .admin-page {
   #themeOptions {
-    a.active {
+    .theme-option-container.active a {
       background-color: darken($themecolor,15%);
       border-color: darken($themecolor,15%);
     }

src/client/styles/agile-admin/inverse/colors/_apply-colors-light.scss

@@ -72,7 +72,7 @@
  */
 .admin-page {
   #themeOptions {
-    a.active {
+    .theme-option-container.active a {
       background-color: lighten($themecolor,20%);
       border-color: lighten($themecolor,20%);
     }

src/client/styles/agile-admin/inverse/colors/_apply-colors.scss

@@ -372,3 +372,16 @@ body.on-edit {
   border-top-color: $border;
   background-color: darken($bodycolor, 2%);
 }
+
+/*
+ * GROWI admin page #themeOptions
+ */
+ .admin-page {
+  #themeOptions {
+    .theme-option-container.active {
+      .theme-option-name {
+        color: $bodytext;
+      }
+    }
+  }
+}

src/client/styles/scss/_admin.scss

@@ -85,24 +85,31 @@
   // theme selector
   #themeOptions {
     // layout
-    a {
-      margin-right: 10px;
-      margin-bottom: 10px;
-      padding: 3px;
+    .theme-option-container {
+      min-width: 100px;
+      a {
+        margin-right: 10px;
+        margin-bottom: 10px;
+        padding: 3px;
 
-      svg {
-        display: block;
+        svg {
+          display: block;
+        }
       }
     }
 
     // style
-    a {
+    .theme-option-container a {
       border: 1px solid #ccc;
       background-color: #f5f5f5;
-
-      &.active {
-        border-color: $brand-success;
-        background-color: $brand-success;
+    }
+    .theme-option-name {
+      opacity: 0.3;
+    }
+    // style (active)
+    .theme-option-container.active {
+      .theme-option-name {
+        opacity: 1;
       }
     }
   }

src/server/views/admin/customize.html

@@ -73,7 +73,7 @@
               {% include 'widget/theme-colorbox.html' with { name: 'island',   bg: '#8ecac0', topbar: '#0c2a44', theme: '#cef2ef' } %}
             </div>
             {# Dark Themes #}
-            <div class="d-flex">
+            <div class="d-flex mt-3">
               {% include 'widget/theme-colorbox.html' with { name: 'default-dark', bg: '#212731', topbar: '#151515', theme: '#f75b36' } %}
               {% include 'widget/theme-colorbox.html' with { name: 'future', bg: '#16282D', topbar: '#011414', theme: '#04B4AE' } %}
               {% include 'widget/theme-colorbox.html' with { name: 'blue-night', bg: '#061F2F', topbar: '#27343B', theme: '#0090C8' } %}

src/server/views/admin/widget/theme-colorbox.html

@@ -1,15 +1,16 @@
-<a id="theme-option-{{name}}" href="#"
-    class="{{name}} {% if name === settingForm['customize:theme'] %}active{% endif %}"
+<div id="theme-option-{{name}}" class="theme-option-container d-flex flex-column align-items-center {% if name === settingForm['customize:theme'] %}active{% endif %}">
+  <a class="m-0" href="#"
+    class="{{name}}"
     onclick="selectTheme('{{name}}')"
     data-theme="{{ webpack_asset('styles/theme-' + name + '.css') }}">
 
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
-    <title>{{name}}</title>
-    <g>
-      <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>
-
-</a>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+      <g>
+        <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>
+  </a>
+  <span class="theme-option-name"><b>{{name}}</b></span>
+</div>