-
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
18f6ee5
commit b24a9a7
Showing
52 changed files
with
683 additions
and
378 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| <!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Migration Guide | Nextjs Themes</title><meta name="description" content="Documentation for Nextjs Themes"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"><a href="https://github.com/react18-tools/nextjs-themes">GitHub</a></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Nextjs Themes</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../index.html">Nextjs Themes</a></li><li><a href="Migration_Guide.html">Migration Guide</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="md:migration-guide" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Migration Guide<a href="#md:migration-guide" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><a id="md:migrating-to-v3-and-v4" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Migrating to V3 and V4<a href="#md:migrating-to-v3-and-v4" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><blockquote> | ||
| <p>V3 was entirely re-written with minimal API changes. V4 optimises V3 by minor refactors.</p> | ||
| </blockquote> | ||
| <ul> | ||
| <li>No more cookies.</li> | ||
| <li>You no longer need to use <code>NextJsSSGThemeSwitcher</code>, <code>NextJsServerTarget</code>, or <code>ServerSideWrapper</code>.</li> | ||
| <li>Flash of Unstyled Content (FOUC) is now handled by an injected script.</li> | ||
| <li>If you have been using these components, they will have no effect. We recommend removing them.</li> | ||
| <li>There is no need to use sibling selectors. Without <code>NextJsSSGThemeSwitcher</code> or <code>NextJsServerTarget</code>, you are free to use any target, whether as a wrapper or a sibling.</li> | ||
| </ul> | ||
| <a id="md:breaking-changes---these-should-only-affect-a-very-small-fraction-of-library-users" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Breaking Changes - these should only affect a very small fraction of library users<a href="#md:breaking-changes---these-should-only-affect-a-very-small-fraction-of-library-users" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul> | ||
| <li><code>ForceColorScheme</code> and <code>ForceTheme</code> are no longer exported from <code>nextjs-themes</code> or <code>nextjs-themes/client</code>. Use <code>nextjs-themes/force-color-scheme</code> or <code>nextjs-themes/force-theme</code> instead.</li> | ||
| <li>The class names for <code>ColorSwitch</code> have been shortened.</li> | ||
| </ul> | ||
| <a id="md:migrating-from-v1-to-v2" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Migrating from V1 to V2<a href="#md:migrating-from-v1-to-v2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="md:major-changes" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Major Changes<a href="#md:major-changes" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul> | ||
| <li> | ||
| <p>Commit <code>6f17cce</code>: Added additional CSS combinations to ensure seamless support for Tailwind.</p> | ||
| <ul> | ||
| <li>No changes are required for client-side code as <code>[data-theme=]</code> selectors function as before.</li> | ||
| <li>If you are using <code>ServerSideWrapper</code>, <code>NextJsServerTarget</code>, or <code>NextJsSSGThemeSwitcher</code>, you need to convert <code>forcedPages</code> elements to objects shaped like <code>{ pathMatcher: RegExp | string; props: ThemeSwitcherProps }</code>.</li> | ||
| <li>Use <code>resolvedColorScheme</code> for more robust dark/light/system modes.</li> | ||
| <li>Use combinations of <code>[data-th=""]</code> and <code>[data-color-scheme=""]</code> for dark/light theme variants.</li> | ||
| <li>Use <code>[data-csp=""]</code> to style based on color scheme preference.</li> | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
| <a id="md:minor-changes" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Minor Changes<a href="#md:minor-changes" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul> | ||
| <li> | ||
| <p>Support for custom <code>themeTransition</code>.</p> | ||
| <ul> | ||
| <li>Provide the <code>themeTransition</code> prop to the <code>ThemeSwitcher</code> component to apply a smooth transition when changing the theme.</li> | ||
| <li>Use <code>setThemeSet</code> to set <code>lightTheme</code> and <code>darkTheme</code> together.</li> | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
| <a id="md:motivation" class="tsd-anchor"></a><h4 class="tsd-anchor-link">Motivation<a href="#md:motivation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h4><p>For server-side syncing, cookies and headers are required. This means that this component and its children cannot be static and will be rendered server-side for each request. To avoid the wrapper, only the <code>NextJsSSGThemeSwitcher</code> will be rendered server-side for each request, while the rest of your app can be served statically.</p> | ||
| <p>Consider the following when migrating to V2:</p> | ||
| <ul> | ||
| <li>No changes are required for projects not using the <code>Next.js</code> app router or server components, aside from updating the cookies policy if needed.</li> | ||
| <li>Persistent storage now uses cookies instead of <code>localStorage</code>. (You might need to update your cookies policy accordingly.)</li> | ||
| <li>We have introduced <code>NextJsSSGThemeSwitcher</code> in addition to <code>ServerSideWrapper</code> for <code>Next.js</code>. You no longer need to use a wrapper component that breaks static generation and forces SSR.</li> | ||
| <li>For more details, visit <a href="#md:with-nextjs-app-router-server-components">With Next.js <code>app</code> router (Server Components)</a>.</li> | ||
| </ul> | ||
| <a id="md:migrating-from-v0-to-v1" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Migrating from V0 to V1<a href="#md:migrating-from-v0-to-v1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><ul> | ||
| <li><code>defaultDarkTheme</code> has been renamed to <code>darkTheme</code>.</li> | ||
| <li><code>setDefaultDarkTheme</code> has been renamed to <code>setDarkTheme</code>.</li> | ||
| <li><code>defaultLightTheme</code> has been renamed to <code>lightTheme</code>.</li> | ||
| <li><code>setDefaultLightTheme</code> has been renamed to <code>setLightTheme</code>.</li> | ||
| </ul> | ||
| <hr /> | ||
| <p align="center" style="text-align:center">with 💖 by <a href="https://mayank-chaudhari.vercel.app" target="_blank">Mayank Kumar Chaudhari</a></p></div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#md:migration-guide"><span>Migration <wbr/>Guide</span></a><ul><li><a href="#md:migrating-to-v3-and-v4"><span>Migrating to <wbr/>V3 and <wbr/>V4</span></a></li><li><ul><li><a href="#md:breaking-changes---these-should-only-affect-a-very-small-fraction-of-library-users"><span>Breaking <wbr/>Changes -<wbr/> these should only affect a very small fraction of library users</span></a></li></ul></li><li><a href="#md:migrating-from-v1-to-v2"><span>Migrating from <wbr/>V1 to <wbr/>V2</span></a></li><li><ul><li><a href="#md:major-changes"><span>Major <wbr/>Changes</span></a></li><li><a href="#md:minor-changes"><span>Minor <wbr/>Changes</span></a></li><li><ul><li><a href="#md:motivation"><span>Motivation</span></a></li></ul></li></ul></li><li><a href="#md:migrating-from-v0-to-v1"><span>Migrating from <wbr/>V0 to <wbr/>V1</span></a></li></ul></div></details></div><div class="site-menu"><nav id="tsd-sidebar-links" class="tsd-navigation"><a href="https://github.com/react18-tools/nextjs-themes" class="tsd-nav-link">GitHub</a></nav><nav class="tsd-navigation"><a href="../index.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>Nextjs Themes</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer></footer><div class="overlay"></div></body></html> |
Oops, something went wrong.