Merge pull request #1537 from weseek/add-own-theme

Add own theme

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-spring':      './src/client/styles/scss/theme/spring.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: 'spring', bg: '#ffffff', topbar: '#334455', theme: '#112744',
     }];
 
     const darkTheme = [{

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

@@ -0,0 +1,31 @@
+@import '../variables';
+
+$themecolor:#112744;
+
+$topbar:#F5A9F2;
+$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';
+
+// add background-image
+.main-container > #wrapper > #page-wrapper,
+.page-editor-preview-container {
+  background-image: url('/images/themes/spring/spring.jpg');
+  background-attachment: fixed;
+  background-position: bottom;
+  background-size: cover;
+  opacity: 0.4;
+}

src/client/styles/scss/theme/spring.scss

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

src/server/routes/apiv3/customize-setting.js

@@ -95,7 +95,7 @@ module.exports = (crowi) => {
     layoutTheme: [
       body('layoutType').isString().isIn(['growi', 'kibela', 'crowi']),
       body('themeType').isString().isIn([
-        'default', 'nature', 'mono-blue', 'wood', 'island', 'christmas', 'antarctic', 'default-dark', 'future', 'blue-night', 'halloween',
+        'default', 'nature', 'mono-blue', 'wood', 'island', 'christmas', 'antarctic', 'default-dark', 'future', 'blue-night', 'halloween', 'spring',
       ]),
     ],
     behavior: [