feat: add auto dark mode (#259)

Add detection for theme preferences given by the browser.

This works by replacing the "dark mode" setting with a new selector that defaults to "auto" (losing old settings, sorry).

You can try this out by opening the dev console and using the dedicated button (Inspector > sun/moon -shaped in Firefox, Elements > paint brush -shaped in Chromium).

I tried to match the project style but I'm not too good at frontend, I hope this is OK!
master
Olivier Léobal 1 year ago committed by GitHub
parent 896182ba68
commit b2a7b1d0ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -146,10 +146,35 @@ export default function App() {
const [errorsDialog, setErrorsDialog] = React.useState(false);
const dispatch = useDispatch();
const etebase = useCredentials();
const darkMode = useSelector((state: store.StoreState) => state.settings.darkMode);
const darkModeUserSelection = useSelector((state: store.StoreState) => state.settings.darkModeUserSelection);
const fetchCount = useSelector((state: store.StoreState) => state.fetchCount);
const errors = useSelector((state: store.StoreState) => state.errors);
function shouldBeDark(userSelection: string, browserPreference: boolean): boolean {
if (userSelection === "auto") {
return browserPreference;
} else if (userSelection === "dark") {
return true;
}
return false;
}
const [darkModeBrowserPreference, setDarkModeBrowserPreference] = React.useState(Boolean(window.matchMedia?.("(prefers-color-scheme: dark)").matches));
const handleBrowserDarkModePreferenceChange = React.useCallback((e) => {
setDarkModeBrowserPreference(e.matches);
}, []);
React.useEffect(() => {
window.matchMedia?.("(prefers-color-scheme: dark)").addEventListener("change", handleBrowserDarkModePreferenceChange);
return () => {
window.matchMedia?.("(prefers-color-scheme: dark)").removeEventListener("change", handleBrowserDarkModePreferenceChange);
};
}, [handleBrowserDarkModePreferenceChange]);
const [darkMode, setDarkMode] = React.useState(() => shouldBeDark(darkModeUserSelection, darkModeBrowserPreference));
React.useEffect(() => {
setDarkMode(shouldBeDark(darkModeUserSelection, darkModeBrowserPreference));
}, [darkModeUserSelection, darkModeBrowserPreference]);
async function refresh() {
const syncManager = SyncManager.getManager(etebase!);
const sync = syncManager.sync();

@ -8,9 +8,6 @@ import { useSelector, useDispatch } from "react-redux";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormGroup from "@material-ui/core/FormGroup";
import Switch from "@material-ui/core/Switch";
import InputLabel from "@material-ui/core/InputLabel";
import { StoreState } from "../store";
@ -173,8 +170,6 @@ export default React.memo(function Settings() {
const dispatch = useDispatch();
const settings = useSelector((state: StoreState) => state.settings);
const darkMode = !!settings.darkMode;
function handleChange(event: React.ChangeEvent<any>) {
const name = event.target.name;
const value = event.target.value;
@ -228,18 +223,17 @@ export default React.memo(function Settings() {
</Select>
</FormControl>
<h2>Dark mode</h2>
<FormGroup>
<FormControlLabel
control={
<Switch
color="primary"
checked={darkMode}
onChange={() => dispatch(setSettings({ ...settings, darkMode: !darkMode }))}
/>
}
label="Dark mode"
/>
</FormGroup>
<FormControl style={{ width: "15em" }}>
<Select
name="darkModeUserSelection"
value={settings.darkModeUserSelection}
onChange={handleChange}
>
<MenuItem value="auto">Auto</MenuItem>
<MenuItem value="dark">Dark</MenuItem>
<MenuItem value="light">Light</MenuItem>
</Select>
</FormControl>
</Container>
</>
);

@ -240,7 +240,7 @@ export const messagesReducer = handleActions(
// FIXME Move all the below (potentially the fetchCount ones too) to their own file
export interface SettingsType {
locale: string;
darkMode?: boolean;
darkModeUserSelection: string;
taskSettings: {
filterBy: string | null;
sortBy: string;
@ -255,7 +255,7 @@ export const settingsReducer = handleActions(
},
{
locale: "en-gb",
darkMode: false,
darkModeUserSelection: "auto",
taskSettings: {
filterBy: null,
sortBy: "smart",

Loading…
Cancel
Save