Merge pull request #25 from odnar-dev/GitHub's-Night-Mode

adapt to github's night mode
useful-forks · Mar 19, 2021 · 8d1f5f6 · 8d1f5f6
2 parents 19a26a6 + 7a20649
commit 8d1f5f6
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 15 deletions.
diff --git a/project/manifest.json b/project/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Useful Forks",
-  "version": "1.5",
-  "description": "Displays GitHub forks ordered by stars, and with additional information and automatic filters.",
+  "version": "1.6",
+  "description": "Displays GitHub forks ordered by stars, with additional information and automatic filtering of irrelevant ones.",
   "permissions": [
     "*://github.com/*",
     "*://api.github.com/*",

diff --git a/project/useful-forks.js b/project/useful-forks.js
@@ -6,18 +6,8 @@ const UF_ID_MSG     = 'useful_forks_msg';
 const UF_ID_DATA    = 'useful_forks_data';
 const UF_ID_TABLE   = 'useful_forks_table';
 
-const svg_literal_fork = '<svg class="octicon octicon-repo-forked v-align-text-bottom" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>';
-const svg_literal_star = '<svg aria-label="star" height="16" class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="14" role="img"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>';
-
-const additional_css_literal = `
-.uf_badge svg {
-  display: table-cell;
-  padding-top: 3px;
-}
-tr:hover {background-color: #e2e2e2 !important;}
-tr:nth-child(even) {background-color: #f5f5f5;}
-#${UF_ID_MSG} {color: red}
-`;
+const svg_literal_fork = '<svg class="octicon octicon-repo-forked v-align-text-bottom" viewBox="0 0 10 16" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>';
+const svg_literal_star = '<svg aria-label="star" height="16" class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" width="14" role="img"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>';
 
 const UF_MSG_HEADER       = "<b>Useful forks</b>";
 const UF_MSG_NO_FORKS     = "No one forked this specific repository.";
@@ -278,10 +268,36 @@ function prepare_display() {
   );
 }
 
+/** To determine if Dark Mode is enabled. */
+function getGitHubTheme() {
+  let colorMode = document.querySelector('[data-color-mode]')?.dataset.colorMode;
+  if (colorMode === 'dark') {
+    return "dark";
+  } else if (colorMode === 'auto') {
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return "dark";
+    }
+  }
+  return "light"; // default
+}
+
 function add_css() {
+  const GITHUB_THEME = getGitHubTheme();
+  const TR_HOVER_COLOR = GITHUB_THEME === "dark" ? '#2f353e' : '#e2e2e2';
+  const TR_BG_COLOR = GITHUB_THEME === "dark" ? '#161b22' : '#f5f5f5';
+  const ADDITIONAL_CSS = `
+    .uf_badge svg {
+      display: table-cell;
+      padding-top: 3px;
+    }
+    tr:hover {background-color: ${TR_HOVER_COLOR} !important;}
+    tr:nth-child(even) {background-color: ${TR_BG_COLOR};}
+    #${UF_ID_MSG} {color: red;}
+    `;
+
   let styleSheet = document.createElement('style');
   styleSheet.type = "text/css";
-  styleSheet.innerText = additional_css_literal;
+  styleSheet.innerText = ADDITIONAL_CSS;
   document.head.appendChild(styleSheet);
 }