-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement a colour theme selector 🌑.
- Loading branch information
Showing
19 changed files
with
190 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { RadioGroup } from '@headlessui/react'; | ||
| import { clsx } from 'clsx'; | ||
|
|
||
| const ThemeSwitcher = ({ theme, setTheme, themeOptions }) => { | ||
| return ( | ||
| <> | ||
| <h2 className="text-xl font-semibold leading-6 text-slate-700 md:text-2xl dark:text-slate-300"> | ||
| Colour theme | ||
| </h2> | ||
|
|
||
| <RadioGroup | ||
| value={theme} | ||
| onChange={setTheme}> | ||
| <RadioGroup.Label className="sr-only">Choose a theme</RadioGroup.Label> | ||
| <div className="flex justify-center gap-4 md:gap-5 xl:gap-6"> | ||
| {themeOptions.map((option) => ( | ||
| <RadioGroup.Option | ||
| key={option.name} | ||
| value={option} | ||
| className={({ active, checked }) => | ||
| clsx( | ||
| 'cursor-pointer focus:outline-none', | ||
| active && 'ring-2 ring-primary-600 ring-offset-2', | ||
| checked | ||
| ? 'bg-primary-600 text-slate-100 hover:bg-primary-500' | ||
| : 'bg-slate-200 text-slate-900 ring-1 ring-inset ring-slate-300 hover:bg-slate-100 dark:bg-slate-800 dark:text-slate-100 dark:ring-slate-700 hover:dark:bg-slate-900', | ||
| 'flex w-48 max-w-48 flex-initial items-center justify-center rounded-md px-3 py-3 text-sm font-semibold sm:flex-1', | ||
| ) | ||
| }> | ||
| <RadioGroup.Label as="span">{option.name}</RadioGroup.Label> | ||
| </RadioGroup.Option> | ||
| ))} | ||
| </div> | ||
| </RadioGroup> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default ThemeSwitcher; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { useState } from 'react'; | ||
| import Main from '../components/Main'; | ||
| import MainHeader from '../components/MainHeader'; | ||
| import ThemeSwitcher from '../components/ThemeSwitcher'; | ||
| import { setColourTheme } from '../lib/colourThemeUtils'; | ||
|
|
||
| const themeOptions = [ | ||
| { name: 'Dark', value: 'dark' }, | ||
| { name: 'System', value: 'system', defaultTheme: true }, | ||
| { name: 'Light', value: 'light' }, | ||
| ]; | ||
|
|
||
| const SettingsContainer = () => { | ||
| // Find the selected theme, or the default one. | ||
| const selectedThemeValue = localStorage.getItem('theme'); | ||
| const selectedTheme = | ||
| themeOptions.find(({ value }) => value === selectedThemeValue) || | ||
| themeOptions.find(({ defaultTheme }) => defaultTheme); | ||
|
|
||
| const [theme, setTheme] = useState(selectedTheme); | ||
|
|
||
| // Keep the local storage and the DOM in sync with the state. | ||
| const setThemeWrapper = (theme) => { | ||
| setTheme(theme); | ||
|
|
||
| if (theme.defaultTheme) { | ||
| localStorage.removeItem('theme'); | ||
| setColourTheme(); | ||
| return; | ||
| } | ||
|
|
||
| localStorage.setItem('theme', theme.value); | ||
| setColourTheme(theme.value); | ||
| }; | ||
|
|
||
| return ( | ||
| <Main> | ||
| <MainHeader title="Settings" /> | ||
| <ThemeSwitcher | ||
| theme={theme} | ||
| themeOptions={themeOptions} | ||
| setTheme={setThemeWrapper} | ||
| /> | ||
| </Main> | ||
| ); | ||
| }; | ||
|
|
||
| export default SettingsContainer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.