apply bootstrap color mode

apps/app/src/components/Layout/RawLayout.tsx

@@ -39,7 +39,7 @@ export const RawLayout = ({ children, className }: Props): JSX.Element => {
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
       </Head>
       <NextThemesProvider>
-        <div className={classNames.join(' ')} data-color-scheme={colorScheme}>
+        <div className={classNames.join(' ')}>
           {children}
           <ToastContainer theme={colorScheme} />
         </div>

apps/app/src/stores/use-next-themes.tsx

@@ -12,7 +12,7 @@ export const Themes = {
 export type Themes = typeof Themes[keyof typeof Themes];
 
 
-const ATTRIBUTE = 'data-theme';
+const ATTRIBUTE = 'data-bs-theme';
 
 export const NextThemesProvider: React.FC<ThemeProviderProps> = (props) => {
   const { data: forcedColorScheme } = useForcedColorScheme();

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

@@ -7,7 +7,7 @@
 @use './hsl-functions' as hsl;
 
 // determine optional variables
-:root[data-theme='dark'] {
+:root[data-bs-theme='dark'] {
   $color-list: var(--color-list,var(--color-global));
   $bgcolor-list: var(--bgcolor-list,var(--bgcolor-global));
   $color-list-hover: var(--color-list-hover,var(--color-global));

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

@@ -7,7 +7,7 @@
 @use './hsl-functions' as hsl;
 
 // determine optional variables
-:root[data-theme='light'] {
+:root[data-bs-theme='light'] {
   $color-list: var(--color-list,var(--color-global));
   $bgcolor-list: var(--bgcolor-list,var(--bgcolor-global));
   $color-list-hover: var(--color-list-hover,var(--color-global));

packages/presentation/src/components/Presentation.global.scss

@@ -1,11 +1,11 @@
-:root[data-theme='light'] {
+:root[data-bs-theme='light'] {
   .reveal-viewport {
     // adjust marp default theme
     background-color: #fff;
   }
 }
 
-:root[data-theme='dark'] {
+:root[data-bs-theme='dark'] {
   .reveal-viewport {
     // adjust marp default theme
     background-color: #0d1117;

packages/preset-themes/src/styles/antarctic.scss

@@ -6,7 +6,7 @@
 
 //== Light Mode
 //
-:root[data-theme='light'] {
+:root[data-bs-theme='light'] {
   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
   --primary-hs: 240,100%;
   --primary-l: 25%;

packages/preset-themes/src/styles/blackboard.scss

@@ -4,7 +4,7 @@
 @use './theme/mixins/page-editor-mode-manager';
 @use './theme/hsl-functions' as hsl;
 
-:root[data-theme='dark']{
+:root[data-bs-theme='dark']{
   // Theme colors
   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
   --primary-hs: 36,95%;

packages/preset-themes/src/styles/christmas.scss

@@ -16,7 +16,7 @@
 
 //== Light Mode
 //
-:root[data-theme='light'] {
+:root[data-bs-theme='light'] {
   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
   --primary-hs: 53,56%;
   --primary-l: 61%;

packages/preset-themes/src/styles/default.scss

@@ -6,7 +6,7 @@
 
 //== Light Mode
 //
-:root[data-theme='light'] {
+:root[data-bs-theme='light'] {
   --primary: hsl(var(--primary-hs),var(--primary-l));
   --primary-hs: 216.7,65%;
   --primary-l: 20.2%;
@@ -138,7 +138,7 @@
 
 //== Dark Mode
 //
-:root[data-theme='dark'] {
+:root[data-bs-theme='dark'] {
   --primary: hsl(var(--primary-hs),var(--primary-l));
   --primary-hs: 216.8,85.1%;
   --primary-l: 44.7%;

packages/preset-themes/src/styles/fire-red.scss

@@ -3,7 +3,7 @@
 @use './theme/mixins/page-editor-mode-manager';
 @use './theme/hsl-functions' as hsl;
 
-:root[data-theme='light'] {
+:root[data-bs-theme='light'] {
   // Theme colors
   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
   --primary-hs: 11,81%;
@@ -133,7 +133,7 @@
   }
 }
 
-:root[data-theme='dark'] {
+:root[data-bs-theme='dark'] {
   // Theme colors
   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
   --primary-hs: 11,81%;

packages/preset-themes/src/styles/future.scss

@@ -3,7 +3,7 @@
 @use './theme/mixins/page-editor-mode-manager';
 @use './theme/hsl-functions' as hsl;
 
-:root[data-theme='dark']{
+:root[data-bs-theme='dark']{
   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
   --primary-hs: 181,100%;
   --primary-l: 36%;

packages/preset-themes/src/styles/halloween.scss

@@ -16,7 +16,7 @@ $bordercolor: #7e0d7e;
 }
 
 
-:root[data-theme='dark'] {
+:root[data-bs-theme='dark'] {
   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
   --primary-hs: 25,95%;
   --primary-l: 34%;

packages/preset-themes/src/styles/hufflepuff.scss

@@ -16,7 +16,7 @@
 
 //== Light Mode
 //
-:root[data-theme='light'] {
+:root[data-bs-theme='light'] {
   // Theme colors
   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
   --primary-hs: 41,83%;
@@ -181,7 +181,7 @@
   }
 }
 
-:root[data-theme='dark'] {
+:root[data-bs-theme='dark'] {
   // Theme colors
   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
   --primary-hs: 41,83%;

packages/preset-themes/src/styles/island.scss

@@ -6,7 +6,7 @@
 
 //== Light Mode
 //
-:root[data-theme='light'] {
+:root[data-bs-theme='light'] {
   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
   --primary-hs: 171,33%;
   --primary-l: 69%;

packages/preset-themes/src/styles/jade-green.scss

@@ -3,7 +3,7 @@
 @use './theme/mixins/page-editor-mode-manager';
 @use './theme/hsl-functions' as hsl;
 
-:root[data-theme='light'] {
+:root[data-bs-theme='light'] {
   // Theme colors
   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
   --primary-hs: 160,53%;
@@ -125,7 +125,7 @@
   }
 }
 
-:root[data-theme='dark'] {
+:root[data-bs-theme='dark'] {
   // Theme colors
   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
   --primary-hs: 160,53%;

packages/preset-themes/src/styles/kibela.scss

@@ -3,7 +3,7 @@
 @use './theme/mixins/page-editor-mode-manager';
 @use './theme/hsl-functions' as hsl;
 
-:root[data-theme='light']{
+:root[data-bs-theme='light']{
   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
   --primary-hs: 212,80%;
   --primary-l: 35%;

packages/preset-themes/src/styles/mono-blue.scss

@@ -3,7 +3,7 @@
 @use './theme/mixins/page-editor-mode-manager';
 @use './theme/hsl-functions' as hsl;
 
-:root[data-theme='light'] {
+:root[data-bs-theme='light'] {
   // Theme colors
   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
   --primary-hs: 197,100%;
@@ -127,7 +127,7 @@
   }
 }
 
-:root[data-theme='dark'] {
+:root[data-bs-theme='dark'] {
   // Theme colors
   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
   --primary-hs: 197,100%;

packages/preset-themes/src/styles/nature.scss

@@ -14,7 +14,7 @@
 
 //== Light Mode
 //
-:root[data-theme='light'] {
+:root[data-bs-theme='light'] {
   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
   --primary-hs: 311,100%;
   --primary-l: 14%;

packages/preset-themes/src/styles/spring.scss

@@ -6,7 +6,7 @@
 
 //== Light Mode
 //
-:root[data-theme='light'] {
+:root[data-bs-theme='light'] {
   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
   --primary-hs: 348,100%;
   --primary-l: 86%;

packages/preset-themes/src/styles/wood.scss

@@ -24,7 +24,7 @@
 
 //== Light Mode
 //
-:root[data-theme='light'] {
+:root[data-bs-theme='light'] {
   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
   --primary-hs: 55,31%;
   --primary-l: 52%;