add default-dark theme

config/webpack.common.js

@@ -29,6 +29,7 @@ module.exports = function (options) {
       'plugin':               './resource/js/plugin',
       'style':                './resource/styles/scss/style.scss',
       'style-theme-default':  './resource/styles/scss/theme/default.scss',
+      'style-theme-default-dark':  './resource/styles/scss/theme/default-dark.scss',
       'style-presentation':   './resource/styles/scss/style-presentation.scss',
     },
     externals: {

lib/views/layout-growi/widget/header.html

@@ -3,7 +3,7 @@
     <div class="d-flex align-items-center">
       <div class="title-logo-container hidden-xs hidden-sm">
         <a class="logo" href="/">
-          <div class="light-logo">{% include '../../widget/logo.html' %}</div>
+          <div class="logo-mark">{% include '../../widget/logo.html' %}</div>
         </a>
       </div>
       <div class="title-container">

lib/views/layout/layout.html

@@ -131,23 +131,12 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
       <div class="top-left-part">
         <a class="logo" href="/">
           <b>
-            <!--This is dark logo icon-->
-            <img src="../plugins/images/agileadmin-logo.png" alt="home" class="dark-logo" />
-            <!--This is light logo icon-->
-            <!-- <img src="../plugins/images/agileadmin-logo-dark.png" alt="home" class="light-logo" /> -->
-            <!-- <svg viewBox="0 0 448 448">
-              <path d="M0 376v-48q0-3.25 2.375-5.625t5.625-2.375h48q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-48q-3.25 0-5.625-2.375t-2.375-5.625zM0 280v-48q0-3.25 2.375-5.625t5.625-2.375h48q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-48q-3.25 0-5.625-2.375t-2.375-5.625zM0 184v-48q0-3.25 2.375-5.625t5.625-2.375h48q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-48q-3.25 0-5.625-2.375t-2.375-5.625zM0 88v-48q0-3.25 2.375-5.625t5.625-2.375h48q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-48q-3.25 0-5.625-2.375t-2.375-5.625zM96 376v-48q0-3.25 2.375-5.625t5.625-2.375h336q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-336q-3.25 0-5.625-2.375t-2.375-5.625zM96 280v-48q0-3.25 2.375-5.625t5.625-2.375h336q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-336q-3.25 0-5.625-2.375t-2.375-5.625zM96 184v-48q0-3.25 2.375-5.625t5.625-2.375h336q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-336q-3.25 0-5.625-2.375t-2.375-5.625zM96 88v-48q0-3.25 2.375-5.625t5.625-2.375h336q3.25 0 5.625 2.375t2.375 5.625v48q0 3.25-2.375 5.625t-5.625 2.375h-336q-3.25 0-5.625-2.375t-2.375-5.625z"></path>
-            </svg> -->
-            <div class="light-logo">{% include '../widget/logo.html' %}</div>
+            <div class="logo-mark">{% include '../widget/logo.html' %}</div>
           </b>
           <span class="hidden-xs" style="color: black">
             {% set appTitle = config.crowi['app:title'] | default('GROWI') %}
             {% set appTitleFontSize = getAppTitleFontSize(appTitle) %}
-            <!--This is dark logo text-->
-            <!-- <img src="../plugins/images/agileadmin-text.png" alt="home" class="dark-logo" /> -->
-            <!--This is light logo text-->
-            <!-- <img src="../plugins/images/agileadmin-text-dark.png" alt="home" class="light-logo" /> -->
-            <span class="logo-text light-logo-text">
+            <span class="logo-text">
               <svg xmlns="http://www.w3.org/2000/svg">
                 <text x="0" y="{{22+appTitleFontSize/2}}" font-size="{{appTitleFontSize}}">
                   {% block title %}{{ appTitle }}{% endblock %}

resource/styles/agile-admin/inverse/colors/_apply-colors-dark.scss

@@ -0,0 +1,5 @@
+.top-left-part {
+  .logo-mark, .logo-text {
+    fill: white;
+  }
+}

resource/styles/agile-admin/inverse/colors/default-dark.scss

@@ -1,151 +1,17 @@
-@import "../variables.scss";
-
-/*Just change your choise color here its theme Colors*/
+@import '../variables';
 
 $topbar:#4F5467;
 $sidebar:#4F5467;
-$bodycolor:#f1f2f7;
+$bodycolor:#fff;
 $headingtext: #2b2b2b;
 $bodytext: #686868;
+$linktext: $inverse;
+$linktext-hover: lighten($inverse, 20%);
 $sidebar-text:#a6acbc;
 $themecolor:#f75b36;
 $dark-themecolor:#4F5467;
 
+$primary: $topbar;
 
-
-body{
-  background:$sidebar;
-}
-
-/*Top Header Part*/
-.top-left-part{
-  background:$sidebar;
-}
-.logo b{
-   
-}
-.logo i{ color:$white;}
-
-.navbar-header{ 
-     background:$topbar;
-}
-.navbar-top-links > li > a{
-    color:$white;
-}
-
-
-/*Right panel*/
-.right-sidebar .rpanel-title{
-  background:$themecolor;
-}
-
-/*Bread Crumb*/
-.bg-title .breadcrumb .active{
-    color:$themecolor;
-}
-.bg-title{
-  
-}
-
-/*Sidebar*/
-
-.sidebar {
-    background:$sidebar;
-    box-shadow:1px 0px 20px rgba(0, 0, 0, 0.08);
-  .label-custom{
-      background:$megna;
-  }  
-}
-#side-menu li a{
-    color:$sidebar-text;
-}
-#side-menu li a{
-    color:$sidebar-text;
-  border-left:0px solid $sidebar;
-}
-
-#side-menu > li > a {
-    &:hover, &:focus{
-        background:rgba(0, 0, 0, 0.07);
-    }
-   &.active {
-            border-left:3px solid $themecolor;
-            color:$white;
-            
-            font-weight:500;
-        i{
-          color:$themecolor;
-        }
-        }
-
-}
-#side-menu ul > li > a {
-    &:hover{
-        color:$themecolor;
-        
-    }
-    &.active{
-     color:$white;
-     font-weight:500;
-    }
-}
-.sidebar #side-menu .user-pro{
-  .nav-second-level a:hover{
-          color:$themecolor;
-        }
-  }
-.content-wrapper .sidebar .nav-second-level{
-  li{
-    background:#444859;
-  }
-}   
-@media(min-width:768px) {
-  .content-wrapper { 
-       #side-menu ul, .sidebar #side-menu > li:hover, .sidebar .nav-second-level > li > a{
-              background:#444859;
-         }
-    }     
-}
-
-.user-profile .user-pro-body .u-dropdown{
-  color:$sidebar-text;
-}
-/*themecolor*/
-
-.bg-theme {
-  background-color: $danger !important;
-}
-.bg-theme-dark {
-  background-color: $megna !important;
-}
-
-/*Chat widget*/
-.chat-list .odd .chat-text{
-    background:$themecolor;
-}
-/*Button*/
-.btn-custom{
-  background:$themecolor;
-  border:1px solid $themecolor;
-  color:$white;
-  &:hover{
-    background:$themecolor;
-    opacity:0.8;
-    color:$white;
-    border:1px solid $themecolor;
-  }
-}
-/*Custom tab*/
-.customtab li.active a, .customtab li.active a:hover,  .customtab li.active a:focus{
- border-bottom:2px solid $themecolor;
- color:$themecolor;
-}
-.tabs-vertical li.active a, .tabs-vertical li.active a:hover,  .tabs-vertical li.active a:focus{
-  background:$themecolor;
-  border-right:2px solid $themecolor;
-}
-/*Nav-pills*/
-.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
-  background:$themecolor;
-  color:$white;
-}
+@import 'apply-colors';
+@import 'apply-colors-dark';

resource/styles/agile-admin/inverse/eliteadmin.scss

@@ -895,18 +895,14 @@ label{
    text-align:center;
 
 }
-.logo i{ color:$white;}
 .top-left-part{
     width:220px;
     float:left;
-    background:$white;
     a{
-    color: $white;
     font-size: 18px;
     padding-left:0px;
     text-transform: uppercase;
         }
-    .light-logo{ display:none;}
     }
 .navbar-header{
     width:100%;

resource/styles/scss/theme/_override-agileadmin.scss

@@ -1,3 +1,7 @@
+/*
+ * Growi original
+ */
+
 #page-wrapper {
   padding-bottom: 0;
 }
@@ -31,29 +35,14 @@
   }
 }
 .logo {
-  // set transition for fill
-  svg * {
-    transition: fill 0.8s ease-out;
-  }
-
-  .dark-logo, .dark-logo-text {
-    svg {
-      fill: white;
-    }
-  }
-  .light-logo, .light-logo-text {
-    svg {
-      fill: $dark-themecolor;
-    }
-  }
-  .dark-logo, .light-logo {
+  .logo-mark {
     svg {
       padding: 12px;
       width: 50px;
       height: 50px;
     }
   }
-  .dark-logo-text, .light-logo-text {
+  .logo-text {
     svg {
       width: 156px;
       height: 50px;
@@ -63,10 +52,15 @@
 // when sidebar is hidden
 .content-wrapper {
   .top-left-part {
+    // set transition for fill
+    svg * {
+      transition: fill 0.8s ease-out;
+    }
+
     background-color: darken($topbar, 10%);
 
     .logo {
-      .dark-logo, .light-logo {
+      .logo-mark {
         svg {
           fill: lighten($topbar, 15%);
 

resource/styles/scss/theme/default-dark.scss

@@ -0,0 +1,8 @@
+// import colors
+@import '../../agile-admin/inverse/colors/default-dark';
+
+// apply agile-admin theme
+@import '../../agile-admin/inverse/style';
+
+// override
+@import 'override-agileadmin';