next-themes - npm Package Compare versions

Comparing version 0.2.0 to 1.0.0-beta.0

dist/index.d.ts

@@ -1,4 +0,4 @@
-import React from 'react';
+import * as React from 'react';
 import type { UseThemeProps, ThemeProviderProps } from './types';
 export declare const useTheme: () => UseThemeProps;
 export declare const ThemeProvider: React.FC<ThemeProviderProps>;

dist/index.js

@@ -1,1 +0,1 @@
-var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=/*#__PURE__*/t(e);const r=["light","dark"],a="(prefers-color-scheme: dark)",o="undefined"==typeof window,s=/*#__PURE__*/e.createContext(void 0),l={setTheme:e=>{},themes:[]},c=({forcedTheme:t,disableTransitionOnChange:o=!1,enableSystem:l=!0,enableColorScheme:c=!0,storageKey:h="theme",themes:f=["light","dark"],defaultTheme:y=(l?"system":"light"),attribute:v="data-theme",value:$,children:g,nonce:b})=>{const[S,T]=e.useState(()=>i(h,y)),[p,w]=e.useState(()=>i(h)),C=$?Object.values($):f,E=e.useCallback(e=>{let t=e;if(!t)return;"system"===e&&l&&(t=u());const n=$?$[t]:t,a=o?d():null,s=document.documentElement;if("class"===v?(s.classList.remove(...C),n&&s.classList.add(n)):n?s.setAttribute(v,n):s.removeAttribute(v),c){const e=r.includes(y)?y:null,n=r.includes(t)?t:e;s.style.colorScheme=n}null==a||a()},[]),k=e.useCallback(e=>{T(e);try{localStorage.setItem(h,e)}catch(e){}},[t]),x=e.useCallback(e=>{const n=u(e);w(n),"system"===S&&l&&!t&&E("system")},[S,t]);return e.useEffect(()=>{const e=window.matchMedia(a);return e.addListener(x),x(e),()=>e.removeListener(x)},[x]),e.useEffect(()=>{const e=e=>{e.key===h&&k(e.newValue||y)};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)},[k]),e.useEffect(()=>{E(null!=t?t:S)},[t,S]),/*#__PURE__*/n.default.createElement(s.Provider,{value:{theme:S,setTheme:k,forcedTheme:t,resolvedTheme:"system"===S?p:S,themes:l?[...f,"system"]:f,systemTheme:l?p:void 0}},/*#__PURE__*/n.default.createElement(m,{forcedTheme:t,disableTransitionOnChange:o,enableSystem:l,enableColorScheme:c,storageKey:h,themes:f,defaultTheme:y,attribute:v,value:$,children:g,attrs:C,nonce:b}),g)},m=/*#__PURE__*/e.memo(({forcedTheme:e,storageKey:t,attribute:o,enableSystem:s,enableColorScheme:l,defaultTheme:c,value:m,attrs:i,nonce:d})=>{const u="system"===c,h="class"===o?`var d=document.documentElement,c=d.classList;c.remove(${i.map(e=>`'${e}'`).join(",")});`:`var d=document.documentElement,n='${o}',s='setAttribute';`,f=l?r.includes(c)&&c?`if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${c}'`:"if(e==='light'||e==='dark')d.style.colorScheme=e":"",y=(e,t=!1,n=!0)=>{const a=m?m[e]:e,s=t?e+"|| ''":`'${a}'`;let c="";return l&&n&&!t&&r.includes(e)&&(c+=`d.style.colorScheme = '${e}';`),"class"===o?c+=t||a?`c.add(${s})`:"null":a&&(c+=`d[s](n,${s})`),c},v=e?`!function(){${h}${y(e)}}()`:s?`!function(){try{${h}var e=localStorage.getItem('${t}');if('system'===e||(!e&&${u})){var t='${a}',m=window.matchMedia(t);if(m.media!==t||m.matches){${y("dark")}}else{${y("light")}}}else if(e){${m?`var x=${JSON.stringify(m)};`:""}${y(m?"x[e]":"e",!0)}}${u?"":"else{"+y(c,!1,!1)+"}"}${f}}catch(e){}}()`:`!function(){try{${h}var e=localStorage.getItem('${t}');if(e){${m?`var x=${JSON.stringify(m)};`:""}${y(m?"x[e]":"e",!0)}}else{${y(c,!1,!1)};}${f}}catch(t){}}();`;/*#__PURE__*/return n.default.createElement("script",{nonce:d,dangerouslySetInnerHTML:{__html:v}})},()=>!0),i=(e,t)=>{if(o)return;let n;try{n=localStorage.getItem(e)||void 0}catch(e){}return n||t},d=()=>{const e=document.createElement("style");return e.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),document.head.appendChild(e),()=>{window.getComputedStyle(document.body),setTimeout(()=>{document.head.removeChild(e)},1)}},u=e=>(e||(e=window.matchMedia(a)),e.matches?"dark":"light");exports.ThemeProvider=t=>e.useContext(s)?/*#__PURE__*/n.default.createElement(e.Fragment,null,t.children):/*#__PURE__*/n.default.createElement(c,t),exports.useTheme=()=>{var t;return null!==(t=e.useContext(s))&&void 0!==t?t:l};
+function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,t}var t=/*#__PURE__*/e(require("react"));const n=["light","dark"],r="(prefers-color-scheme: dark)",o="undefined"==typeof window,a=/*#__PURE__*/t.createContext(void 0),c={setTheme:e=>{},themes:[]},s=({forcedTheme:e,disableTransitionOnChange:o=!1,enableSystem:c=!0,enableColorScheme:s=!0,storageKey:d="theme",themes:h=["light","dark"],defaultTheme:f=(c?"system":"light"),attribute:v="data-theme",value:y,themeColor:g,children:b,nonce:$})=>{const[p,S]=t.useState(()=>e?"forced":i(d,f)),[w,C]=t.useState(()=>i(d)),E=y?Object.values(y):h,T=t.useRef(),k=t.useRef(),x=t.useRef(),O=t.useCallback(e=>{let t=e;if(!t)return;"system"===e&&c&&(t=m());const r=y?y[t]:t,a=o?u():null,l=document.documentElement;if("class"===v?(l.classList.remove(...E),r&&l.classList.add(r)):r?l.setAttribute(v,r):l.removeAttribute(v),g){let e=!1;const n=(i="string"==typeof g?g:g[t]).startsWith("var(--")?(k.current||(k.current=getComputedStyle(document.documentElement)),k.current.getPropertyValue(i.slice(4,-1))):i,r=(()=>{var t;if(null==(t=T.current)?void 0:t.isConnected)return T.current;const n=document.head.querySelector('meta[name="theme-color"]');if(n)return n;const r=document.createElement("meta");return r.setAttribute("name","theme-color"),e=!0,r})();T.current=r,n&&(r.removeAttribute("value"),r.setAttribute("content",n),e&&document.head.appendChild(r))}var i;if(s){const e=n.includes(f)?f:null,r=n.includes(t)?t:e;l.style.colorScheme=r}null==a||a()},[]),L=t.useCallback(t=>{if(S(t),!e)try{localStorage.setItem(d,t)}catch(e){}},[e]),j=t.useCallback(t=>{const n=m(t);C(n),"system"===p&&c&&!e&&O("system")},[p,e]);return t.useEffect(()=>{const e=window.matchMedia(r);return e.addListener(j),j(e),()=>e.removeListener(j)},[j]),t.useEffect(()=>{const t=t=>{t.key===d&&(e&&t.newValue?x.current=t.newValue:L(t.newValue||f))};return window.addEventListener("storage",t),()=>window.removeEventListener("storage",t)},[L]),t.useEffect(()=>{if(e&&"forced"!==p&&L("forced"),!e&&x.current)return L(x.current),O(x.current),void(x.current=void 0);O(null!=e?e:p)},[e,p]),/*#__PURE__*/t.createElement(a.Provider,{value:{theme:p,setTheme:L,resolvedTheme:(null!=e?e:"system"===p)?w:p,themes:c?[...h,"system"]:h,systemTheme:c?w:void 0}},/*#__PURE__*/t.createElement(l,{forcedTheme:e,disableTransitionOnChange:o,enableSystem:c,enableColorScheme:s,storageKey:d,themes:h,defaultTheme:f,attribute:v,value:y,children:b,attrs:E,nonce:$}),b)},l=/*#__PURE__*/t.memo(({forcedTheme:e,storageKey:o,attribute:a,enableSystem:c,enableColorScheme:s,defaultTheme:l,value:i,attrs:u,nonce:m})=>{const d="system"===l,h="class"===a?`var d=document.documentElement,c=d.classList;c.remove(${u.map(e=>`'${e}'`).join(",")});`:`var d=document.documentElement,n='${a}',s='setAttribute';`,f=s?n.includes(l)&&l?`if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${l}'`:"if(e==='light'||e==='dark')d.style.colorScheme=e":"",v=(e,t=!1,r=!0)=>{const o=i?i[e]:e,c=t?e+"|| ''":`'${o}'`;let l="";return s&&r&&!t&&n.includes(e)&&(l+=`d.style.colorScheme = '${e}';`),"class"===a?l+=t||o?`c.add(${c})`:"null":o&&(l+=`d[s](n,${c})`),l},y=e?`!function(){${h}${v(e)}}()`:c?`!function(){try{${h}var e=localStorage.getItem('${o}');if('system'===e||(!e&&${d})){var t='${r}',m=window.matchMedia(t);if(m.media!==t||m.matches){${v("dark")}}else{${v("light")}}}else if(e){${i?`var x=${JSON.stringify(i)};`:""}${v(i?"x[e]":"e",!0)}}${d?"":"else{"+v(l,!1,!1)+"}"}${f}}catch(e){}}()`:`!function(){try{${h}var e=localStorage.getItem('${o}');if(e){${i?`var x=${JSON.stringify(i)};`:""}${v(i?"x[e]":"e",!0)}}else{${v(l,!1,!1)};}${f}}catch(t){}}();`;/*#__PURE__*/return t.createElement("script",{nonce:m,dangerouslySetInnerHTML:{__html:y}})},()=>!0),i=(e,t)=>{if(o)return;let n;try{n=localStorage.getItem(e)||void 0}catch(e){}return n||t},u=()=>{const e=document.createElement("style");return e.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),document.head.appendChild(e),()=>{window.getComputedStyle(document.body),setTimeout(()=>{document.head.removeChild(e)},1)}},m=e=>(e||(e=window.matchMedia(r)),e.matches?"dark":"light");exports.ThemeProvider=e=>t.useContext(a)?/*#__PURE__*/t.createElement(t.Fragment,null,e.children):/*#__PURE__*/t.createElement(s,e),exports.useTheme=()=>{var e;return null!==(e=t.useContext(a))&&void 0!==e?e:c};

dist/index.module.js

@@ -1,1 +0,1 @@
-import e,{useContext as t,Fragment as n,useState as r,useCallback as o,useEffect as a,memo as s,createContext as l}from"react";const m=["light","dark"],i="(prefers-color-scheme: dark)",c="undefined"==typeof window,d=/*#__PURE__*/l(void 0),u={setTheme:e=>{},themes:[]},h=()=>{var e;return null!==(e=t(d))&&void 0!==e?e:u},y=r=>t(d)?/*#__PURE__*/e.createElement(n,null,r.children):/*#__PURE__*/e.createElement($,r),$=({forcedTheme:t,disableTransitionOnChange:n=!1,enableSystem:s=!0,enableColorScheme:l=!0,storageKey:c="theme",themes:u=["light","dark"],defaultTheme:h=(s?"system":"light"),attribute:y="data-theme",value:$,children:b,nonce:p})=>{const[w,T]=r(()=>f(c,h)),[E,k]=r(()=>f(c)),C=$?Object.values($):u,L=o(e=>{let t=e;if(!t)return;"system"===e&&s&&(t=S());const r=$?$[t]:t,o=n?g():null,a=document.documentElement;if("class"===y?(a.classList.remove(...C),r&&a.classList.add(r)):r?a.setAttribute(y,r):a.removeAttribute(y),l){const e=m.includes(h)?h:null,n=m.includes(t)?t:e;a.style.colorScheme=n}null==o||o()},[]),x=o(e=>{T(e);try{localStorage.setItem(c,e)}catch(e){}},[t]),I=o(e=>{const n=S(e);k(n),"system"===w&&s&&!t&&L("system")},[w,t]);return a(()=>{const e=window.matchMedia(i);return e.addListener(I),I(e),()=>e.removeListener(I)},[I]),a(()=>{const e=e=>{e.key===c&&x(e.newValue||h)};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)},[x]),a(()=>{L(null!=t?t:w)},[t,w]),/*#__PURE__*/e.createElement(d.Provider,{value:{theme:w,setTheme:x,forcedTheme:t,resolvedTheme:"system"===w?E:w,themes:s?[...u,"system"]:u,systemTheme:s?E:void 0}},/*#__PURE__*/e.createElement(v,{forcedTheme:t,disableTransitionOnChange:n,enableSystem:s,enableColorScheme:l,storageKey:c,themes:u,defaultTheme:h,attribute:y,value:$,children:b,attrs:C,nonce:p}),b)},v=/*#__PURE__*/s(({forcedTheme:t,storageKey:n,attribute:r,enableSystem:o,enableColorScheme:a,defaultTheme:s,value:l,attrs:c,nonce:d})=>{const u="system"===s,h="class"===r?`var d=document.documentElement,c=d.classList;c.remove(${c.map(e=>`'${e}'`).join(",")});`:`var d=document.documentElement,n='${r}',s='setAttribute';`,y=a?m.includes(s)&&s?`if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${s}'`:"if(e==='light'||e==='dark')d.style.colorScheme=e":"",$=(e,t=!1,n=!0)=>{const o=l?l[e]:e,s=t?e+"|| ''":`'${o}'`;let i="";return a&&n&&!t&&m.includes(e)&&(i+=`d.style.colorScheme = '${e}';`),"class"===r?i+=t||o?`c.add(${s})`:"null":o&&(i+=`d[s](n,${s})`),i},v=t?`!function(){${h}${$(t)}}()`:o?`!function(){try{${h}var e=localStorage.getItem('${n}');if('system'===e||(!e&&${u})){var t='${i}',m=window.matchMedia(t);if(m.media!==t||m.matches){${$("dark")}}else{${$("light")}}}else if(e){${l?`var x=${JSON.stringify(l)};`:""}${$(l?"x[e]":"e",!0)}}${u?"":"else{"+$(s,!1,!1)+"}"}${y}}catch(e){}}()`:`!function(){try{${h}var e=localStorage.getItem('${n}');if(e){${l?`var x=${JSON.stringify(l)};`:""}${$(l?"x[e]":"e",!0)}}else{${$(s,!1,!1)};}${y}}catch(t){}}();`;/*#__PURE__*/return e.createElement("script",{nonce:d,dangerouslySetInnerHTML:{__html:v}})},()=>!0),f=(e,t)=>{if(c)return;let n;try{n=localStorage.getItem(e)||void 0}catch(e){}return n||t},g=()=>{const e=document.createElement("style");return e.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),document.head.appendChild(e),()=>{window.getComputedStyle(document.body),setTimeout(()=>{document.head.removeChild(e)},1)}},S=e=>(e||(e=window.matchMedia(i)),e.matches?"dark":"light");export{y as ThemeProvider,h as useTheme};
+import*as e from"react";const t=["light","dark"],n="(prefers-color-scheme: dark)",r="undefined"==typeof window,o=/*#__PURE__*/e.createContext(void 0),a={setTheme:e=>{},themes:[]},s=()=>{var t;return null!==(t=e.useContext(o))&&void 0!==t?t:a},c=t=>e.useContext(o)?/*#__PURE__*/e.createElement(e.Fragment,null,t.children):/*#__PURE__*/e.createElement(l,t),l=({forcedTheme:r,disableTransitionOnChange:a=!1,enableSystem:s=!0,enableColorScheme:c=!0,storageKey:l="theme",themes:h=["light","dark"],defaultTheme:f=(s?"system":"light"),attribute:v="data-theme",value:y,themeColor:g,children:$,nonce:b})=>{const[S,p]=e.useState(()=>r?"forced":i(l,f)),[C,w]=e.useState(()=>i(l)),E=y?Object.values(y):h,T=e.useRef(),k=e.useRef(),x=e.useRef(),L=e.useCallback(e=>{let n=e;if(!n)return;"system"===e&&s&&(n=d());const r=y?y[n]:n,o=a?u():null,l=document.documentElement;if("class"===v?(l.classList.remove(...E),r&&l.classList.add(r)):r?l.setAttribute(v,r):l.removeAttribute(v),g){let e=!1;const t=(m="string"==typeof g?g:g[n]).startsWith("var(--")?(k.current||(k.current=getComputedStyle(document.documentElement)),k.current.getPropertyValue(m.slice(4,-1))):m,r=(()=>{var t;if(null==(t=T.current)?void 0:t.isConnected)return T.current;const n=document.head.querySelector('meta[name="theme-color"]');if(n)return n;const r=document.createElement("meta");return r.setAttribute("name","theme-color"),e=!0,r})();T.current=r,t&&(r.removeAttribute("value"),r.setAttribute("content",t),e&&document.head.appendChild(r))}var m;if(c){const e=t.includes(f)?f:null,r=t.includes(n)?n:e;l.style.colorScheme=r}null==o||o()},[]),A=e.useCallback(e=>{if(p(e),!r)try{localStorage.setItem(l,e)}catch(e){}},[r]),I=e.useCallback(e=>{const t=d(e);w(t),"system"===S&&s&&!r&&L("system")},[S,r]);return e.useEffect(()=>{const e=window.matchMedia(n);return e.addListener(I),I(e),()=>e.removeListener(I)},[I]),e.useEffect(()=>{const e=e=>{e.key===l&&(r&&e.newValue?x.current=e.newValue:A(e.newValue||f))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)},[A]),e.useEffect(()=>{if(r&&"forced"!==S&&A("forced"),!r&&x.current)return A(x.current),L(x.current),void(x.current=void 0);L(null!=r?r:S)},[r,S]),/*#__PURE__*/e.createElement(o.Provider,{value:{theme:S,setTheme:A,resolvedTheme:(null!=r?r:"system"===S)?C:S,themes:s?[...h,"system"]:h,systemTheme:s?C:void 0}},/*#__PURE__*/e.createElement(m,{forcedTheme:r,disableTransitionOnChange:a,enableSystem:s,enableColorScheme:c,storageKey:l,themes:h,defaultTheme:f,attribute:v,value:y,children:$,attrs:E,nonce:b}),$)},m=/*#__PURE__*/e.memo(({forcedTheme:r,storageKey:o,attribute:a,enableSystem:s,enableColorScheme:c,defaultTheme:l,value:m,attrs:i,nonce:u})=>{const d="system"===l,h="class"===a?`var d=document.documentElement,c=d.classList;c.remove(${i.map(e=>`'${e}'`).join(",")});`:`var d=document.documentElement,n='${a}',s='setAttribute';`,f=c?t.includes(l)&&l?`if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${l}'`:"if(e==='light'||e==='dark')d.style.colorScheme=e":"",v=(e,n=!1,r=!0)=>{const o=m?m[e]:e,s=n?e+"|| ''":`'${o}'`;let l="";return c&&r&&!n&&t.includes(e)&&(l+=`d.style.colorScheme = '${e}';`),"class"===a?l+=n||o?`c.add(${s})`:"null":o&&(l+=`d[s](n,${s})`),l},y=r?`!function(){${h}${v(r)}}()`:s?`!function(){try{${h}var e=localStorage.getItem('${o}');if('system'===e||(!e&&${d})){var t='${n}',m=window.matchMedia(t);if(m.media!==t||m.matches){${v("dark")}}else{${v("light")}}}else if(e){${m?`var x=${JSON.stringify(m)};`:""}${v(m?"x[e]":"e",!0)}}${d?"":"else{"+v(l,!1,!1)+"}"}${f}}catch(e){}}()`:`!function(){try{${h}var e=localStorage.getItem('${o}');if(e){${m?`var x=${JSON.stringify(m)};`:""}${v(m?"x[e]":"e",!0)}}else{${v(l,!1,!1)};}${f}}catch(t){}}();`;/*#__PURE__*/return e.createElement("script",{nonce:u,dangerouslySetInnerHTML:{__html:y}})},()=>!0),i=(e,t)=>{if(r)return;let n;try{n=localStorage.getItem(e)||void 0}catch(e){}return n||t},u=()=>{const e=document.createElement("style");return e.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),document.head.appendChild(e),()=>{window.getComputedStyle(document.body),setTimeout(()=>{document.head.removeChild(e)},1)}},d=e=>(e||(e=window.matchMedia(n)),e.matches?"dark":"light");export{c as ThemeProvider,s as useTheme};

dist/index.umd.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e||self).nextThemes={},e.react)}(this,function(e,t){function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=/*#__PURE__*/n(t);const a=["light","dark"],r="(prefers-color-scheme: dark)",s="undefined"==typeof window,l=/*#__PURE__*/t.createContext(void 0),c={setTheme:e=>{},themes:[]},i=({forcedTheme:e,disableTransitionOnChange:n=!1,enableSystem:s=!0,enableColorScheme:c=!0,storageKey:i="theme",themes:f=["light","dark"],defaultTheme:y=(s?"system":"light"),attribute:v="data-theme",value:g,children:$,nonce:b})=>{const[p,T]=t.useState(()=>m(i,y)),[S,w]=t.useState(()=>m(i)),C=g?Object.values(g):f,E=t.useCallback(e=>{let t=e;if(!t)return;"system"===e&&s&&(t=h());const o=g?g[t]:t,r=n?u():null,l=document.documentElement;if("class"===v?(l.classList.remove(...C),o&&l.classList.add(o)):o?l.setAttribute(v,o):l.removeAttribute(v),c){const e=a.includes(y)?y:null,n=a.includes(t)?t:e;l.style.colorScheme=n}null==r||r()},[]),k=t.useCallback(e=>{T(e);try{localStorage.setItem(i,e)}catch(e){}},[e]),x=t.useCallback(t=>{const n=h(t);w(n),"system"===p&&s&&!e&&E("system")},[p,e]);return t.useEffect(()=>{const e=window.matchMedia(r);return e.addListener(x),x(e),()=>e.removeListener(x)},[x]),t.useEffect(()=>{const e=e=>{e.key===i&&k(e.newValue||y)};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)},[k]),t.useEffect(()=>{E(null!=e?e:p)},[e,p]),/*#__PURE__*/o.default.createElement(l.Provider,{value:{theme:p,setTheme:k,forcedTheme:e,resolvedTheme:"system"===p?S:p,themes:s?[...f,"system"]:f,systemTheme:s?S:void 0}},/*#__PURE__*/o.default.createElement(d,{forcedTheme:e,disableTransitionOnChange:n,enableSystem:s,enableColorScheme:c,storageKey:i,themes:f,defaultTheme:y,attribute:v,value:g,children:$,attrs:C,nonce:b}),$)},d=/*#__PURE__*/t.memo(({forcedTheme:e,storageKey:t,attribute:n,enableSystem:s,enableColorScheme:l,defaultTheme:c,value:i,attrs:d,nonce:m})=>{const u="system"===c,h="class"===n?`var d=document.documentElement,c=d.classList;c.remove(${d.map(e=>`'${e}'`).join(",")});`:`var d=document.documentElement,n='${n}',s='setAttribute';`,f=l?a.includes(c)&&c?`if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${c}'`:"if(e==='light'||e==='dark')d.style.colorScheme=e":"",y=(e,t=!1,o=!0)=>{const r=i?i[e]:e,s=t?e+"|| ''":`'${r}'`;let c="";return l&&o&&!t&&a.includes(e)&&(c+=`d.style.colorScheme = '${e}';`),"class"===n?c+=t||r?`c.add(${s})`:"null":r&&(c+=`d[s](n,${s})`),c},v=e?`!function(){${h}${y(e)}}()`:s?`!function(){try{${h}var e=localStorage.getItem('${t}');if('system'===e||(!e&&${u})){var t='${r}',m=window.matchMedia(t);if(m.media!==t||m.matches){${y("dark")}}else{${y("light")}}}else if(e){${i?`var x=${JSON.stringify(i)};`:""}${y(i?"x[e]":"e",!0)}}${u?"":"else{"+y(c,!1,!1)+"}"}${f}}catch(e){}}()`:`!function(){try{${h}var e=localStorage.getItem('${t}');if(e){${i?`var x=${JSON.stringify(i)};`:""}${y(i?"x[e]":"e",!0)}}else{${y(c,!1,!1)};}${f}}catch(t){}}();`;/*#__PURE__*/return o.default.createElement("script",{nonce:m,dangerouslySetInnerHTML:{__html:v}})},()=>!0),m=(e,t)=>{if(s)return;let n;try{n=localStorage.getItem(e)||void 0}catch(e){}return n||t},u=()=>{const e=document.createElement("style");return e.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),document.head.appendChild(e),()=>{window.getComputedStyle(document.body),setTimeout(()=>{document.head.removeChild(e)},1)}},h=e=>(e||(e=window.matchMedia(r)),e.matches?"dark":"light");e.ThemeProvider=e=>t.useContext(l)?/*#__PURE__*/o.default.createElement(t.Fragment,null,e.children):/*#__PURE__*/o.default.createElement(i,e),e.useTheme=()=>{var e;return null!==(e=t.useContext(l))&&void 0!==e?e:c}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e||self).nextThemes={},e.react)}(this,function(e,t){function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,t}var r=/*#__PURE__*/n(t);const o=["light","dark"],a="(prefers-color-scheme: dark)",c="undefined"==typeof window,s=/*#__PURE__*/r.createContext(void 0),l={setTheme:e=>{},themes:[]},i=({forcedTheme:e,disableTransitionOnChange:t=!1,enableSystem:n=!0,enableColorScheme:c=!0,storageKey:l="theme",themes:i=["light","dark"],defaultTheme:f=(n?"system":"light"),attribute:y="data-theme",value:v,themeColor:g,children:b,nonce:p})=>{const[$,S]=r.useState(()=>e?"forced":m(l,f)),[T,w]=r.useState(()=>m(l)),C=v?Object.values(v):i,E=r.useRef(),k=r.useRef(),x=r.useRef(),O=r.useCallback(e=>{let r=e;if(!r)return;"system"===e&&n&&(r=h());const a=v?v[r]:r,s=t?d():null,l=document.documentElement;if("class"===y?(l.classList.remove(...C),a&&l.classList.add(a)):a?l.setAttribute(y,a):l.removeAttribute(y),g){let e=!1;const t=(i="string"==typeof g?g:g[r]).startsWith("var(--")?(k.current||(k.current=getComputedStyle(document.documentElement)),k.current.getPropertyValue(i.slice(4,-1))):i,n=(()=>{var t;if(null==(t=E.current)?void 0:t.isConnected)return E.current;const n=document.head.querySelector('meta[name="theme-color"]');if(n)return n;const r=document.createElement("meta");return r.setAttribute("name","theme-color"),e=!0,r})();E.current=n,t&&(n.removeAttribute("value"),n.setAttribute("content",t),e&&document.head.appendChild(n))}var i;if(c){const e=o.includes(f)?f:null,t=o.includes(r)?r:e;l.style.colorScheme=t}null==s||s()},[]),L=r.useCallback(t=>{if(S(t),!e)try{localStorage.setItem(l,t)}catch(e){}},[e]),j=r.useCallback(t=>{const r=h(t);w(r),"system"===$&&n&&!e&&O("system")},[$,e]);return r.useEffect(()=>{const e=window.matchMedia(a);return e.addListener(j),j(e),()=>e.removeListener(j)},[j]),r.useEffect(()=>{const t=t=>{t.key===l&&(e&&t.newValue?x.current=t.newValue:L(t.newValue||f))};return window.addEventListener("storage",t),()=>window.removeEventListener("storage",t)},[L]),r.useEffect(()=>{if(e&&"forced"!==$&&L("forced"),!e&&x.current)return L(x.current),O(x.current),void(x.current=void 0);O(null!=e?e:$)},[e,$]),/*#__PURE__*/r.createElement(s.Provider,{value:{theme:$,setTheme:L,resolvedTheme:(null!=e?e:"system"===$)?T:$,themes:n?[...i,"system"]:i,systemTheme:n?T:void 0}},/*#__PURE__*/r.createElement(u,{forcedTheme:e,disableTransitionOnChange:t,enableSystem:n,enableColorScheme:c,storageKey:l,themes:i,defaultTheme:f,attribute:y,value:v,children:b,attrs:C,nonce:p}),b)},u=/*#__PURE__*/r.memo(({forcedTheme:e,storageKey:t,attribute:n,enableSystem:c,enableColorScheme:s,defaultTheme:l,value:i,attrs:u,nonce:m})=>{const d="system"===l,h="class"===n?`var d=document.documentElement,c=d.classList;c.remove(${u.map(e=>`'${e}'`).join(",")});`:`var d=document.documentElement,n='${n}',s='setAttribute';`,f=s?o.includes(l)&&l?`if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${l}'`:"if(e==='light'||e==='dark')d.style.colorScheme=e":"",y=(e,t=!1,r=!0)=>{const a=i?i[e]:e,c=t?e+"|| ''":`'${a}'`;let l="";return s&&r&&!t&&o.includes(e)&&(l+=`d.style.colorScheme = '${e}';`),"class"===n?l+=t||a?`c.add(${c})`:"null":a&&(l+=`d[s](n,${c})`),l},v=e?`!function(){${h}${y(e)}}()`:c?`!function(){try{${h}var e=localStorage.getItem('${t}');if('system'===e||(!e&&${d})){var t='${a}',m=window.matchMedia(t);if(m.media!==t||m.matches){${y("dark")}}else{${y("light")}}}else if(e){${i?`var x=${JSON.stringify(i)};`:""}${y(i?"x[e]":"e",!0)}}${d?"":"else{"+y(l,!1,!1)+"}"}${f}}catch(e){}}()`:`!function(){try{${h}var e=localStorage.getItem('${t}');if(e){${i?`var x=${JSON.stringify(i)};`:""}${y(i?"x[e]":"e",!0)}}else{${y(l,!1,!1)};}${f}}catch(t){}}();`;/*#__PURE__*/return r.createElement("script",{nonce:m,dangerouslySetInnerHTML:{__html:v}})},()=>!0),m=(e,t)=>{if(c)return;let n;try{n=localStorage.getItem(e)||void 0}catch(e){}return n||t},d=()=>{const e=document.createElement("style");return e.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),document.head.appendChild(e),()=>{window.getComputedStyle(document.body),setTimeout(()=>{document.head.removeChild(e)},1)}},h=e=>(e||(e=window.matchMedia(a)),e.matches?"dark":"light");e.ThemeProvider=e=>r.useContext(s)?/*#__PURE__*/r.createElement(r.Fragment,null,e.children):/*#__PURE__*/r.createElement(i,e),e.useTheme=()=>{var e;return null!==(e=r.useContext(s))&&void 0!==e?e:l}});

dist/types.d.ts

@@ -8,4 +8,2 @@ /// <reference types="react" />
     themes: string[];
-    /** Forced theme name for the current page */
-    forcedTheme?: string;
     /** Update the theme */
@@ -15,3 +13,7 @@ setTheme: (theme: string) => void;
     theme?: string;
-    /** If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme` */
+    /**
+     * If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light".
+     * If `forcedTheme` is set, the forced theme value is returned.
+     * Otherwise, identical to `theme`.
+     */
     resolvedTheme?: string;
@@ -40,2 +42,4 @@ /** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
     value?: ValueObject;
+    /** Mapping of theme name to theme-color meta tag. CSS color string, or object where key is the theme name and value is the meta tag value */
+    themeColor?: string | ValueObject;
     /** Nonce string to pass to the inline script for CSP headers */
@@ -42,0 +46,0 @@ nonce?: string;

package.json

 {
   "name": "next-themes",
-  "version": "0.2.0",
+  "version": "1.0.0-beta.0",
   "main": "./dist/index.js",
@@ -15,3 +15,4 @@ "module": "./dist/index.module.js",
     "build": "microbundle --jsx React.createElement --compress --no-sourcemap",
-    "test": "jest __tests__"
+    "test": "jest __tests__",
+    "test:e2e": "yarn playwright test"
   },
@@ -31,3 +32,4 @@ "dependencies": {},
     "@babel/preset-typescript": "^7.13.0",
-    "@testing-library/react": "^11.2.5",
+    "@playwright/test": "^1.21.1",
+    "@testing-library/react": "^12.1.5",
     "@types/jest": "^26.0.21",
@@ -37,3 +39,3 @@ "@types/next": "^9.0.0",
     "babel-jest": "^26.6.3",
-    "jest": "^26.6.3",
+    "jest": "^27.5.1",
     "microbundle": "^0.15.0",
@@ -40,0 +42,0 @@ "prettier": "^2.2.1",

README.md

@@ -1,2 +0,2 @@
-# next-themes ![next-themes minzip package size](https://img.shields.io/bundlephobia/minzip/next-themes) ![Version](https://img.shields.io/npm/v/next-themes.svg?colorB=green)
+# next-themes ![next-themes minzip package size](https://img.shields.io/bundlephobia/minzip/next-themes/beta) ![Version](https://img.shields.io/npm/v/next-themes/beta.svg?colorB=green)
 
@@ -113,2 +113,3 @@ An abstraction for themes in your Next.js app.
   - value is an `object` where key is the theme name and value is the attribute value ([example](#differing-dom-attribute-and-theme-name))
+- `nonce`: Optional nonce passed to the injected `script` tag, used to allow-list the next-themes script in your CSP
 
@@ -122,3 +123,6 @@ ### useTheme
 - `forcedTheme`: Forced page theme or falsy. If `forcedTheme` is set, you should disable any theme switching UI
-- `resolvedTheme`: If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme`
+- `resolvedTheme`: Returns the effective theme color of the page.
+  - If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light".
+  - If `forcedTheme` is set, the name of the forced theme is returned.
+  - Otherwise identical to `theme`.
 - `systemTheme`: If `enableSystem` is true, represents the System theme preference ("dark" or "light"), regardless what the active theme is
@@ -300,13 +304,16 @@ - `themes`: The list of themes passed to `ThemeProvider` (with "system" appended, if `enableSystem` is true)
 
-const ThemeChanger = () => {
-  const { theme, setTheme } = useTheme()
+// Do NOT use this! It will throw a hydration mismatch error.
+const ThemeSwitch = () => {
+  const { resolvedTheme, setTheme } = useTheme()
 
   return (
-    <div>
-      The current theme is: {theme}
-      <button onClick={() => setTheme('light')}>Light Mode</button>
-      <button onClick={() => setTheme('dark')}>Dark Mode</button>
-    </div>
+    <select value={resolvedTheme} onChange={e => setTheme(e.target.value)}>
+      <option value="system">System</option>
+      <option value="dark">Dark</option>
+      <option value="light">Light</option>
+    </select>
   )
 }
+
+export default ThemeSwitch
 ```
@@ -317,21 +324,28 @@
 ```js
+import { useState, useEffect } from 'react'
 import { useTheme } from 'next-themes'
 
-const ThemeChanger = () => {
+const ThemeSwitch = () => {
   const [mounted, setMounted] = useState(false)
-  const { theme, setTheme } = useTheme()
+  const { resolvedTheme, setTheme } = useTheme()
 
-  // When mounted on client, now we can show the UI
-  useEffect(() => setMounted(true), [])
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true)
+  }, [])
 
-  if (!mounted) return null
+  if (!mounted) {
+    return null
+  }
 
   return (
-    <div>
-      The current theme is: {theme}
-      <button onClick={() => setTheme('light')}>Light Mode</button>
-      <button onClick={() => setTheme('dark')}>Dark Mode</button>
-    </div>
+    <select value={resolvedTheme} onChange={e => setTheme(e.target.value)}>
+      <option value="system">System</option>
+      <option value="dark">Dark</option>
+      <option value="light">Light</option>
+    </select>
   )
 }
+
+export default ThemeSwitch
 ```
@@ -341,4 +355,6 @@
 
-For example, with [`next/image`](https://nextjs.org/docs/basic-features/image-optimization) you can use an empty image until the theme is resolved.
+#### Images
 
+Showing different images based on the current theme also suffers from the hydration mismatch problem. With [`next/image`](https://nextjs.org/docs/basic-features/image-optimization) you can use an empty image until the theme is resolved:
+
 ```js
@@ -366,4 +382,37 @@ import Image from 'next/image'
 }
+
+export default ThemedImage
 ```
 
+#### CSS
+
+You can also use CSS to hide or show content based on the current theme. To avoid the hydration mismatch, you'll need to render _both_ versions of the UI, with CSS hiding the unused version. For example:
+
+```jsx
+function ThemedImage() {
+  return (
+    <>
+      {/* When the theme is dark, hide this div */}
+      <div data-hide-on-theme="dark">
+        <Image src="light.png" width={400} height={400} />
+      </div>
+
+      {/* When the theme is light, hide this div */}
+      <div data-hide-on-theme="light">
+        <Image src="dark.png" width={400} height={400} />
+      </div>
+    </>
+  )
+}
+
+export default ThemedImage
+```
+
+```css
+[data-theme='dark'] [data-hide-on-theme='dark'],
+[data-theme='light'] [data-hide-on-theme='light'] {
+  display: none;
+}
+```
+
 ### With Tailwind
@@ -370,0 +419,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37740

increased by3.82%

Lines of code

121

increased by0.83%

Number of lines in readme file

503

increased by10.79%

Worsened metrics

Dev dependency count

18

increased by5.88%

Number of package files

8

decreased by-11.11%

No dependency changes