From 2263f683f3704f94a0449241d89e19ffa2989e9d Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Fri, 8 Dec 2023 20:47:38 +0530 Subject: [PATCH] update Readme --- README.md | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f084262c..9a504c8e 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,9 @@ This project was originally inspired by next-themes. Next-themes is an awesome p - ✅ Force pages to specific themes - ✅ Class and data attribute selector - ✅ Manipulate theme via `useTheme` hook -- ✅ Doccumented with [Typedoc](https://react18-tools.github.io/nextjs-themes) ([Docs](https://react18-tools.github.io/nextjs-themes)) +- ✅ Documented with [Typedoc](https://react18-tools.github.io/nextjs-themes) ([Docs](https://react18-tools.github.io/nextjs-themes)) +- ✅ Use combinations of [data-th=""] and [data-color-scheme=""] for dark/light varients of themes +- ✅ Use [data-csp=""] to style based on colorSchemePreference. Check out the [live example](https://nextjs-themes.vercel.app/). @@ -55,7 +57,7 @@ $ yarn add nextjs-themes-lite ## To do -- [ ] Update examples +- [ ] Update examples, docs and Readme ## Usage @@ -310,6 +312,25 @@ That's it! Now you can use dark-mode specific classes: ## Migrating from v1 to v2 +## 2.0.0 + +### Major Changes + +- 6f17cce: # Additonal CSS Combinations + Ensure seamless support for Tailwind + + - No changes required for client side code as `[data-theme=]` selectors work as before. + - If you are using `ServerSideWrapper` or `NextJsServerTarget` or `NextJsSSGThemeSwitcher`, you need to convert `forcedPages` elements to objects of the shape `{ pathMatcher: RegExp | string; props: ThemeSwitcherProps }`. + - Use `resolvedColorScheme` for more sturdy dark/light/system modes + - Use combinations of `[data-th=""]` and `[data-color-scheme=""]` for dark/light varients of themes + - Use `[data-csp=""]` to style based on colorSchemePreference. + +### Minor Changes + +- # Support custom themeTransition + + - Provide `themeTransition` prop to `ThemeSwitcher` component to apply smooth transition while changing theme. + - Use `setThemeSet` to set `lightTheme` and `darkTheme` together. + #### Motivation: For server side syncing, we need to use cookies and headers. This means that this component and its children can not be static. They will be rendered server side for each request. Thus, we are avoiding the wrapper. Now, only the `NextJsSSGThemeSwitcher` will be rendered server side for each request and rest of your app can be server statically.