display hufflepuff button

config/webpack.common.js

@@ -45,6 +45,7 @@ module.exports = (options) => {
       'styles/theme-island':      './src/client/styles/scss/theme/island.scss',
       'styles/theme-antarctic':      './src/client/styles/scss/theme/antarctic.scss',
       'styles/theme-spring':         './src/client/styles/scss/theme/spring.scss',
+      'styles/theme-hufflepuff':         './src/client/styles/scss/theme/hufflepuff.scss',
       // styles for external services
       'styles/style-hackmd':          './src/client/styles/hackmd/style.scss',
     }, options.entry || {}), // Merge with env dependent settings

src/client/js/components/Admin/Customize/CustomizeThemeOptions.jsx

@@ -20,6 +20,8 @@ class CustomizeThemeOptions extends React.Component {
       name: 'default',    bg: '#ffffff', topbar: '#2a2929', sidebar: '#122c55', theme: '#209fd8',
     }, {
       name: 'mono-blue',  bg: '#F7FBFD', topbar: '#2a2929', sidebar: '#00587A', theme: '#00587A',
+    }, {
+      name: 'hufflepuff',  bg: '#EFE2CF', topbar: '#2a2929', sidebar: '#EAAB20', theme: '#993439',
     }];
 
     const uniqueTheme = [{

src/client/styles/scss/theme/hufflepuff.scss

@@ -0,0 +1,167 @@
+// 以下まだspringのコピー
+
+@import '../variables';
+@import '../override-bootstrap-variables';
+
+// == Define Bootstrap theme colors
+//
+
+// colors for overriding bootstrap $theme-colors
+// $secondary: #;
+// $info: #;
+// $success: #;
+// $warning: #;
+// $danger: #;
+// $light: #;
+// $dark: #;
+
+$themecolor: #eaab20; //反映確認のため変更
+$themelight: #fff0f5;
+$subthemecolor: #67a856;
+$third-main-color: antiquewhite;
+$accentcolor: #e08dbc;
+
+.grw-navbar {
+  border-bottom: $accentcolor 4px solid;
+}
+
+//== Light Mode
+//
+html[light],
+html[dark] {
+  $primary: $themecolor;
+  $secondary: $accentcolor;
+
+  // Background colors
+  $bgcolor-global: white;
+  $bgcolor-inline-code: $gray-100; //optional
+  $bgcolor-card: $gray-50;
+  $bgcolor-highlighted: rgba($primary, 0.5);
+
+  // Font colors
+  $color-global: black;
+  $color-reversal: white;
+  $color-link: $subthemecolor;
+  $color-link-hover: lighten($subthemecolor, 10%);
+  $color-link-wiki: $subthemecolor;
+  $color-link-wiki-hover: lighten($color-link-wiki, 10%);
+  $color-link-nabvar: $bgcolor-global;
+  $color-inline-code: #c7254e; // optional
+
+  // List Group colors
+  // $color-list: $color-global;
+  $bgcolor-list: $themelight;
+  $color-list-hover: lighten($accentcolor, 20%);
+  $bgcolor-list-hover: darken($bgcolor-list, 2%);
+  $color-list-active: $bgcolor-global;
+  $bgcolor-list-active: $accentcolor;
+
+  // Navbar
+  $bgcolor-navbar: #d3687c;
+  $bgcolor-search-top-dropdown: $themecolor;
+  $border-image-navbar: linear-gradient(to right, #cbe682 0%, #4ad6e8 50%, #ea42f0 100%);
+
+  // Logo colors
+  $bgcolor-logo: $bgcolor-navbar;
+  $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
+
+  // Sidebar
+  $bgcolor-sidebar: $themecolor;
+  // Sidebar resize button
+  $color-resize-button: $color-reversal;
+  $bgcolor-resize-button: $subthemecolor;
+  $color-resize-button-hover: $color-reversal;
+  $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
+  // Sidebar contents
+  $color-sidebar-context: $subthemecolor;
+  $bgcolor-sidebar-context: #f4f6fc;
+  // Sidebar list group
+  $bgcolor-sidebar-list-group: #fafbff; // optional
+
+  // Icon colors
+  $color-editor-icons: $color-global;
+
+  // Border colors
+  $border-color-theme: $gray-300; // former: `$navbar-border: $gray-300;`
+  $bordercolor-inline-code: #ccc8c8; // optional
+
+  // Dropdown colors
+  $bgcolor-dropdown-link-active: $growi-blue;
+  $color-dropdown-link-active: $color-reversal;
+  $color-dropdown-link-hover: $color-global;
+
+  // admin theme box
+  $color-theme-color-box: darken($primary, 20%);
+
+  @import 'apply-colors';
+  @import 'apply-colors-light';
+
+  //Button
+  // Outline buttons are applyed the accent color to this spring theme cuz the primary is too light and it looks like unable to click them.
+  .btn.btn-outline-primary {
+    @include btn-page-editor-mode-manager(darken($primary, 50%), darken($primary, 50%), lighten($primary, 10%));
+  }
+  .btn-group.grw-page-editor-mode-manager {
+    .btn.btn-outline-primary {
+      @include btn-page-editor-mode-manager(darken($primary, 50%), lighten($primary, 5%), lighten($primary, 10%));
+    }
+  }
+
+  .growi:not(.login-page) {
+    // add background-image
+    #page-wrapper,
+    .page-editor-preview-container {
+      background-image: url('/images/themes/spring/spring02.svg');
+      background-attachment: fixed;
+      background-position: bottom;
+      background-size: cover;
+    }
+  }
+
+  // login and register
+  .nologin {
+    #page-wrapper {
+      background-color: $themelight;
+      background-image: url('/images/themes/spring/spring.svg');
+      background-attachment: fixed;
+      background-position: bottom;
+      background-size: cover;
+    }
+
+    .login-header,
+    .login-dialog {
+      background-color: rgba(black, 0.1);
+    }
+
+    .link-switch {
+      color: $color-global;
+    }
+
+    .grw-external-auth-form {
+      border-color: $accentcolor !important;
+    }
+  }
+
+  .table {
+    background-color: $bgcolor-global;
+  }
+
+  .card-timeline > .card-header {
+    background-color: $third-main-color;
+  }
+
+  h1,
+  h2 {
+    svg {
+      fill: $subthemecolor;
+    }
+  }
+
+  .nav.nav-tabs {
+    > .nav-item {
+      > .nav-link.active {
+        color: $subthemecolor;
+      }
+    }
+  }
+}