apply theme Kibela

packages/app/src/components/Theme/ThemeKibela.module.scss

@@ -1,5 +1,6 @@
-@import '../variables';
-@import '../override-bootstrap-variables';
+@use '../../styles/variables' as *;
+@use '../../styles/bootstrap/variables' as *;
+@use '../../styles/theme/mixins/page-editor-mode-manager';
 
 $bgcolor-theme: rgb(18, 86, 163);
 $themelight: #f4f5f6;
@@ -27,8 +28,7 @@ $lightthemecolor: rgba(181, 203, 247, 0.61);
 }
 
 // Light Mode
-html[light],
-html[dark] {
+.theme :global {
   // Background colors
   $bgcolor-navbar: white;
   $bgcolor-navbar-active: $bgcolor-theme;
@@ -98,13 +98,13 @@ html[dark] {
   // Sidebar list group
   $bgcolor-sidebar-list-group: #fafbff; // optional
 
-  @import 'apply-colors';
-  @import 'apply-colors-light';
+  @import '../../styles/theme/apply-colors';
+  @import '../../styles/theme/apply-colors-light';
 
   //Button
   .grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include btn-page-editor-mode-manager(darken($primary, 15%), lighten($primary, 45%), lighten($primary, 50%));
+      @include page-editor-mode-manager.btn-page-editor-mode-manager(darken($primary, 15%), lighten($primary, 45%), lighten($primary, 50%));
     }
   }
 }

packages/app/src/components/Theme/ThemeKibela.tsx

@@ -0,0 +1,8 @@
+import { ThemeInjector } from './utils/ThemeInjector';
+
+import styles from './ThemeKibela.module.scss';
+
+const ThemeKibela = ({ children }: { children: JSX.Element }): JSX.Element => {
+  return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
+};
+export default ThemeKibela;

packages/app/src/components/Theme/utils/ThemeProvider.tsx

@@ -17,6 +17,7 @@ const ThemeSpring = dynamic(() => import('../ThemeSpring'));
 const ThemeNature = dynamic(() => import('../ThemeNature'));
 const ThemeWood = dynamic(() => import('../ThemeWood'));
 const ThemeMonoBlue = dynamic(() => import('../ThemeMonoBlue'));
+const ThemeKibela = dynamic(() => import('../ThemeKibela'));
 
 
 type Props = {
@@ -46,6 +47,8 @@ export const ThemeProvider = ({ theme, children }: Props): JSX.Element => {
       return <ThemeWood>{children}</ThemeWood>;
     case GrowiThemes.MONO_BLUE:
       return <ThemeMonoBlue>{children}</ThemeMonoBlue>;
+    case GrowiThemes.KIBELA:
+      return <ThemeKibela>{children}</ThemeKibela>;
     default:
       return <ThemeDefault>{children}</ThemeDefault>;
   }