Главная Обзор Помощь
Вход
wiki
/
weseek__growi
зеркало из https://github.com/weseek/growi
2
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

apply next-themes

Yuki Takei 3 лет назад
Родитель
f60a9f95a5
Сommit
e0695e1ddd
9 измененных файлов с 31 добавлено и 18 удалено
Разделённый вид Показать статистику Diff
  1. 1 0
      packages/app/package.json
  2. 4 4
      packages/app/src/client/boot.js
  3. 6 2
      packages/app/src/components/Layout/RawLayout.tsx
  4. 9 9
      packages/app/src/components/Theme/ThemeDefault.module.scss
  5. 0 0
      packages/app/src/components/Theme/ThemeDefault.tsx
  6. 0 0
      packages/app/src/components/Theme/ThemeInjector.tsx
  7. 0 0
      packages/app/src/components/Theme/ThemeProvider.tsx
  8. 6 3
      packages/app/src/pages/_app.page.tsx
  9. 5 0
      yarn.lock

+ 1 - 0
packages/app/package.json
Просмотреть файл 

@@ -126,6 +126,7 @@
 
     "multer-autoreap": "^1.0.3",
 
     "next": "^12.1.6",
 
     "next-i18next": "^11.0.0",
 
+    "next-themes": "^0.2.0",
 
     "next-transpile-modules": "^9.0.0",
 
     "nocache": "^3.0.1",
 
     "nodemailer": "^6.6.2",

+ 4 - 4
packages/app/src/client/boot.js
Просмотреть файл 

@@ -1,9 +1,9 @@
 
-import {
 
-  applyColorScheme,
 
-} from './util/color-scheme';
 
+// import {
 
+//   applyColorScheme,
 
+// } from './util/color-scheme';
 
 import {
 
   applyOldIos,
 
 } from './util/old-ios';
 
 
-applyColorScheme();
 
+// applyColorScheme();
 
 applyOldIos();

+ 6 - 2
packages/app/src/components/Layout/RawLayout.tsx
Просмотреть файл 

@@ -1,8 +1,9 @@
 
 import React, { ReactNode } from 'react';
 
 
+import { useTheme } from 'next-themes';
 
 import Head from 'next/head';
 
 
-import { ThemeProvider } from '~/pages/ThemeProvider';
 
+import { ThemeProvider } from '../Theme/ThemeProvider';
 
 
 type Props = {
 
   title: string,
 
@@ -17,6 +18,9 @@ export const RawLayout = ({ children, title, className }: Props): JSX.Element =>
 
     classNames.push(className);
 
   }
 
 
+  // get color scheme from next-themes
 
+  const { resolvedTheme: colorScheme } = useTheme();
 
+
 
   return (
 
     <>
 
       <Head>
 
@@ -25,7 +29,7 @@ export const RawLayout = ({ children, title, className }: Props): JSX.Element =>
 
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
 
       </Head>
 
       <ThemeProvider theme="">
 
-        <div className={classNames.join(' ')} data-light={true}>
 
+        <div className={classNames.join(' ')} data-color-scheme={colorScheme}>
 
           {children}
 
         </div>
 
       </ThemeProvider>

+ 9 - 9
packages/app/src/pages/ThemeDefault.module.scss → packages/app/src/components/Theme/ThemeDefault.module.scss
Просмотреть файл 

@@ -1,6 +1,6 @@
 
-@use '../styles/variables' as *;
 
-@use '../styles/bootstrap/variables' as *;
 
-@use '../styles/theme/mixins/page-editor-mode-manager';
 
+@use '../../styles/variables' as *;
 
+@use '../../styles/bootstrap/variables' as *;
 
+@use '../../styles/theme/mixins/page-editor-mode-manager';
 
 
 // == Define Bootstrap theme colors
 
 //
 
@@ -16,7 +16,7 @@
 
 
 //== Light Mode
 
 //
 
-.theme[data-light='true'] :global {
 
+.theme[data-color-scheme='light'] :global {
 
   $primary: #122c55;
 
   $accent: #209fd8;
 
 
@@ -103,8 +103,8 @@
 
   // admin theme box
 
   $color-theme-color-box: lighten($primary, 20%);
 
 
-  @import '../styles/theme/apply-colors';
 
-  @import '../styles/theme/apply-colors-light';
 
+  @import '../../styles/theme/apply-colors';
 
+  @import '../../styles/theme/apply-colors-light';
 
 
   // Button
 
   .btn-group.grw-page-editor-mode-manager {
 
@@ -116,7 +116,7 @@
 
 
 //== Dark Mode
 
 //
 
-.theme[data-dark='true'] :global {
 
+.theme[data-color-scheme='dark'] :global {
 
   $primary: #115cd3;
 
   $accent: #db00c2;
 
 
@@ -200,8 +200,8 @@
 
   // admin theme box
 
   $color-theme-color-box: $primary;
 
 
-  @import '../styles/theme/apply-colors';
 
-  @import '../styles/theme/apply-colors-dark';
 
+  @import '../../styles/theme/apply-colors';
 
+  @import '../../styles/theme/apply-colors-dark';
 
 
   //Button
 
   .btn-group.grw-page-editor-mode-manager {

+ 0 - 0
packages/app/src/pages/ThemeDefault.tsx → packages/app/src/components/Theme/ThemeDefault.tsx
Просмотреть файл


+ 0 - 0
packages/app/src/pages/ThemeInjector.tsx → packages/app/src/components/Theme/ThemeInjector.tsx
Просмотреть файл


+ 0 - 0
packages/app/src/pages/ThemeProvider.tsx → packages/app/src/components/Theme/ThemeProvider.tsx
Просмотреть файл


+ 6 - 3
packages/app/src/pages/_app.page.tsx
Просмотреть файл 

@@ -1,6 +1,7 @@
 
 import React, { useEffect } from 'react';
 
 
 import { appWithTranslation } from 'next-i18next';
 
+import { ThemeProvider } from 'next-themes';
 
 import { AppProps } from 'next/app';
 
 import { DndProvider } from 'react-dnd';
 
 import { HTML5Backend } from 'react-dnd-html5-backend';
 
@@ -34,9 +35,11 @@ function GrowiApp({ Component, pageProps }: GrowiAppProps): JSX.Element {
 
   useGrowiVersion(commonPageProps.growiVersion);
 
 
   return (
 
-    <DndProvider backend={HTML5Backend}>
 
-      <Component {...pageProps} />
 
-    </DndProvider>
 
+    <ThemeProvider>
 
+      <DndProvider backend={HTML5Backend}>
 
+        <Component {...pageProps} />
 
+      </DndProvider>
 
+    </ThemeProvider>
 
   );
 
 }

+ 5 - 0
yarn.lock
Просмотреть файл 

@@ -14735,6 +14735,11 @@ next-i18next@^11.0.0:
 
     i18next-fs-backend "^1.1.4"
 
     react-i18next "^11.16.2"
 
 
+next-themes@^0.2.0:
 
+  version "0.2.0"
 
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.0.tgz#fdc507f61e95b3ae513dee8d4783bcec8c02e3a3"
 
+  integrity sha512-myhpDL4vadBD9YDSHiewqvzorGzB03N84e+3LxCwHRlM/hiBOaW+UsKsQojQAzC7fdcJA0l2ppveXcYaVV+hxQ==
 
+
 
 next-transpile-modules@^9.0.0:
 
   version "9.0.0"
 
   resolved "https://registry.yarnpkg.com/next-transpile-modules/-/next-transpile-modules-9.0.0.tgz#133b1742af082e61cc76b02a0f12ffd40ce2bf90"