();
45 |
46 | const insertStyle = React.useCallback(
47 | (linkElement: HTMLElement): HTMLElement | void => {
48 | if (insertionPoint || insertionPoint === null) {
49 | const insertionPointElement = isElement(insertionPoint)
50 | ? (insertionPoint as HTMLElement)
51 | : findCommentNode(insertionPoint as string);
52 |
53 | if (!insertionPointElement) {
54 | console.warn(
55 | `Insertion point '${insertionPoint}' does not exist. Be sure to add comment on head and that it matches the insertionPoint`
56 | );
57 | return document.head.appendChild(linkElement);
58 | }
59 |
60 | const { parentNode } = insertionPointElement;
61 | if (parentNode) {
62 | return parentNode.insertBefore(
63 | linkElement,
64 | insertionPointElement.nextSibling
65 | );
66 | }
67 | } else {
68 | return document.head.appendChild(linkElement);
69 | }
70 | },
71 | [insertionPoint]
72 | );
73 |
74 | const switcher = React.useCallback(
75 | ({ theme }: { theme: string }) => {
76 | if (theme === currentTheme) return;
77 |
78 | if (themeMap[theme]) {
79 | setStatus(Status.loading);
80 |
81 | const linkElement = createLinkElement({
82 | type: 'text/css',
83 | rel: 'stylesheet',
84 | id: id + '_temp',
85 | href: themeMap[theme],
86 | onload: () => {
87 | const previousStyle = document.getElementById(id);
88 | if (previousStyle) {
89 | previousStyle.remove();
90 | }
91 |
92 | const nextStyle = document.getElementById(id + '_temp');
93 | if (nextStyle) {
94 | nextStyle.setAttribute('id', id);
95 | }
96 | setStatus(Status.loaded);
97 | },
98 | });
99 |
100 | insertStyle(linkElement);
101 | setCurrentTheme(theme);
102 | } else {
103 | return console.warn('Could not find specified theme');
104 | }
105 |
106 | document.body.setAttribute(attr, theme);
107 | },
108 | [themeMap, insertStyle, attr, id, currentTheme]
109 | );
110 |
111 | React.useEffect(() => {
112 | if (defaultTheme) {
113 | switcher({ theme: defaultTheme });
114 | }
115 | // eslint-disable-next-line react-hooks/exhaustive-deps
116 | }, [defaultTheme]);
117 |
118 | React.useEffect(() => {
119 | const themes = Object.keys(themeMap);
120 |
121 | themes.map(theme => {
122 | const themeAssetId = `theme-prefetch-${theme}`;
123 | if (!document.getElementById(themeAssetId)) {
124 | const stylePrefetch = document.createElement('link');
125 | stylePrefetch.rel = 'prefetch';
126 | stylePrefetch.type = 'text/css';
127 | stylePrefetch.id = themeAssetId;
128 | stylePrefetch.href = themeMap[theme];
129 |
130 | insertStyle(stylePrefetch);
131 | }
132 | return '';
133 | });
134 | }, [themeMap, insertStyle]);
135 |
136 | const value = React.useMemo(
137 | () => ({
138 | switcher,
139 | status,
140 | currentTheme,
141 | themes: arrayToObject(Object.keys(themeMap)),
142 | }),
143 | [switcher, status, currentTheme, themeMap]
144 | );
145 |
146 | return
2 |
React CSS Theme Switcher
3 |
4 |
5 |
6 |
8 |
10 |
12 |
13 |
15 |
16 |
18 |
21 |
22 | > 💫 Switch between CSS themes using React
23 |
24 | ## Prerequisites
25 |
26 | - node >=10
27 |
28 | ## Installation
29 |
30 | ```shell
31 | npm i react-css-theme-switcher
32 | ```
33 |
34 | or with Yarn:
35 |
36 | ```shell
37 | yarn add react-css-theme-switcher
38 | ```
39 |
40 | ## Usage
41 |
42 | Import ThemeSwitcherProvider and pass a theme object with the names of the themes and their respective paths to the CSS stylesheet (normally, public folder).
43 |
44 | ```jsx
45 | import React from 'react';
46 | import ReactDOM from 'react-dom';
47 |
48 | import { ThemeSwitcherProvider } from 'react-css-theme-switcher';
49 |
50 | const themes = {
51 | light: 'public/light.css',
52 | dark: 'public/dark.css',
53 | };
54 |
55 | const App = () => {
56 | return (
57 |
58 |
60 | );
61 | };
62 | ```
63 |
64 | Use `useThemeSwitcher` Hook:
65 |
66 | ```jsx
67 | import { useThemeSwitcher } from 'react-css-theme-switcher';
68 |
69 | const Component = () => {
70 | const { switcher, themes, currentTheme, status } = useThemeSwitcher();
71 | const [isDarkMode, setIsDarkMode] = React.useState(false);
72 |
73 | if (status === 'loading') {
74 | return Loading styles...
;
75 | }
76 |
77 | const toggleDarkMode = () => {
78 | setIsDarkMode(previous => {
79 | switcher({ theme: previous ? themes.light : themes.dark });
80 | return !previous;
81 | });
82 | };
83 |
84 | return (
85 |
86 |
Current theme: {currentTheme}
87 | Playground
114 |
115 |
116 |
117 |
118 |
119 |
120 | ```
121 |
122 | ```jsx
123 | const App = () => {
124 | return (
125 |
130 |
132 | );
133 | };
134 | ```
135 |
136 | ### HTML Element Insertion Point
137 |
138 | Some libraries and frameworks make it hard to use comments in head for handling injection order. To solve this issue, you can provide a DOM element as the insertion point. Take for example a `Playground
158 |
159 |
160 |
161 |
162 |
163 |
164 | ```
165 |
166 | ```jsx
167 | const App = () => {
168 | return (
169 |
174 |
176 | );
177 | };
178 | ```
179 |
180 | ## API
181 |
182 | ### ThemeSwitcherProvider
183 |
184 | #### Props
185 |
186 | | Name | Type | Default value | Description |
187 | |----------------|--------|---------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
188 | | attr | String | data-theme | Attribute name for that will be appended to the body tag. Its value will be the current theme name. |
189 | | defaultTheme | String | | Default theme to load on mount. Must be in themeMap |
190 | | id | String | current-theme-style | Id of the current selected CSS. |
191 | | insertionPoint | String or HTMLElement | | Comment string or element where pre-fetch styles and current themes will be injected. The library will look for the comment string inside head element. If missing will append styles at the end of the head. This is useful for CSS override. |
192 | | themeMap | Object | | Object with all themes available. Key is the theme name and the value is the path for the CSS file. |
193 |
194 | ### useThemeSwitcher
195 |
196 | #### Returns
197 |
198 | | Name | Type | Default value | Description |
199 | |--------------|-----------------------------------------|---------------|-------------------------------------------------------------------------------------------------|
200 | | currentTheme | String or Undefined | undefined | Current selected theme |
201 | | themes | Object | themeMap keys | All themes supplied in the themeMap. |
202 | | switcher | ({ theme }: { theme: string }) => void; | Function | Function to change themes. |
203 | | status | enum('idle', 'loading', 'loaded') | idle | Current load status of the selected stylesheet. Useful to prevent flicker when changing themes. |
204 |
205 | ## Contributors
206 |
207 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
208 |
209 |
210 |
211 |
212 |
217 |
218 |
219 |
220 |
221 |
222 |
223 | This project follows the [all-contributors](https://allcontributors.org) specification.
224 | Contributions of any kind are welcome!
225 |
226 | ## Show your support
227 |
228 | Give a ⭐️ if this project helped you!
229 |
--------------------------------------------------------------------------------
/test/index.test.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { renderHook, act } from '@testing-library/react-hooks';
3 |
4 | import { ThemeSwitcherProvider, useThemeSwitcher } from '../src';
5 |
6 | // Mock utils
7 | const utils = require('../src/utils');
8 | const mockedCreateLinkElement = jest.fn(utils.createLinkElement);
9 | utils.createLinkElement = mockedCreateLinkElement;
10 |
11 | beforeAll(() => {
12 | jest.spyOn(console, 'warn').mockImplementation();
13 | });
14 |
15 | afterEach(() => {
16 | jest.clearAllMocks();
17 | document.documentElement.innerHTML = '';
18 | });
19 |
20 | afterAll(() => {
21 | jest.restoreAllMocks();
22 | });
23 |
24 | const themes = {
25 | dark: './dark.css',
26 | light: './light.css',
27 | };
28 |
29 | const Wrapper = (
30 | themeOptions: React.ComponentProps = {
31 | themeMap: themes,
32 | }
33 | ) => ({ children }: any) => {
34 | return (
35 | {children}
36 | );
37 | };
38 |
39 | describe('Theme switcher', () => {
40 | it('should add pre-rendered css themes, and be able to switch between them', async () => {
41 | expect(document.querySelectorAll('link[rel="prefetch"]').length).toBe(0);
42 |
43 | const { result, waitFor } = renderHook(() => useThemeSwitcher(), {
44 | wrapper: Wrapper(),
45 | });
46 |
47 | expect(document.querySelector('body[data-theme]')).toBeFalsy();
48 | expect(document.querySelectorAll('link[rel="prefetch"]').length).toBe(2);
49 | expect(result.current).toEqual({
50 | currentTheme: undefined,
51 | status: 'idle',
52 | switcher: expect.any(Function),
53 | themes: {
54 | dark: 'dark',
55 | light: 'light',
56 | },
57 | });
58 |
59 | act(() => {
60 | result.current.switcher({ theme: result.current.themes.dark });
61 | });
62 |
63 | expect(result.current.status).toBe('loading');
64 |
65 | act(() => {
66 | mockedCreateLinkElement.mock.calls[0][0].onload();
67 | });
68 |
69 | await waitFor(
70 | () =>
71 | !!document.querySelector(
72 | 'link[href="./dark.css"][id="current-theme-style"]'
73 | )
74 | );
75 |
76 | expect(document.querySelector('body[data-theme="dark"]')).toBeTruthy();
77 | expect(result.current.status).toBe('loaded');
78 | expect(result.current).toEqual({
79 | currentTheme: 'dark',
80 | status: 'loaded',
81 | switcher: expect.any(Function),
82 | themes: {
83 | dark: 'dark',
84 | light: 'light',
85 | },
86 | });
87 |
88 | act(() => {
89 | result.current.switcher({ theme: result.current.themes.light });
90 | });
91 |
92 | expect(result.current.status).toBe('loading');
93 |
94 | act(() => {
95 | mockedCreateLinkElement.mock.calls[1][0].onload();
96 | });
97 |
98 | await waitFor(
99 | () =>
100 | !!document.querySelector(
101 | 'link[href="./light.css"][id="current-theme-style"]'
102 | )
103 | );
104 |
105 | expect(document.querySelector('body[data-theme="light"]')).toBeTruthy();
106 | expect(result.current.status).toBe('loaded');
107 | expect(result.current).toEqual({
108 | currentTheme: 'light',
109 | status: 'loaded',
110 | switcher: expect.any(Function),
111 | themes: {
112 | dark: 'dark',
113 | light: 'light',
114 | },
115 | });
116 | });
117 |
118 | it('should be able to add default theme', async () => {
119 | const { result, waitFor } = renderHook(() => useThemeSwitcher(), {
120 | wrapper: Wrapper({ themeMap: themes, defaultTheme: 'dark' }),
121 | });
122 |
123 | act(() => {
124 | mockedCreateLinkElement.mock.calls[0][0].onload();
125 | });
126 |
127 | await waitFor(
128 | () =>
129 | !!document.querySelector(
130 | 'link[href="./dark.css"][id="current-theme-style"]'
131 | )
132 | );
133 |
134 | expect(result.current).toEqual({
135 | currentTheme: 'dark',
136 | status: 'loaded',
137 | switcher: expect.any(Function),
138 | themes: {
139 | dark: 'dark',
140 | light: 'light',
141 | },
142 | });
143 | });
144 |
145 | it('should be able to change custom id and custom attribute', async () => {
146 | const customId = 'custom-id';
147 | const customAttr = 'custom-attr';
148 |
149 | const { waitFor } = renderHook(() => useThemeSwitcher(), {
150 | wrapper: Wrapper({
151 | themeMap: themes,
152 | defaultTheme: 'dark',
153 | id: customId,
154 | attr: customAttr,
155 | }),
156 | });
157 |
158 | act(() => {
159 | mockedCreateLinkElement.mock.calls[0][0].onload();
160 | });
161 |
162 | await waitFor(
163 | () => !!document.querySelector(`link[href="./dark.css"][id=${customId}]`)
164 | );
165 |
166 | expect(document.querySelector(`body[${customAttr}="dark"]`)).toBeTruthy();
167 | });
168 |
169 | it('should error if there is no provider', () => {
170 | const { result } = renderHook(() => useThemeSwitcher());
171 |
172 | expect(result.error).toMatchInlineSnapshot(
173 | `[Error: To use \`useThemeSwitcher\`, component must be within a ThemeSwitcherProvider]`
174 | );
175 | });
176 |
177 | it('should insert styles on comment insertionPoint', () => {
178 | const insertionPoint = 'insert-style-here';
179 |
180 | document.head.insertBefore(
181 | document.createComment(insertionPoint),
182 | document.head.firstElementChild
183 | );
184 |
185 | const otherElement = document.createElement('meta');
186 | document.head.append(otherElement);
187 |
188 | renderHook(() => useThemeSwitcher(), {
189 | wrapper: Wrapper({
190 | themeMap: themes,
191 | defaultTheme: 'dark',
192 | insertionPoint,
193 | }),
194 | });
195 |
196 | act(() => {
197 | mockedCreateLinkElement.mock.calls[0][0].onload();
198 | });
199 |
200 | function allPreviousElements(element: Element | null) {
201 | const previousElements: HTMLLinkElement[] = [];
202 | while ((element = element!.previousElementSibling))
203 | previousElements.push(element as HTMLLinkElement);
204 |
205 | return previousElements;
206 | }
207 |
208 | const element = document.head.lastElementChild;
209 | const previousElements = allPreviousElements(element);
210 |
211 | previousElements.forEach(elem => {
212 | const conditions = [
213 | 'current-theme-style',
214 | 'theme-prefetch-dark',
215 | 'theme-prefetch-light',
216 | ];
217 | const found = conditions.some(condition => elem.id === condition);
218 | expect(found).toBeTruthy();
219 | });
220 | });
221 |
222 | it('should insert styles on DOM insertionPoint', () => {
223 | const insertionPoint = document.createElement('noscript');
224 | insertionPoint.id = 'style-insertion-point';
225 |
226 | document.head.insertBefore(insertionPoint, document.head.firstElementChild);
227 |
228 | const otherElement = document.createElement('meta');
229 | document.head.append(otherElement);
230 | renderHook(() => useThemeSwitcher(), {
231 | wrapper: Wrapper({
232 | themeMap: themes,
233 | defaultTheme: 'dark',
234 | insertionPoint: document.getElementById(insertionPoint.id) ?? undefined,
235 | }),
236 | });
237 |
238 | act(() => {
239 | mockedCreateLinkElement.mock.calls[0][0].onload();
240 | });
241 |
242 | function allPreviousElements(element: Element | null) {
243 | const previousElements: HTMLLinkElement[] = [];
244 | while ((element = element!.previousElementSibling))
245 | previousElements.push(element as HTMLLinkElement);
246 |
247 | return previousElements;
248 | }
249 |
250 | document.getElementById(insertionPoint.id)?.remove();
251 | const element = document.head.lastElementChild;
252 | const previousElements = allPreviousElements(element);
253 |
254 | previousElements.forEach(elem => {
255 | const conditions = [
256 | 'current-theme-style',
257 | 'theme-prefetch-dark',
258 | 'theme-prefetch-light',
259 | ];
260 | const found = conditions.some(condition => elem.id === condition);
261 | expect(found).toBeTruthy();
262 | });
263 | });
264 |
265 | it('should warn when comment insertionPoint does not exist', () => {
266 | renderHook(() => useThemeSwitcher(), {
267 | wrapper: Wrapper({
268 | themeMap: themes,
269 | defaultTheme: 'dark',
270 | insertionPoint: 'not-in-dom-insertion-point',
271 | }),
272 | });
273 |
274 | expect(console.warn).toHaveBeenCalledTimes(3);
275 | // @ts-ignore
276 | expect(console.warn.mock.calls[0][0]).toMatchInlineSnapshot(
277 | `"Insertion point 'not-in-dom-insertion-point' does not exist. Be sure to add comment on head and that it matches the insertionPoint"`
278 | );
279 | });
280 |
281 | it('should warn when DOM insertionPoint does not exist', () => {
282 | renderHook(() => useThemeSwitcher(), {
283 | wrapper: Wrapper({
284 | themeMap: themes,
285 | defaultTheme: 'dark',
286 | insertionPoint: document.getElementById('not-in-dom-insertion-point'),
287 | }),
288 | });
289 |
290 | expect(console.warn).toHaveBeenCalledTimes(3);
291 | // @ts-ignore
292 | expect(console.warn.mock.calls[0][0]).toMatchInlineSnapshot(
293 | `"Insertion point 'null' does not exist. Be sure to add comment on head and that it matches the insertionPoint"`
294 | );
295 | });
296 |
297 | it('should append to head even when insertionPoint does not exist', async () => {
298 | const { waitFor } = renderHook(() => useThemeSwitcher(), {
299 | wrapper: Wrapper({
300 | themeMap: themes,
301 | defaultTheme: 'dark',
302 | insertionPoint: 'not-in-dom-insertion-point',
303 | }),
304 | });
305 |
306 | act(() => {
307 | mockedCreateLinkElement.mock.calls[0][0].onload();
308 | });
309 |
310 | await waitFor(
311 | () =>
312 | !!document.querySelector(
313 | 'link[href="./dark.css"][id="current-theme-style"]'
314 | )
315 | );
316 | expect(document.querySelectorAll('link[rel="prefetch"]').length).toBe(2);
317 | });
318 |
319 | it('should display error when theme is not found', () => {
320 | const { result } = renderHook(() => useThemeSwitcher(), {
321 | wrapper: Wrapper(),
322 | });
323 |
324 | act(() => {
325 | result.current.switcher({ theme: 'this-theme-does-not-exist' });
326 | });
327 |
328 | expect(console.warn).toHaveBeenCalledTimes(1);
329 | // @ts-ignore
330 | expect(console.warn.mock.calls[0][0]).toMatchInlineSnapshot(
331 | `"Could not find specified theme"`
332 | );
333 | });
334 |
335 | it('should not change theme when selecting the same theme', () => {
336 | const { result } = renderHook(() => useThemeSwitcher(), {
337 | wrapper: Wrapper({
338 | themeMap: themes,
339 | defaultTheme: 'dark',
340 | }),
341 | });
342 |
343 | act(() => {
344 | mockedCreateLinkElement.mock.calls[0][0].onload();
345 | });
346 |
347 | const expectedResult = result.current;
348 |
349 | act(() => {
350 | result.current.switcher({ theme: result.current.themes.dark });
351 | });
352 |
353 | expect(result.current).toEqual(expectedResult);
354 | });
355 | });
356 |
--------------------------------------------------------------------------------
7 |
8 | 
9 |
10 | 
11 |
12 |
13 | 
14 |
15 |
16 | 
17 |
18 | 