From 01e6cd0f68e0d95261c8c85626c015fa615ca52c Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Thu, 3 Sep 2020 11:40:58 +0100
Subject: [PATCH] Defaults theme to follow system
---
src/components/App.tsx | 14 ++++++++++++-
src/components/pages/SettingsModal/index.tsx | 21 +++++++++++++++++---
2 files changed, 31 insertions(+), 4 deletions(-)
diff --git a/src/components/App.tsx b/src/components/App.tsx
index e15d87e03..5d6092942 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -38,8 +38,12 @@ class App extends React.Component<{}, AppState> {
}%`;
const currentTheme = localStorage.getItem("theme");
- if (currentTheme) {
+ if (currentTheme == "light" || currentTheme == "dark") {
document.documentElement.setAttribute("data-theme", currentTheme);
+ } else {
+ let mq = window.matchMedia("(prefers-color-scheme: dark)");
+ mq.addListener((mq) => this.setDarkTheme(mq.matches));
+ this.setDarkTheme(mq.matches);
}
window.addEventListener("resize", () => {
@@ -51,6 +55,13 @@ class App extends React.Component<{}, AppState> {
this.showOrHideSideBars();
}
+ setDarkTheme(toSet: boolean) {
+ document.documentElement.setAttribute(
+ "data-theme",
+ toSet ? "dark" : "light"
+ );
+ }
+
toggleLeftBar() {
if (window.innerWidth <= 1024) {
this.setState({
@@ -108,6 +119,7 @@ class App extends React.Component<{}, AppState> {
fileView={this.state.fileView}
onCardViewClick={() => this.setFileView("card")}
onListViewClick={() => this.setFileView("list")}
+ setDarkTheme={(b) => this.setDarkTheme(b)}
/>
<Switch>
diff --git a/src/components/pages/SettingsModal/index.tsx b/src/components/pages/SettingsModal/index.tsx
index d87e33390..c93ccd389 100644
--- a/src/components/pages/SettingsModal/index.tsx
+++ b/src/components/pages/SettingsModal/index.tsx
@@ -13,6 +13,7 @@ interface Props {
show: boolean;
onHide: any;
fileView: string;
+ setDarkTheme: (toSet: boolean) => any;
onCardViewClick: (event: React.MouseEvent) => void;
onListViewClick: (event: React.MouseEvent) => void;
}
@@ -21,6 +22,7 @@ const SettingsModal: React.FC<Props> = ({
show,
onHide,
fileView,
+ setDarkTheme,
onCardViewClick,
onListViewClick,
}) => {
@@ -29,7 +31,7 @@ const SettingsModal: React.FC<Props> = ({
"90"
);
- const [theme, setTheme] = useLocalStorage("theme", "light");
+ const [theme, setTheme] = useLocalStorage("theme", "default");
return (
<Modal
@@ -72,11 +74,24 @@ const SettingsModal: React.FC<Props> = ({
<Form.Group style={{ alignItems: "center" }}>
<Form.Label>Theme</Form.Label>
<ButtonGroup style={{ float: "right" }}>
+ <Button
+ className={styles.modalToggleButton}
+ active={theme === "default"}
+ onClick={() => {
+ let mq = window.matchMedia("(prefers-color-scheme: dark)");
+ mq.addListener((mq) => setDarkTheme(mq.matches));
+ setDarkTheme(mq.matches);
+ setTheme("default");
+ }}
+ variant="secondary"
+ >
+ Default
+ </Button>
<Button
className={styles.modalToggleButton}
active={theme === "light"}
onClick={() => {
- document.documentElement.setAttribute("data-theme", "light");
+ setDarkTheme(false);
setTheme("light");
}}
variant="secondary"
@@ -87,7 +102,7 @@ const SettingsModal: React.FC<Props> = ({
className={styles.modalToggleButton}
active={theme === "dark"}
onClick={() => {
- document.documentElement.setAttribute("data-theme", "dark");
+ setDarkTheme(true);
setTheme("dark");
}}
variant="secondary"
--
GitLab