globalize hufflepuff

packages/app/src/components/Theme/ThemeHufflepuff.module.scss → packages/app/src/components/Theme/ThemeHufflepuff.global.scss

@@ -1,5 +1,5 @@
-@use '../../styles/variables' as *;
-@use '../../styles/bootstrap/variables' as *;
+// @use '../../styles/variables' as *;
+// @use '../../styles/bootstrap/variables' as *;
 @use '../../styles/theme/mixins/page-editor-mode-manager';
 
 // == Define Bootstrap theme colors
@@ -20,7 +20,7 @@
 
 //== Light Mode
 //
-.theme[data-color-scheme='light'] :global {
+:root[data-theme='light'] .theme-hufflepuff {
   // Theme colors
   $themecolor: #eaab20;
   $themelight: #efe2cf;
@@ -156,7 +156,7 @@
   }
 }
 
-.theme[data-color-scheme='dark'] :global {
+:root[data-theme='dark'] .theme-hufflepuff {
   // Theme colors
   $themecolor: #eaab20;
   $themedark: #3d3f38;

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

@@ -4,7 +4,7 @@ import { Themes } from '~/stores/use-next-themes';
 
 import { ThemeInjector } from './utils/ThemeInjector';
 
-import styles from './ThemeHufflepuff.module.scss';
+// import styles from './ThemeHufflepuff.module.scss';
 
 export const getBackgroundImageSrc = (colorScheme: Themes): string => {
   switch (colorScheme) {
@@ -30,7 +30,7 @@ const ThemeHufflepuff = ({ children, colorScheme }: Props): JSX.Element => {
       )}
     </>
   );
-  return <ThemeInjector className={styles.theme} bgImageNode={bgImageNode}>{children}</ThemeInjector>;
+  return <ThemeInjector className="theme-hufflepuff" bgImageNode={bgImageNode}>{children}</ThemeInjector>;
 };
 
 export default ThemeHufflepuff;

packages/app/src/styles/style-next.scss

@@ -77,6 +77,10 @@
 // @import 'sharelink';
 // @import 'linkedit-preview';
 
+// themes
+@import './theme/all-themes';
+
+
 /*
  * for Guest User Mode
  */

packages/app/src/styles/theme/_all-themes.scss

@@ -0,0 +1 @@
+@import '~/components/Theme/ThemeHufflepuff.global.scss';

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -1,5 +1,5 @@
 @use '../variables' as var;
-@use '../bootstrap/init' as *;
+// @use '../bootstrap/init' as *;
 @use '../mixins';
 @use './mixins/count-badge';
 

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -1,5 +1,5 @@
 @use '../variables' as var;
-@use '../bootstrap/init' as *;
+// @use '../bootstrap/init' as *;
 @use '../mixins';
 @use './mixins/count-badge';
 

packages/app/src/styles/theme/_apply-colors.scss

@@ -1,5 +1,5 @@
 @use '../variables' as var;
-@use '../bootstrap/init' as *;
+// @use '../bootstrap/init' as *;
 @use '../mixins';
 @use './mixins/tables'; // comment out and use _reboot-bootstrap-tables instead -- 2020.05.28 Yuki Takei
 

packages/app/src/styles/theme/_reboot-bootstrap-border-colors.scss

@@ -1,4 +1,4 @@
-@use '../bootstrap/init' as *;
+// @use '../bootstrap/init' as *;
 
 //
 // Border

packages/app/src/styles/theme/_reboot-bootstrap-dropdown.scss

@@ -1,4 +1,4 @@
-@use '../bootstrap/init' as *;
+// @use '../bootstrap/init' as *;
 
 .dropdown-menu {
   color: $dropdown-color;

packages/app/src/styles/theme/_reboot-bootstrap-tables.scss

@@ -1,4 +1,4 @@
-@use '../bootstrap/init' as *;
+// @use '../bootstrap/init' as *;
 
 //
 //

packages/app/src/styles/theme/_reboot-bootstrap-theme-colors.scss

@@ -1,4 +1,4 @@
-@use '../bootstrap/init' as *;
+// @use '../bootstrap/init' as *;
 @use '../mixins';
 
 @each $color, $value in $theme-colors {