react18-tools · mayank1513 · Dec 8, 2023 · Dec 7, 2023 · Dec 8, 2023 · Dec 8, 2023
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -25,7 +25,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           registry-url: https://registry.npmjs.org
-          node-version: 18
+          node-version: 20
       - run: npm i -g pnpm && pnpm i
         name: Install dependencies
         # fail and not publish if any of the unit tests are failing

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           registry-url: https://registry.npmjs.org
       - run: npm i -g pnpm && pnpm i
         name: Install dependencies
@@ -23,3 +23,9 @@ jobs:
         uses: codecov/codecov-action@v3
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+      - uses: paambaati/[email protected]
+        continue-on-error: true
+        env:
+          CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }}
+        with:
+          coverageLocations: ./lib/nextjs-themes/coverage/*.xml:clover
diff --git a/README.md b/README.md
@@ -1,4 +1,6 @@
-# Nextjs-Themes [![Version](https://img.shields.io/npm/v/nextjs-themes.svg?colorB=green)](https://www.npmjs.com/package/nextjs-themes) [![codecov](https://codecov.io/gh/mayank1513/nextjs-themes/branch/main/graph/badge.svg?token=SUTY0GHPHV)](https://codecov.io/gh/mayank1513/nextjs-themes) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/nextjs-themes.svg)](https://www.npmjs.com/package/nextjs-themes) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/nextjs-themes)](https://www.npmjs.com/package/nextjs-themes) [![Publish to npm and GitHub](https://github.com/mayank1513/nextjs-themes/actions/workflows/test.yml/badge.svg)](https://github.com/mayank1513/nextjs-themes/actions/workflows/publish-to-npm-on-new-release.yml) [![Contact me on Codementor](https://www.codementor.io/m-badges/mayank1513/get-help.svg)](https://www.codementor.io/@mayank1513?refer=badge)
+# Nextjs-Themes
+
+[![test](https://github.com/react18-tools/nextjs-themes/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/nextjs-themes/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/149263e95a1388369bb9/maintainability)](https://codeclimate.com/github/react18-tools/nextjs-themes/maintainability) [![codecov](https://codecov.io/gh/mayank1513/nextjs-themes/branch/main/graph/badge.svg?token=SUTY0GHPHV)](https://codecov.io/gh/mayank1513/nextjs-themes) [![Version](https://img.shields.io/npm/v/nextjs-themes.svg?colorB=green)](https://www.npmjs.com/package/nextjs-themes) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/nextjs-themes.svg)](https://www.npmjs.com/package/nextjs-themes) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/nextjs-themes)](https://www.npmjs.com/package/nextjs-themes) [![Contact me on Codementor](https://www.codementor.io/m-badges/mayank1513/get-help.svg)](https://www.codementor.io/@mayank1513?refer=badge)
 
 > This is a sister package of [react18-themes](https://github.com/react18-tools/react18-themes/). Initially we targeted only Next.js and thus this package was named `nextjs-themes`. However, we have expanded support for `Vite` and `Remix` as well. And thus published a package with more generic name, `react18-themes`.
 
@@ -168,10 +170,10 @@ You can also show different images based on the current theme.
 
 ```jsx
 import Image from "next/image";
-import { getResolvedTheme } from "nextjs-themes/utils";
+import { useTheme } from "nextjs-themes";
 
 function ThemedImage() {
-  const resolvedTheme = getResolvedTheme();
+  const { resolvedTheme } = useTheme();
   let src;
 
   switch (resolvedTheme) {
@@ -350,6 +352,22 @@ Nope. It's just a convenient way. You can hard code values for every class as fo
 }
 ```
 
+**Why is `resolvedTheme` and `resolvedColorScheme` necessary?**
+
+When supporting the System theme preference, and forced theme/colorScheme pages, you want to make sure that's reflected in your UI. This means your buttons, selects, dropdowns, or whatever you use to indicate the current colorScheme should say "system" when the System colorScheme preference is active. And also the appropreate theme is available in resolvedTheme.
+
+`resolvedTheme` is then useful for modifying behavior or styles at runtime:
+
+```js
+const { resolvedTheme, resolvedColorScheme } = useTheme();
+
+const background = getBackground(resolvedTheme);
+
+<div style={{ color: resolvedColorScheme === 'dark' ? white : black, background }}>
+```
+
+If we didn't have `resolvedTheme` and only used `theme`, you'd lose information about the state of your UI (you would only know the theme is "system", and not what it resolved to).
+
 ## License
 
 Licensed as MIT open source.

diff --git a/examples/app-router/CHANGELOG.md b/examples/app-router/CHANGELOG.md
@@ -1,5 +1,14 @@
 # app-router
 
+## 0.0.13
+
+### Patch Changes
+
+- Add resolvedTheme and resolvedColorScheme to useTheme state.
+- Updated dependencies
+  - [email protected]
+  - [email protected]
+
 ## 0.0.12
 
 ### Patch Changes

diff --git a/examples/app-router/package.json b/examples/app-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app-router",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3002",
@@ -10,15 +10,15 @@
   },
   "dependencies": {
     "@mayank1513/fork-me": "^2.0.0",
-    "next": "^14.0.3",
+    "next": "^14.0.4",
     "nextjs-themes": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "shared-ui": "workspace:*"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^14.0.3",
-    "@types/node": "^20.10.3",
+    "@next/eslint-plugin-next": "^14.0.4",
+    "@types/node": "^20.10.4",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
     "eslint-config-custom": "workspace:*",

diff --git a/examples/pages-router/CHANGELOG.md b/examples/pages-router/CHANGELOG.md
@@ -1,5 +1,14 @@
 # nextjs-pages-router
 
+## 1.0.8
+
+### Patch Changes
+
+- Add resolvedTheme and resolvedColorScheme to useTheme state.
+- Updated dependencies
+  - [email protected]
+  - [email protected]
+
 ## 1.0.7
 
 ### Patch Changes

diff --git a/examples/pages-router/package.json b/examples/pages-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pages-router",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3003",
@@ -9,14 +9,14 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "^14.0.3",
+    "next": "^14.0.4",
     "nextjs-themes": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "shared-ui": "workspace:*"
   },
   "devDependencies": {
-    "@types/node": "^20.10.3",
+    "@types/node": "^20.10.4",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
     "eslint-config-custom": "workspace:*",

diff --git a/examples/simple-multi-theme/CHANGELOG.md b/examples/simple-multi-theme/CHANGELOG.md
@@ -1,5 +1,14 @@
 # simple-multi-theme
 
+## 1.0.8
+
+### Patch Changes
+
+- Add resolvedTheme and resolvedColorScheme to useTheme state.
+- Updated dependencies
+  - [email protected]
+  - [email protected]
+
 ## 1.0.7
 
 ### Patch Changes

diff --git a/examples/simple-multi-theme/package.json b/examples/simple-multi-theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-multi-theme",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3001",
@@ -9,14 +9,14 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "^14.0.3",
+    "next": "^14.0.4",
     "nextjs-themes": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "shared-ui": "workspace:*"
   },
   "devDependencies": {
-    "@types/node": "^20.10.3",
+    "@types/node": "^20.10.4",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
     "eslint-config-custom": "workspace:*",

diff --git a/examples/tailwind/CHANGELOG.md b/examples/tailwind/CHANGELOG.md
@@ -1,5 +1,13 @@
 # tailwind
 
+## 0.1.2
+
+### Patch Changes
+
+- Add resolvedTheme and resolvedColorScheme to useTheme state.
+- Updated dependencies
+  - [email protected]
+
 ## 0.1.1
 
 ### Patch Changes

diff --git a/examples/tailwind/app/_components/card.tsx b/examples/tailwind/app/_components/card.tsx
@@ -0,0 +1,23 @@
+interface CardProps {
+  href: string;
+  title: string;
+  text: string;
+}
+
+export default function Card({ href, title, text }: CardProps) {
+  return (
+    <a
+      href={href}
+      className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+      target="_blank"
+      rel="noopener noreferrer">
+      <h2 className={`mb-3 text-2xl font-semibold`}>
+        {title + " "}
+        <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+          -&gt;
+        </span>
+      </h2>
+      <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>{text}</p>
+    </a>
+  );
+}
diff --git a/examples/tailwind/app/page.tsx b/examples/tailwind/app/page.tsx
@@ -1,6 +1,7 @@
 import { StarMe } from "@mayank1513/fork-me";
 import Image from "next/image";
 import { ColorSwitch } from "nextjs-themes";
+import Card from "./_components/card";
 
 export default function Home() {
   return (
@@ -36,35 +37,16 @@ export default function Home() {
       <ColorSwitch />
 
       <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
+        <Card
           href="https://react18-tools.github.io/nextjs-themes/"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer">
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about <code>nextjs-themes</code> features and API.
-          </p>
-        </a>
-
-        <a
+          title="Docs"
+          text="Find in-depth information about nextjs-themes features and API."
+        />
+        <Card
           href="https://github.com/react18-tools/nextjs-themes"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer">
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Examples{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Learn through more examples on official repo.</p>
-        </a>
+          title="Examples"
+          text="Learn through more examples on official GitHub repo."
+        />
         <StarMe
           gitHubUrl="https://github.com/react18-tools/nextjs-themes"
           className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30">
@@ -78,21 +60,11 @@ export default function Home() {
             Explore and star official <code>nextjs-themes</code> repo.
           </p>
         </StarMe>
-        <a
+        <Card
           href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer">
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
+          title="Deploy"
+          text="Instantly deploy your Next.js site to a shareable URL with Vercel."
+        />
       </div>
     </main>
   );

diff --git a/examples/tailwind/package.json b/examples/tailwind/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwind",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -10,13 +10,13 @@
   },
   "dependencies": {
     "@mayank1513/fork-me": "^2.0.0",
-    "next": "14.0.3",
+    "next": "14.0.4",
     "nextjs-themes": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.10.3",
+    "@types/node": "^20.10.4",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
     "autoprefixer": "^10.4.16",

diff --git a/examples/vite/CHANGELOG.md b/examples/vite/CHANGELOG.md
@@ -1,5 +1,14 @@
 # vite-example
 
+## 0.0.13
+
+### Patch Changes
+
+- Add resolvedTheme and resolvedColorScheme to useTheme state.
+- Updated dependencies
+  - [email protected]
+  - [email protected]
+
 ## 0.0.12
 
 ### Patch Changes

diff --git a/examples/vite/package.json b/examples/vite/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vite-example",
   "private": true,
-  "version": "0.0.12",
+  "version": "0.0.13",
   "type": "module",
   "scripts": {
     "dev": "vite --port 3001",

diff --git a/lib/nextjs-themes/CHANGELOG.md b/lib/nextjs-themes/CHANGELOG.md
@@ -1,5 +1,11 @@
 # nextjs-themes
 
+## 1.2.1
+
+### Patch Changes
+
+- Add resolvedTheme and resolvedColorScheme to useTheme state.
+
 ## 1.2.0
 
 ### Minor Changes