add box

config/webpack.common.js

@@ -44,6 +44,7 @@ module.exports = (options) => {
       'styles/theme-wood':          './src/client/styles/scss/theme/wood.scss',
       'styles/theme-christmas':          './src/client/styles/scss/theme/christmas.scss',
       'styles/theme-island':      './src/client/styles/scss/theme/island.scss',
+      'styles/theme-hedgehog':      './src/client/styles/scss/theme/hedgehog.scss',
       'styles/theme-antarctic':      './src/client/styles/scss/theme/antarctic.scss',
       // styles for external services
       'styles/style-hackmd':          './src/client/styles/hackmd/style.scss',

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

@@ -27,6 +27,8 @@ class CustomizeThemeOptions extends React.Component {
       name: 'christmas', bg: '#fffefb', topbar: '#b3000c', theme: '#017e20',
     }, {
       name: 'antarctic', bg: '#ffffff', topbar: '#000080', theme: '#99cccc',
+    }, {
+      name: 'hedgeog', bg: '#ffffff', topbar: '#334455', theme: '#112744',
     }];
 
     const darkTheme = [{

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

@@ -0,0 +1,21 @@
+@import '../variables';
+
+$themecolor:#112744;
+
+$topbar:#334455;
+$sidebar:#fff;
+$bodycolor:#fff;
+$headingtext: #2b2b2b;
+$bodytext: #333333;
+$linktext: lighten($themecolor, 20%);
+$linktext-hover: lighten($linktext, 20%);
+$sidebar-text:#38495a;
+
+$primary: $themecolor;
+
+$logo-mark-fill: lighten(desaturate($topbar, 10%), 15%);
+$wikilinktext: lighten($themecolor, 20%);
+$wikilinktext-hover: lighten($wikilinktext, 20%);
+
+@import 'apply-colors';
+@import 'apply-colors-light';

src/client/styles/scss/theme/hedgehog.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';