fix: using dark theme in day time or vice verse is not considered (#401)

hypertrons · Jul 12, 2022 · 1771cc7 · 1771cc7
1 parent 3b9e84f
commit 1771cc7
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 31 deletions.
diff --git a/src/components/Graph/Graph.tsx b/src/components/Graph/Graph.tsx
@@ -11,16 +11,7 @@ import {
 } from '../../utils/utils';
 import Settings, { loadSettings } from '../../utils/settings';
 
-let githubTheme = getGithubTheme();
-/*若是根据系统主题自动切换*/
-if (githubTheme === 'auto') {
-  /*判断是否处于深色模式*/
-  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    githubTheme = 'dark';
-  } else {
-    githubTheme = 'light';
-  }
-}
+const githubTheme = getGithubTheme();
 
 interface GraphProps {
   /**

diff --git a/src/pages/ContentScripts/DeveloperActiInflTrend.tsx b/src/pages/ContentScripts/DeveloperActiInflTrend.tsx
@@ -12,16 +12,7 @@ import Settings, { loadSettings } from '../../utils/settings';
 import { getDeveloperActiInfl } from '../../api/developer';
 import Bars from '../../components/Bars/index';
 
-let githubTheme = getGithubTheme();
-/*若是根据系统主题自动切换*/
-if (githubTheme === 'auto') {
-  /*判断是否处于深色模式*/
-  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    githubTheme = 'dark';
-  } else {
-    githubTheme = 'light';
-  }
-}
+const githubTheme = getGithubTheme();
 
 interface DeveloperActiInflTrendViewProps {
   currentDeveloper: string;

diff --git a/src/pages/ContentScripts/RepoActiInflTrend.tsx b/src/pages/ContentScripts/RepoActiInflTrend.tsx
@@ -13,16 +13,7 @@ import { utils } from 'github-url-detection';
 import { getRepoActiInfl } from '../../api/repo';
 import Bars from '../../components/Bars/index';
 
-let githubTheme = getGithubTheme();
-/*若是根据系统主题自动切换*/
-if (githubTheme === 'auto') {
-  /*判断是否处于深色模式*/
-  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    githubTheme = 'dark';
-  } else {
-    githubTheme = 'light';
-  }
-}
+const githubTheme = getGithubTheme();
 
 interface RepoActiInflTrendViewProps {
   currentRepo: string;

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -125,7 +125,32 @@ export function runsWhen(rules: any[]) {
 }
 
 export function getGithubTheme() {
-  return $('[data-color-mode]')[0].dataset['colorMode'];
+  // following 3 variables are extracted from GitHub page's html tag properties
+  // colorMode has 3 values: "auto", "light" and "dark"
+  // lightTheme and darkTheme means "theme in day time" and "theme in night time" respectively
+  const colorMode = $('[data-color-mode]')[0].dataset['colorMode'];
+  const lightTheme = $('[data-light-theme]')[0].dataset['lightTheme'];
+  const darkTheme = $('[data-dark-theme]')[0].dataset['darkTheme'];
+
+  let githubTheme = colorMode;
+
+  if (colorMode === 'auto') {
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      if (darkTheme?.startsWith('dark')) {
+        githubTheme = 'dark';
+      } else {
+        githubTheme = 'light';
+      }
+    } else {
+      if (lightTheme?.startsWith('dark')) {
+        githubTheme = 'dark';
+      } else {
+        githubTheme = 'light';
+      }
+    }
+  }
+
+  return githubTheme;
 }
 
 export function getMinMax(data: INode[] | IEdge[]) {