apply theme hufflepuff

packages/app/src/components/Theme/ThemeHufflepuff.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';
 
 // == Define Bootstrap theme colors
 //
@@ -19,7 +20,7 @@
 
 //== Light Mode
 //
-html[light] {
+.theme[data-color-scheme='light'] :global {
   // Theme colors
   $themecolor: #eaab20;
   $themelight: #efe2cf;
@@ -91,16 +92,16 @@ html[light] {
   // admin theme box
   $color-theme-color-box: darken($primary, 5%);
 
-  @import 'apply-colors';
-  @import 'apply-colors-light';
+  @import '../../styles/theme/apply-colors';
+  @import '../../styles/theme/apply-colors-light';
 
   //Button
   .btn.btn-outline-primary {
-    @include btn-page-editor-mode-manager(darken($primary, 50%), darken($primary, 50%), lighten($primary, 20%));
+    @include page-editor-mode-manager.btn-page-editor-mode-manager(darken($primary, 50%), darken($primary, 50%), lighten($primary, 20%));
   }
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include btn-page-editor-mode-manager(darken($primary, 70%), lighten($primary, 5%), lighten($primary, 20%));
+      @include page-editor-mode-manager.btn-page-editor-mode-manager(darken($primary, 70%), lighten($primary, 5%), lighten($primary, 20%));
     }
   }
 
@@ -156,7 +157,7 @@ html[light] {
   }
 }
 
-html[dark] {
+.theme[data-color-scheme='dark'] :global {
   // Theme colors
   $themecolor: #eaab20;
   $themedark: #3d3f38;
@@ -234,8 +235,8 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: $primary;
 
-  @import 'apply-colors';
-  @import 'apply-colors-dark';
+  @import '../../styles/theme/apply-colors';
+  @import '../../styles/theme/apply-colors-dark';
 
   // Navs
   .nav-tabs {
@@ -260,11 +261,11 @@ html[dark] {
 
   // Button
   .btn.btn-outline-primary {
-    @include btn-page-editor-mode-manager(lighten($primary, 40%), lighten($primary, 15%), darken($primary, 10%), darken($primary, 30%));
+    @include page-editor-mode-manager.btn-page-editor-mode-manager(lighten($primary, 40%), lighten($primary, 15%), darken($primary, 10%), darken($primary, 30%));
   }
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include btn-page-editor-mode-manager(lighten($primary, 40%), lighten($primary, 15%), darken($primary, 0%), darken($primary, 30%));
+      @include page-editor-mode-manager.btn-page-editor-mode-manager(lighten($primary, 40%), lighten($primary, 15%), darken($primary, 0%), darken($primary, 30%));
     }
   }
 

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

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

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

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