issue #2 対応

package.json

@@ -38,6 +38,7 @@
     "eslint-plugin-react-hooks": "4.2.0",
     "npm-run-all": "4.1.5",
     "prettier": "2.2.1",
+    "raw-loader": "^4.0.2",
     "ts-node": "9.1.0",
     "typescript": "4.1.2",
     "webpack": "5.9.0",

src/injectTaskList/app.tsx

@@ -8,6 +8,7 @@ import {
   TasksInfo,
   TaskType,
 } from '../common/task';
+import { ToggleSwitch } from '../theme';
 
 type TabKey = TaskType | 'all';
 
@@ -247,6 +248,7 @@ const TaskList: FC = () => {
           </a>
         </div>
       </div>
+      <ToggleSwitch />
     </div>
   );
 };

src/theme/ToggleSwitch.tsx

@@ -0,0 +1,36 @@
+import { FC, useEffect, useState } from 'react';
+import { modify } from './modify';
+
+export const ToggleSwitch: FC = () => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    modify();
+  }, [isDarkMode]);
+
+  return (
+    <button
+      type="button"
+      aria-label="toggle switch"
+      onClick={() => {
+        setIsDarkMode((prevState) => !prevState);
+      }}
+      style={{
+        marginLeft: 4,
+        cursor: 'pointer',
+        border: 'none',
+        borderColor: '#9ecf4c',
+      }}
+    >
+      {isDarkMode ? (
+        <span role="img" aria-label="emoji-moon">
+          🌝
+        </span>
+      ) : (
+        <span role="img" aria-label="emoji-sun">
+          🌞
+        </span>
+      )}
+    </button>
+  );
+};

src/theme/index.ts

@@ -0,0 +1,2 @@
+export * from './modify';
+export * from './ToggleSwitch';

src/theme/modify.ts

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const DARK_THEME = require('./styles/dark-theme.css').default;
+const LIGHT_THEME = require('./styles/light-theme.css').default;
+
+export const modify = () => {
+  const theme = localStorage.getItem('theme') as 'dark' | 'light' | null;
+
+  if (!theme) {
+    localStorage.setItem('theme', 'dark');
+  }
+
+  if (theme === 'dark') {
+    localStorage.setItem('theme', 'light');
+  } else if (theme === 'light') {
+    localStorage.setItem('theme', 'dark');
+  }
+
+  const appendedHTMLStyleElement = document.getElementById('theme-style');
+  if (appendedHTMLStyleElement) {
+    appendedHTMLStyleElement.innerHTML =
+      theme === 'dark' ? DARK_THEME : LIGHT_THEME;
+  } else {
+    const style = document.createElement('style');
+    style.innerText = theme === 'dark' ? DARK_THEME : LIGHT_THEME;
+    style.id = 'theme-style';
+    document.head.appendChild(style);
+  }
+};

src/theme/styles/dark-theme.css

@@ -0,0 +1,14 @@
+*,
+#myheader {
+  background: #1a1a1a;
+  color: #ffffff;
+}
+
+a,
+a:link {
+  color: #6084df !important;
+}
+
+.my-infolist-kinkyu .my-infolist-body tr .news-title a {
+  color: #f86262 !important;
+}

src/theme/styles/light-theme.css

@@ -0,0 +1,14 @@
+*,
+#myheader {
+  background: #ffffff;
+  color: #1a1a1a;
+}
+
+a,
+a:link {
+  color: #2449a8 !important;
+}
+
+.my-infolist-kinkyu .my-infolist-body tr .news-title a {
+  color: #ff0000 !important;
+}

webpack.config.ts

@@ -42,6 +42,13 @@ const config: Configuration = {
           loader: 'babel-loader',
         },
       },
+      {
+        test: /\.css$/i,
+        exclude: /node_modules/,
+        use: {
+          loader: 'raw-loader',
+        },
+      },
     ],
   },
   plugins: [

yarn.lock

@@ -3255,6 +3255,14 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
+raw-loader@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
+  integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 react-dom@17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"