fix(darkreader): copy at postinstall

.gitignore

@@ -4,3 +4,4 @@
 /misc/logo/jasper.icns
 /misc/data
 /.idea
+/src/Renderer/Fragment/Browser/BrowserFragmentAsset/darkreader.js

package.json

@@ -23,10 +23,11 @@
     "linux:build": "./script/linux/build.sh",
     "linux:sqlite": "./script/linux/build-sqlite.sh",
     "tsc:watch": "./script/tsc/watch.sh",
-    "postinstall": "rm -rf node_modules/@types/react-native"
+    "postinstall": "./script/npm/postinstall.sh"
   },
   "dependencies": {
     "@mdi/font": "^5.5.55",
+    "darkreader": "^4.9.17",
     "diff": "3.5.0",
     "electron-window-state": "^5.0.3",
     "escape-html": "1.0.3",

script/npm/postinstall.sh

@@ -0,0 +1,10 @@
+#!/bin/bash -x
+
+# styled-componentsによってreact-nativeの型がインストールされてしまう
+# しかしこれがTSの組み込み型と競合してエラーになるので削除してしまう
+rm -rf node_modules/@types/react-native
+
+# darkreader.jsをファイルとして読み込みたいのでコピーする
+cp -f node_modules/darkreader/darkreader.js src/Renderer/Fragment/Browser/BrowserFragmentAsset/
+
+# todo mdiのcssファイルなどもコピーする

src/Renderer/Fragment/Browser/BrowserCodeExecFragment.tsx

@@ -44,6 +44,7 @@ export class BrowserCodeExecFragment extends React.Component<Props, State> {
   private readonly jsDetectInput: string;
   private readonly jsGetIssueState: string;
   private readonly jsProjectBoard: string;
+  private readonly jsDarkReader: string;
 
   private projectStream: StreamEntity | null;
 
@@ -59,6 +60,7 @@ export class BrowserCodeExecFragment extends React.Component<Props, State> {
     this.jsDetectInput = fs.readFileSync(`${dir}/detect-input.js`).toString();
     this.jsGetIssueState = fs.readFileSync(`${dir}/get-issue-state.js`).toString();
     this.jsProjectBoard = fs.readFileSync(`${dir}/project-board.js`).toString();
+    this.jsDarkReader = fs.readFileSync(`${dir}/darkreader.js`).toString();
   }
 
   componentDidMount() {
@@ -70,6 +72,7 @@ export class BrowserCodeExecFragment extends React.Component<Props, State> {
     this.setupShowDiffBody();
     this.setupGetIssueState();
     this.setupProjectBoard();
+    this.setupDarkReader();
 
     IssueEvent.onSelectIssue(this, (issue, readBody) => this.setState({issue, readBody}));
   }
@@ -291,6 +294,17 @@ export class BrowserCodeExecFragment extends React.Component<Props, State> {
     }
   }
 
+  private setupDarkReader() {
+    const js = `
+    ${this.jsDarkReader}
+    DarkReader.enable({brightness: 100, contrast: 100});
+    `;
+    BrowserViewIPC.onEventDOMReady(() => {
+      const theme = UserPrefRepo.getPref().general.style.themeMode;
+      if (theme === 'dark') BrowserViewIPC.executeJavaScript(js);
+    });
+  }
+
   private isTargetIssuePage() {
     // if (!this.state.issue) return false;
     //