diff --git a/README.MD b/README.MD index 8d74c16..bf48328 100644 --- a/README.MD +++ b/README.MD @@ -93,6 +93,36 @@ Copy the `noflash.min.js` from `node_modules/@rbnd/react-dark-mode/src/noflash.m ``` +### 5. Set custom styles + +It's possible to override the default classnames, so other libraries can be used that handle a different dark-mode classname convention. + +```jsx +import { DarkModeProvider } from "@rbnd/react-dark-mode"; + +const App = () => { + // ... + + return ( + + {/* Your other components */} + + ); +}; +``` + +Also the classnames used in `noflash.min.js` can be overridden, by using the following data-attrs on html element. + +```html + + + + + + + +``` + --- Created by [rbnd.studio](https://rbnd.studio/). Check out [Atmos](https://atmos.style/) our tool for creating professional color palettes, hey it's free! \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index d31af67..9db11e4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -14,27 +14,29 @@ const DarkModeContext = createContext({ }); type Props = { + darkModeClass?: string; + lightModeClass?: string; children?: ReactNode; }; const preferDarkQuery = "(prefers-color-scheme: dark)"; const mediaQueryEventTarget = typeof window !== "undefined" ? window.matchMedia(preferDarkQuery) : null; -export const DarkModeProvider = ({ children }: Props) => { +export const DarkModeProvider = ({ children, darkModeClass, lightModeClass }: Props) => { const [mode, setMode] = useLocalStorage("scheme-mode", "system"); useEffect(() => { const listener = (e: MediaQueryListEvent) => { - if (mode === "system") setClassOnDocument(e.matches); + if (mode === "system") setClassOnDocument(e.matches, darkModeClass, lightModeClass); }; mediaQueryEventTarget?.addEventListener("change", listener); return () => mediaQueryEventTarget?.removeEventListener("change", listener); }, [mode]); useEffect(() => { - if (mode === "dark") return setClassOnDocument(true); - if (mode === "light") return setClassOnDocument(false); - setClassOnDocument(window.matchMedia(preferDarkQuery).matches); + if (mode === "dark") return setClassOnDocument(true, darkModeClass, lightModeClass); + if (mode === "light") return setClassOnDocument(false, darkModeClass, lightModeClass); + setClassOnDocument(window.matchMedia(preferDarkQuery).matches, darkModeClass, lightModeClass); }, [mode]); return ( @@ -44,9 +46,9 @@ export const DarkModeProvider = ({ children }: Props) => { ); }; -const setClassOnDocument = (darkTheme: boolean) => { - const classNameDark = "dark-mode"; - const classNameLight = "light-mode"; +const setClassOnDocument = (darkTheme: boolean, darkModeClass?: string, lightModeClass?: string) => { + const classNameDark = darkModeClass || "dark-mode"; + const classNameLight = lightModeClass || "light-mode"; const element = typeof window !== "undefined" ? document.querySelector("html") : null; if (!element) return; diff --git a/src/noflash.js b/src/noflash.js index 62e407d..8a411f6 100644 --- a/src/noflash.js +++ b/src/noflash.js @@ -1,6 +1,8 @@ (function () { - var classNameDark = "dark-mode"; - var classNameLight = "light-mode"; + var html = document.documentElement; + var classNameDark = html.dataset.darkModeClassname || "dark-mode"; + var classNameLight = html.dataset.lightModeClassname || "light-mode"; + function setClassOnDocument(darkMode) { document.querySelector("html").classList.add(darkMode ? classNameDark : classNameLight); document.querySelector("html").classList.remove(darkMode ? classNameLight : classNameDark); diff --git a/src/noflash.min.js b/src/noflash.min.js index a4117b5..567f584 100644 --- a/src/noflash.min.js +++ b/src/noflash.min.js @@ -1 +1 @@ -!function(){var b,a,c="dark-mode",d="light-mode",e="(prefers-color-scheme: dark)",f=window.matchMedia(e),h=f.media===e;try{var g=localStorage.getItem("scheme-mode");g&&(a=JSON.parse(g))}catch{}b=h&&"system"===a?f.matches:("light"===a||"dark"===a)&&"dark"===a,document.querySelector("html").classList.add(b?c:d),document.querySelector("html").classList.remove(b?d:c)}() \ No newline at end of file +!function(){var e=document.documentElement,t=e.dataset.darkModeClassname||"dark-mode",a=e.dataset.lightModeClassname||"light-mode";function d(e){document.querySelector("html").classList.add(e?t:a),document.querySelector("html").classList.remove(e?a:t)}var m,o="(prefers-color-scheme: dark)",r=window.matchMedia(o),s=r.media===o;try{var c=localStorage.getItem("scheme-mode");c&&(m=JSON.parse(c))}catch{}d(s&&"system"===m?r.matches:("light"===m||"dark"===m)&&"dark"===m)}(); \ No newline at end of file