1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
| import React from "react";
|
| import { useStorybookApi } from "storybook/manager-api";
| import { IconButton } from "storybook/internal/components";
| import { MoonIcon, SunIcon } from "@storybook/icons";
|
| import { ADDON_ID, TOOL_ID, THEMES, DEFAULT_THEME } from "./constants";
| import { useAtom, useAtomValue } from "jotai/react";
| import { evaluatedThemeAtom, themeAtom } from "./atoms";
|
| export const ThemeTool = React.memo(function MyAddonSelector() {
| const [theme, setTheme] = useAtom(themeAtom);
| const evaluatedTheme = useAtomValue(evaluatedThemeAtom);
| const api = useStorybookApi();
|
| const toggleTheme = React.useCallback(() => {
| setTheme((previousTheme) => THEMES[(THEMES.indexOf(previousTheme) + 1) % THEMES.length]);
| }, []);
|
| React.useEffect(() => {
| api.setAddonShortcut(ADDON_ID, {
| label: "Toggle Theme [8]",
| defaultShortcut: ["8"],
| actionName: "toggleTheme",
| showInMenu: false,
| action: toggleTheme,
| });
| }, [toggleTheme, api]);
|
| return (
| <IconButton
| style={{ height: "28px", width: "28px" }}
| key={TOOL_ID}
| active={theme !== DEFAULT_THEME}
| title="Toggle theme"
| onClick={toggleTheme}
| >
| {theme === DEFAULT_THEME ? (
| <div style={{ position: "relative" }}>
| {evaluatedTheme === "light" ? (
| <>
| <SunIcon style={{ top: "50%", left: "50%", position: "absolute", transform: "translate(-50%, -50%)" }} />
| <MoonIcon
| style={{
| height: "8px",
| width: "8px",
| opacity: "0.5",
| top: "50%",
| left: "50%",
| position: "absolute",
| transform: "translate(80%, -120%)",
| }}
| />
| </>
| ) : (
| <>
| <MoonIcon style={{ top: "50%", left: "50%", position: "absolute", transform: "translate(-50%, -50%)" }} />
| <SunIcon
| style={{
| height: "10px",
| width: "10px",
| opacity: "0.5",
| top: "50%",
| left: "50%",
| position: "absolute",
| transform: "translate(40%, -100%)",
| }}
| />
| </>
| )}
| </div>
| ) : evaluatedTheme === "dark" ? (
| <MoonIcon />
| ) : (
| <SunIcon />
| )}
| </IconButton>
| );
| });
|
|
