diff --git a/apps/mobile/app/app.js b/apps/mobile/app/app.js index a30850249..23d37761b 100644 --- a/apps/mobile/app/app.js +++ b/apps/mobile/app/app.js @@ -16,7 +16,10 @@ GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see . */ -import { THEME_COMPATIBILITY_VERSION, ThemeProvider } from "@notesnook/theme"; +import { + THEME_COMPATIBILITY_VERSION, + useThemeEngineStore +} from "@notesnook/theme"; import React, { useEffect } from "react"; import { View } from "react-native"; import "react-native-gesture-handler"; @@ -90,7 +93,7 @@ const App = () => { ); }; -export const withThemeProvider = (Element) => { +export const withTheme = (Element) => { return function AppWithThemeProvider() { const [colorScheme, darkTheme, lightTheme] = useThemeStore((state) => [ state.colorScheme, @@ -119,18 +122,14 @@ export const withThemeProvider = (Element) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - return ( - null - }} - > - - - ); + useEffect(() => { + useThemeEngineStore + .getState() + .setTheme(colorScheme === "dark" ? darkTheme : lightTheme); + }, [colorScheme, darkTheme, lightTheme]); + + return ; }; }; -export default withThemeProvider(withErrorBoundry(App, "App")); +export default withTheme(withErrorBoundry(App, "App")); diff --git a/apps/mobile/app/screens/editor/tiptap/use-editor.ts b/apps/mobile/app/screens/editor/tiptap/use-editor.ts index a56bfc99b..755e3c9d2 100644 --- a/apps/mobile/app/screens/editor/tiptap/use-editor.ts +++ b/apps/mobile/app/screens/editor/tiptap/use-editor.ts @@ -18,7 +18,7 @@ along with this program. If not, see . */ import { EVENTS } from "@notesnook/core/common"; -import { useThemeProvider } from "@notesnook/theme"; +import { useThemeEngineStore } from "@notesnook/theme"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import WebView from "react-native-webview"; import { db } from "../../../common/database"; @@ -59,7 +59,7 @@ export const useEditor = ( readonly?: boolean, onChange?: (html: string) => void ) => { - const { theme } = useThemeProvider(); + const theme = useThemeEngineStore((state) => state.theme); const [loading, setLoading] = useState(false); const [sessionId, setSessionId] = useState(makeSessionId()); diff --git a/apps/mobile/share/editor.js b/apps/mobile/share/editor.js index 58683b302..d2764aa97 100644 --- a/apps/mobile/share/editor.js +++ b/apps/mobile/share/editor.js @@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ import { getDefaultPresets } from "@notesnook/editor/dist/toolbar/tool-definitions"; -import { useThemeColors, useThemeProvider } from "@notesnook/theme"; +import { useThemeColors, useThemeEngineStore } from "@notesnook/theme"; import React, { useCallback, useEffect, @@ -42,7 +42,7 @@ import { eOnLoadNote } from "../app/utils/events"; const useEditor = () => { const ref = useRef(); const [sessionId] = useState("share-editor-session" + Date.now()); - const { theme } = useThemeProvider(); + const theme = useThemeEngineStore((state) => state.theme); const commands = useMemo(() => new Commands(ref), [ref]); const currentNote = useRef(); const doubleSpacedLines = useSettingStore( diff --git a/apps/web/package-lock.json b/apps/web/package-lock.json index dbf1b7d38..e402d7454 100644 --- a/apps/web/package-lock.json +++ b/apps/web/package-lock.json @@ -410,7 +410,8 @@ "@theme-ui/color": "^0.16.0", "@theme-ui/components": "0.14.7", "@theme-ui/core": "0.14.7", - "tinycolor2": "^1.4.2" + "tinycolor2": "^1.4.2", + "zustand": "^4.3.8" }, "devDependencies": { "@trpc/server": "^10.31.0", diff --git a/extensions/web-clipper/package-lock.json b/extensions/web-clipper/package-lock.json index 7f9edd1b4..24e88c6ce 100644 --- a/extensions/web-clipper/package-lock.json +++ b/extensions/web-clipper/package-lock.json @@ -105,7 +105,8 @@ "@theme-ui/color": "^0.16.0", "@theme-ui/components": "0.14.7", "@theme-ui/core": "0.14.7", - "tinycolor2": "^1.4.2" + "tinycolor2": "^1.4.2", + "zustand": "^4.3.8" }, "devDependencies": { "@trpc/server": "^10.31.0", @@ -23788,7 +23789,8 @@ "@types/tinycolor2": "^1.4.3", "isomorphic-fetch": "^3.0.0", "tinycolor2": "^1.4.2", - "ts-json-schema-generator": "^1.2.0" + "ts-json-schema-generator": "^1.2.0", + "zustand": "^4.3.8" } }, "@npmcli/fs": { diff --git a/extensions/web-clipper/src/app.tsx b/extensions/web-clipper/src/app.tsx index 52293b059..2dd52bc18 100644 --- a/extensions/web-clipper/src/app.tsx +++ b/extensions/web-clipper/src/app.tsx @@ -17,11 +17,11 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ import { useEffect } from "react"; -import { ThemeProvider } from "./components/theme-provider"; import { useAppStore } from "./stores/app-store"; import { Login } from "./views/login"; import { Main } from "./views/main"; import { Settings } from "./views/settings"; +import { EmotionThemeProvider, useThemeEngineStore } from "@notesnook/theme"; export function App() { const isLoggedIn = useAppStore((s) => s.isLoggedIn); @@ -40,11 +40,12 @@ export function App() { if (user && user.theme) { document.body.style.backgroundColor = user.theme.scopes.base.primary.background; + useThemeEngineStore.getState().setTheme(user.theme); } }, [user]); return ( - + {(() => { switch (route) { case "/login": @@ -56,6 +57,6 @@ export function App() { return ; } })()} - + ); } diff --git a/extensions/web-clipper/src/components/picker/index.tsx b/extensions/web-clipper/src/components/picker/index.tsx index 2a8421056..d3d0c5946 100644 --- a/extensions/web-clipper/src/components/picker/index.tsx +++ b/extensions/web-clipper/src/components/picker/index.tsx @@ -19,8 +19,7 @@ along with this program. If not, see . import { PropsWithChildren } from "react"; import Modal from "react-modal"; import { Button, Flex } from "@theme-ui/components"; -import { ThemeProvider } from "../theme-provider"; -import { useThemeEngineStore } from "@notesnook/theme"; +import { EmotionThemeProvider, useThemeEngineStore } from "@notesnook/theme"; Modal.setAppElement("#root"); @@ -62,8 +61,8 @@ export const Picker = (props: PropsWithChildren) => { onRequestClose={onClose} isOpen={isOpen} > - ) => { - + ); }; diff --git a/extensions/web-clipper/src/components/theme-provider/index.tsx b/extensions/web-clipper/src/components/theme-provider/index.tsx deleted file mode 100644 index 574518a14..000000000 --- a/extensions/web-clipper/src/components/theme-provider/index.tsx +++ /dev/null @@ -1,49 +0,0 @@ -/* -This file is part of the Notesnook project (https://notesnook.com/) - -Copyright (C) 2023 Streetwriters (Private) Limited - -This program is free software: you can redistribute it and/or modify -it under the terms of the GNU General Public License as published by -the Free Software Foundation, either version 3 of the License, or -(at your option) any later version. - -This program is distributed in the hope that it will be useful, -but WITHOUT ANY WARRANTY; without even the implied warranty of -MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -GNU General Public License for more details. - -You should have received a copy of the GNU General Public License -along with this program. If not, see . -*/ - -// import { useStore } from "../../stores/theme-store"; -// import { ThemeProvider as EmotionThemeProvider } from "@emotion/react"; -import { - ThemeProvider, - ThemeLight, - EmotionThemeProvider, - ThemeDefinition -} from "@notesnook/theme"; -import { BoxProps } from "@theme-ui/components"; -import { ReactNode } from "react"; - -type ThemeProviderProps = { - children: ReactNode; - theme?: ThemeDefinition; - injectCssVars?: boolean; -} & Omit; - -function BaseThemeProvider(props: ThemeProviderProps) { - const { children, theme = ThemeLight, ...restProps } = props; - - return ( - {}, theme }}> - - {children} - - - ); -} - -export { BaseThemeProvider as ThemeProvider }; diff --git a/packages/editor-mobile/package-lock.json b/packages/editor-mobile/package-lock.json index 243b4fd67..f7611c1e8 100644 --- a/packages/editor-mobile/package-lock.json +++ b/packages/editor-mobile/package-lock.json @@ -122,7 +122,8 @@ "@theme-ui/color": "^0.16.0", "@theme-ui/components": "0.14.7", "@theme-ui/core": "0.14.7", - "tinycolor2": "^1.4.2" + "tinycolor2": "^1.4.2", + "zustand": "^4.3.8" }, "devDependencies": { "@trpc/server": "^10.31.0", @@ -21649,7 +21650,8 @@ "@types/tinycolor2": "^1.4.3", "isomorphic-fetch": "^3.0.0", "tinycolor2": "^1.4.2", - "ts-json-schema-generator": "^1.2.0" + "ts-json-schema-generator": "^1.2.0", + "zustand": "^4.3.8" } }, "@pmmmwh/react-refresh-webpack-plugin": { diff --git a/packages/editor-mobile/src/App.tsx b/packages/editor-mobile/src/App.tsx index e6a8232fc..d584cf24d 100644 --- a/packages/editor-mobile/src/App.tsx +++ b/packages/editor-mobile/src/App.tsx @@ -17,32 +17,18 @@ You should have received a copy of the GNU General Public License along with this program. If not, see . */ -import { - ScopedThemeProvider, - ThemeLight, - ThemeProvider -} from "@notesnook/theme"; -import { useState } from "react"; +import { ScopedThemeProvider } from "@notesnook/theme"; import "./App.css"; import Tiptap from "./components/editor"; import { EmotionEditorTheme } from "./theme-factory"; function App(): JSX.Element { - const [theme, setTheme] = useState(ThemeLight); - return ( - - - - - - - + + + + + ); } diff --git a/packages/editor/package-lock.json b/packages/editor/package-lock.json index 8c9fac046..cbe4161a0 100644 --- a/packages/editor/package-lock.json +++ b/packages/editor/package-lock.json @@ -137,7 +137,8 @@ "@theme-ui/color": "^0.16.0", "@theme-ui/components": "0.14.7", "@theme-ui/core": "0.14.7", - "tinycolor2": "^1.4.2" + "tinycolor2": "^1.4.2", + "zustand": "^4.3.8" }, "devDependencies": { "@trpc/server": "^10.31.0", @@ -4356,7 +4357,8 @@ "@types/tinycolor2": "^1.4.3", "isomorphic-fetch": "^3.0.0", "tinycolor2": "^1.4.2", - "ts-json-schema-generator": "^1.2.0" + "ts-json-schema-generator": "^1.2.0", + "zustand": "^4.3.8" } }, "@notesnook/ui": { diff --git a/packages/theme/package-lock.json b/packages/theme/package-lock.json index 32ee434d4..fcbafd0d8 100644 --- a/packages/theme/package-lock.json +++ b/packages/theme/package-lock.json @@ -738,18 +738,6 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, - "node_modules/loose-envify": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", - "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "peer": true, - "dependencies": { - "js-tokens": "^3.0.0 || ^4.0.0" - }, - "bin": { - "loose-envify": "cli.js" - } - }, "node_modules/node-fetch": { "version": "2.6.12", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz", @@ -848,19 +836,6 @@ "node": ">=10" } }, - "node_modules/react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", - "peer": true, - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -1273,8 +1248,7 @@ "@emotion/use-insertion-effect-with-fallbacks": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", - "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", - "requires": {} + "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==" }, "@emotion/utils": { "version": "1.2.1", @@ -1720,15 +1694,6 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, - "loose-envify": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", - "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "peer": true, - "requires": { - "js-tokens": "^3.0.0 || ^4.0.0" - } - }, "node-fetch": { "version": "2.6.12", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz", @@ -1795,16 +1760,6 @@ "@babel/runtime": "^7.17.8" } }, - "react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", - "peer": true, - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } - }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -1952,8 +1907,7 @@ "use-sync-external-store": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", - "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", - "requires": {} + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==" }, "webidl-conversions": { "version": "3.0.1", diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json index 137be1737..aff3bfb37 100644 --- a/packages/ui/package-lock.json +++ b/packages/ui/package-lock.json @@ -45,7 +45,8 @@ "@theme-ui/color": "^0.16.0", "@theme-ui/components": "0.14.7", "@theme-ui/core": "0.14.7", - "tinycolor2": "^1.4.2" + "tinycolor2": "^1.4.2", + "zustand": "^4.3.8" }, "devDependencies": { "@trpc/server": "^10.31.0", diff --git a/servers/themes/package-lock.json b/servers/themes/package-lock.json index 02984a6a7..95f766ddb 100644 --- a/servers/themes/package-lock.json +++ b/servers/themes/package-lock.json @@ -34,7 +34,8 @@ "@theme-ui/color": "^0.16.0", "@theme-ui/components": "0.14.7", "@theme-ui/core": "0.14.7", - "tinycolor2": "^1.4.2" + "tinycolor2": "^1.4.2", + "zustand": "^4.3.8" }, "devDependencies": { "@trpc/server": "^10.31.0", @@ -2148,7 +2149,8 @@ "@types/tinycolor2": "^1.4.3", "isomorphic-fetch": "^3.0.0", "tinycolor2": "^1.4.2", - "ts-json-schema-generator": "^1.2.0" + "ts-json-schema-generator": "^1.2.0", + "zustand": "^4.3.8" } }, "@orama/orama": {