diff options
author | Kristóf Marussy <kristof@marussy.com> | 2021-12-23 21:29:26 +0100 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2021-12-23 21:29:26 +0100 |
commit | d303f2e3415237e1a519db21ad4e089c2ba7e9f9 (patch) | |
tree | 5d562dcaf7bb9c83c1930c7d7cf1b2c9de75e15b /packages/renderer/src/components/ToggleDarkModeButton.tsx | |
parent | build: Enable asar (diff) | |
download | sophie-d303f2e3415237e1a519db21ad4e089c2ba7e9f9.tar.gz sophie-d303f2e3415237e1a519db21ad4e089c2ba7e9f9.tar.zst sophie-d303f2e3415237e1a519db21ad4e089c2ba7e9f9.zip |
feat: Add BrowserView and synchronize its position
Diffstat (limited to 'packages/renderer/src/components/ToggleDarkModeButton.tsx')
-rw-r--r-- | packages/renderer/src/components/ToggleDarkModeButton.tsx | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/packages/renderer/src/components/ToggleDarkModeButton.tsx b/packages/renderer/src/components/ToggleDarkModeButton.tsx new file mode 100644 index 0000000..1b6757e --- /dev/null +++ b/packages/renderer/src/components/ToggleDarkModeButton.tsx | |||
@@ -0,0 +1,40 @@ | |||
1 | /* | ||
2 | * Copyright (C) 2021-2022 Kristóf Marussy <kristof@marussy.com> | ||
3 | * | ||
4 | * This file is part of Sophie. | ||
5 | * | ||
6 | * Sophie is free software: you can redistribute it and/or modify | ||
7 | * it under the terms of the GNU Affero General Public License as | ||
8 | * published by the Free Software Foundation, version 3. | ||
9 | * | ||
10 | * This program is distributed in the hope that it will be useful, | ||
11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
13 | * GNU Affero General Public License for more details. | ||
14 | * | ||
15 | * You should have received a copy of the GNU Affero General Public License | ||
16 | * along with this program. If not, see <https://www.gnu.org/licenses/>. | ||
17 | * | ||
18 | * SPDX-License-Identifier: AGPL-3.0-only | ||
19 | */ | ||
20 | |||
21 | import { observer } from 'mobx-react-lite'; | ||
22 | import DarkModeIcon from '@mui/icons-material/DarkMode'; | ||
23 | import LightModeIcon from '@mui/icons-material/LightMode'; | ||
24 | import IconButton from '@mui/material/IconButton'; | ||
25 | import React from 'react'; | ||
26 | |||
27 | import { useStore } from './StoreProvider'; | ||
28 | |||
29 | export const ToggleDarkModeButton = observer(function ToggleDarkModeButton() { | ||
30 | const { shared: { shouldUseDarkColors }, toggleDarkMode } = useStore(); | ||
31 | |||
32 | return ( | ||
33 | <IconButton | ||
34 | aria-label="Toggle dark mode" | ||
35 | onClick={() => toggleDarkMode()} | ||
36 | > | ||
37 | {shouldUseDarkColors ? <LightModeIcon /> : <DarkModeIcon />} | ||
38 | </IconButton> | ||
39 | ); | ||
40 | }); | ||