Create Sidebar fill and Bg fill

apps/app/src/components/Admin/Customize/ThemeColorBox.tsx

@@ -15,7 +15,7 @@ export const ThemeColorBox = (props: Props): JSX.Element => {
     isSelected, metadata, onSelected,
   } = props;
   const {
-    name, bg, topbar, sidebar, createBtn, isPresetTheme,
+    name, lightBg, darkBg, lightSidebar, darkSidebar, createBtn, isPresetTheme,
   } = metadata;
 
   return (
@@ -26,17 +26,17 @@ export const ThemeColorBox = (props: Props): JSX.Element => {
     >
       <a id={name} role="button" className={`m-0 ${name} theme-button`}>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
-          <path id="bg-l" d="M32.5,0V36.364L64,20.437V0Z" fill="#fff" />
-          <path id="bg-d" d="M32.5,36.364V64H64V20.438Z" fill="#1c1a1a" />
+          <path id="bg-l" d="M32.5,0V36.364L64,20.437V0Z" fill={lightBg} />
+          <path id="bg-d" d="M32.5,36.364V64H64V20.438Z" fill={darkBg} />
           <path
             id="sidebar-l"
             d="M4.077,20.648,10.164,10.1H22.338l6.087,10.544L22.338,31.19H10.164ZM0,0V52.8l6.436-3.255v-1.8H10L17.189,44.1H6.436V42.044H21.267L32.5,36.364V0Z"
-            fill="#f8f7f7"
+            fill={lightSidebar}
           />
           <path
             id="sidebar-d"
             d="M6.436,53.44H26.065V55.5H6.436Zm14.831-11.4h4.8v2.061H17.189L10,47.743H26.065V49.8l-19.629,0v-.259L0,52.8V64H32.5V36.364Z"
-            fill="#434240"
+            fill={darkSidebar}
           />
           <path id="btn" d="M22.338,31.19l6.087-10.543L22.338,10.1H10.163L4.077,20.647,10.163,31.19Z" fill={createBtn} />
           <g id="icon-d">

packages/core/src/interfaces/growi-theme-metadata.ts

@@ -10,9 +10,10 @@ export type GrowiThemeMetadata = {
   name: string,
   manifestKey: string,
   schemeType: GrowiThemeSchemeType,
-  bg: string,
-  topbar: string,
-  sidebar: string,
+  lightBg: string,
+  darkBg: string,
+  lightSidebar: string,
+  darkSidebar: string,
   createBtn: string,
   isPresetTheme?: boolean,
 };

packages/preset-themes/src/consts/preset-themes.ts

@@ -28,9 +28,10 @@ export const DefaultThemeMetadata: GrowiThemeMetadata = {
   name: PresetThemes.DEFAULT,
   manifestKey: `src/styles/${PresetThemes.DEFAULT}.scss`,
   schemeType: BOTH,
-  bg: '#ffffff',
-  topbar: '#2a2929',
-  sidebar: '#122c55',
+  lightBg: '#FFFFFF',
+  darkBg: '#1C1A1A',
+  lightSidebar: '#F8F7F7',
+  darkSidebar: '#434240',
   createBtn: '#007EB0',
   isPresetTheme: true,
 };
@@ -39,39 +40,129 @@ export const PresetThemesMetadatas: GrowiThemeMetadata[] = [
   // support both of light and dark
   DefaultThemeMetadata,
   {
-    name: PresetThemes.MONO_BLUE,     schemeType: BOTH, bg: '#F7FBFD', topbar: '#2a2929', sidebar: '#00587A', createBtn: '#439CB9',
+    name: PresetThemes.MONO_BLUE,
+    schemeType: BOTH,
+    lightBg: '#FFFFFF',
+    darkBg: '#16202C',
+    lightSidebar: '#EDFAFD',
+    darkSidebar: '#0A2E53',
+    createBtn: '#439CB9',
   }, {
-    name: PresetThemes.HUFFLEPUFF,    schemeType: BOTH, bg: '#EFE2CF', topbar: '#2a2929', sidebar: '#EAAB20', createBtn: '#403C39',
+    name: PresetThemes.HUFFLEPUFF,
+    schemeType: BOTH,
+    lightBg: '#26231E',
+    darkBg: '#16202C',
+    lightSidebar: '#FEEBA5',
+    darkSidebar: '#5C4209',
+    createBtn: '#403C39',
   }, {
-    name: PresetThemes.FIRE_RED,      schemeType: BOTH, bg: '#FDFDFD', topbar: '#2c2c2c', sidebar: '#BFBFBF', createBtn: '#EA5532',
+    name: PresetThemes.FIRE_RED,
+    schemeType: BOTH,
+    lightBg: '#FFFFFF',
+    darkBg: '#120700',
+    lightSidebar: '#FADDD6',
+    darkSidebar: '#5A4F4A',
+    createBtn: '#EA5532',
   }, {
-    name: PresetThemes.JADE_GREEN,    schemeType: BOTH, bg: '#FDFDFD', topbar: '#2c2c2c', sidebar: '#BFBFBF', createBtn: '#49B38A',
+    name: PresetThemes.JADE_GREEN,
+    schemeType: BOTH,
+    lightBg: '#FFFFFF',
+    darkBg: '#120700',
+    lightSidebar: '#F1F3F2',
+    darkSidebar: '#4B4E4C',
+    createBtn: '#49B38A',
   }, {
-    name: PresetThemes.CLASSIC,    schemeType: BOTH, bg: '#FDFDFD', topbar: '#E1E9F4', sidebar: '#E1E9F4', createBtn: '#3491CB',
+    name: PresetThemes.CLASSIC,
+    schemeType: BOTH,
+    lightBg: '#FFFFFF',
+    darkBg: '#151A1F',
+    lightSidebar: '#F0F4FA',
+    darkSidebar: '#29343F',
+    createBtn: '#3491CB',
   },
   // light only
   {
-    name: PresetThemes.NATURE,        schemeType: LIGHT, bg: '#f9fff3', topbar: '#234136', sidebar: '#118050', createBtn: '#4FA529',
+    name: PresetThemes.NATURE,
+    schemeType: LIGHT,
+    lightBg: '#FFFFFF',
+    darkBg: '#FAF9F8',
+    lightSidebar: '#EBF9CC',
+    darkSidebar: '#D8F399',
+    createBtn: '#4FA529',
   }, {
-    name: PresetThemes.WOOD,          schemeType: LIGHT, bg: '#fffefb', topbar: '#2a2929', sidebar: '#aaa45f', createBtn: '#A77E21',
+    name: PresetThemes.WOOD,
+    schemeType: LIGHT,
+    lightBg: '#FFFFF5',
+    darkBg: '#FDFAF0',
+    lightSidebar: '#EAE3D4',
+    darkSidebar: '#DCCBA6',
+    createBtn: '#A77E21',
   }, {
-    name: PresetThemes.ISLAND,        schemeType: LIGHT, bg: '#cef2ef', topbar: '#2a2929', sidebar: '#0c2a44', createBtn: '#51C2D3',
+    name: PresetThemes.ISLAND,
+    schemeType: LIGHT,
+    lightBg: '#FFFFFF',
+    darkBg: '#E8F7FA',
+    lightSidebar: '#F3EEE0',
+    darkSidebar: '#E8DDC0',
+    createBtn: '#51C2D3',
   }, {
-    name: PresetThemes.CHRISTMAS,     schemeType: LIGHT, bg: '#fffefb', topbar: '#b3000c', sidebar: '#30882c', createBtn: '#B90606',
+    name: PresetThemes.CHRISTMAS,
+    schemeType: LIGHT,
+    lightBg: '#212836',
+    darkBg: '#323D52',
+    lightSidebar: '#2E3E27',
+    darkSidebar: '#455D3B',
+    createBtn: '#B90606',
   }, {
-    name: PresetThemes.ANTARCTIC,     schemeType: LIGHT, bg: '#ffffff', topbar: '#2a2929', sidebar: '#000080', createBtn: '#303DDB',
+    name: PresetThemes.ANTARCTIC,
+    schemeType: LIGHT,
+    lightBg: '#FAFEFF',
+    darkBg: '#E5FAFF',
+    lightSidebar: '#EDF4FC',
+    darkSidebar: '#DBE9F9',
+    createBtn: '#303DDB',
   }, {
-    name: PresetThemes.SPRING,        schemeType: LIGHT, bg: '#ffffff', topbar: '#d3687c', sidebar: '#ffb8c6', createBtn: '#6ABA55',
+    name: PresetThemes.SPRING,
+    schemeType: LIGHT,
+    lightBg: '#FFFFFF',
+    darkBg: '#FFFDF5',
+    lightSidebar: '#FEE7EB',
+    darkSidebar: '#F9CED7',
+    createBtn: '#6ABA55',
   }, {
-    name: PresetThemes.KIBELA,        schemeType: LIGHT, bg: '#f4f5f6', topbar: '#1256a3', sidebar: '#5882fa', createBtn: '#3080C0',
+    name: PresetThemes.KIBELA,
+    schemeType: LIGHT,
+    lightBg: '#FFFFFF',
+    darkBg: '#F5F5F5',
+    lightSidebar: '#FFFFFF',
+    darkSidebar: '#F5F5F5',
+    createBtn: '#3080C0',
   },
   // dark only
   {
-    name: PresetThemes.FUTURE,        schemeType: DARK, bg: '#16282d', topbar: '#2a2929', sidebar: '#00b5b7', createBtn: '#03A2A8',
+    name: PresetThemes.FUTURE,
+    schemeType: DARK,
+    lightBg: '#092627',
+    darkBg: '#1F4C4D',
+    lightSidebar: '#2a2929',
+    darkSidebar: '#27413D',
+    createBtn: '#03A2A8',
   }, {
-    name: PresetThemes.HALLOWEEN,     schemeType: DARK, bg: '#030003', topbar: '#aa4a04', sidebar: '#162b33', createBtn: '#AA4A04',
+    name: PresetThemes.HALLOWEEN,
+    schemeType: DARK,
+    lightBg: '#240E3E',
+    darkBg: '#2F1155',
+    lightSidebar: '#2F1155',
+    darkSidebar: '#3B136C',
+    createBtn: '#AA4A04',
   }, {
-    name: PresetThemes.BLACKBOARD,    schemeType: DARK, bg: '#223729', topbar: '#563E23', sidebar: '#7B5932', createBtn: '#BA840A',
+    name: PresetThemes.BLACKBOARD,
+    schemeType: DARK,
+    lightBg: '#223323',
+    darkBg: '#213E23',
+    lightSidebar: '#1B431C',
+    darkSidebar: '#29652B',
+    createBtn: '#BA840A',
   },
 ]
   // fill in missing information

packages/preset-themes/src/interfaces/growi-theme-metadata.ts

@@ -9,9 +9,10 @@ export type GrowiThemeMetadata = {
   name: string,
   manifestKey: string,
   schemeType: GrowiThemeSchemeType,
-  bg: string,
-  topbar: string,
-  sidebar: string,
+  lightBg: string,
+  darkBg: string,
+  lightSidebar: string,
+  darkSidebar: string,
   createBtn: string,
   isPresetTheme?: boolean,
 };