support user-defined css, #15

README.org

@@ -7,12 +7,29 @@
 
 * How to use
 
-  Clone this repo and build it, or just simply download prebuilt binary from [[https://github.com/kumakichi/Deepl-linux-electron/releases][Release Page]]
+** get binary
+  Clone this repo and build it, or just simply download the prebuilt binary from [[https://github.com/kumakichi/Deepl-linux-electron/releases][Release Page]]
 
+** use it
   Open deepl-linux-electron, select text in any application, press Ctrl+c to copy selected content into clipboard, then use shortcut *Control+Alt+D* to translate
 
+** set shortcut
   You can change this shortcut on the program menu: Settings -> Shortcut 
 
+** user-defined css
+  Support user-defined css, just put your css code into
+  #+begin_quote
+  ~/.config/Deepl-Linux-Electron/user_theme.css
+  #+end_quote
+
+  a simple *dark mode* implementation, thanks to [[https://userstyles.world/user/NotJ3st3r][NotJ3st3r]]:
+  #+begin_src css
+    html {
+      filter: invert(90%) hue-rotate(180deg) brightness(110%) contrast(110%);
+      background: white;
+    }
+  #+end_src
+
 * How to build
 
 ** install yarn

package.json

@@ -6,7 +6,7 @@
     "webpack": "^4.46.0"
   },
   "name": "Deepl-Linux-Electron",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "scripts": {
     "dev": "electron-webpack dev",
     "compile": "electron-webpack",

src/main/index.js

@@ -1,6 +1,7 @@
 let url = '';
 let URL = require('url');
 let path = require('path');
+let fs = require('fs')
 
 let gShortcut;
 
@@ -23,11 +24,12 @@ const {
 } = require('electron');
 var win = null;
 var appQuitting = false;
+const appName = 'Deepl-Linux-Electron';
 
 app.setAboutPanelOptions({
-    applicationName: 'Deepl-Linux-Electron',
+    applicationName: appName,
     applicationVersion: app.getVersion(),
-    copyright: '© 2021 kumakichi'
+    copyright: '© 2021-2024 kumakichi'
 })
 
 
@@ -127,6 +129,21 @@ app.on('ready', function() {
             win.hide();
         }
     });
+  win.webContents.on('did-finish-load', () => {
+    const appConfigPath = path.join(app.getPath('appData'), appName);
+    const cssPath = path.join(appConfigPath, 'user_theme.css');
+    fs.readFile(cssPath, 'utf8', (err, data) => {
+      if (err) {
+        console.error('Error reading CSS file:', err)
+        return
+      }
+      if (data.length == 0) {
+        return
+      }
+      console.log('reading CSS file length:', data.length)
+      win.webContents.insertCSS(data)
+    })
+  })
 })
 
 app.on('will-quit', () => {