From ff169d77acf90f5fa9bc0d1d13ed669f46ddfe03 Mon Sep 17 00:00:00 2001
From: Carl Chang <changbowen@msn.cn>
Date: Wed, 18 May 2022 01:08:14 +0800
Subject: [PATCH] add option to set custom css;

---
 src/main/preferences/schema.json            |  5 +++++
 src/renderer/pages/app.vue                  | 10 +++++++++-
 src/renderer/prefComponents/theme/index.vue |  7 ++++++-
 src/renderer/store/preferences.js           |  1 +
 src/renderer/util/theme.js                  | 13 +++++++++++++
 static/preference.json                      |  1 +
 6 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/main/preferences/schema.json b/src/main/preferences/schema.json
index 6cbf587f..2ac91529 100644
--- a/src/main/preferences/schema.json
+++ b/src/main/preferences/schema.json
@@ -324,6 +324,11 @@
       2
     ]
   },
+  "customCss": {
+    "description": "Custom CSS--Custom CSS to apply to the current theme.",
+    "type": "string",
+    "default": ""
+  },
   "spellcheckerEnabled": {
     "description": "Spelling--Whether spell checking is enabled.",
     "type": "boolean",
diff --git a/src/renderer/pages/app.vue b/src/renderer/pages/app.vue
index a680a7ad..283ae0af 100644
--- a/src/renderer/pages/app.vue
+++ b/src/renderer/pages/app.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import { addStyles, addThemeStyle } from '@/util/theme'
+import { addStyles, addThemeStyle, addCustomStyle } from '@/util/theme'
 import Recent from '@/components/recent'
 import EditorWithTabs from '@/components/editorWithTabs'
 import TitleBar from '@/components/titleBar'
@@ -78,6 +78,7 @@ export default {
       showTabBar: state => state.layout.showTabBar,
       sourceCode: state => state.preferences.sourceCode,
       theme: state => state.preferences.theme,
+      customCss: state => state.preferences.customCss,
       textDirection: state => state.preferences.textDirection
     }),
     ...mapState({
@@ -105,6 +106,13 @@ export default {
         addThemeStyle(value)
       }
     },
+    customCss: function (value, oldValue) {
+      if (value !== oldValue) {
+        addCustomStyle({
+          customCss: value
+        })
+      }
+    },
     zoom: function (zoom) {
       ipcRenderer.emit('mt::window-zoom', null, zoom)
     }
diff --git a/src/renderer/prefComponents/theme/index.vue b/src/renderer/prefComponents/theme/index.vue
index 9ce4d7f4..995bb4ab 100644
--- a/src/renderer/prefComponents/theme/index.vue
+++ b/src/renderer/prefComponents/theme/index.vue
@@ -16,6 +16,10 @@
       :options="autoSwitchThemeOptions"
       :onChange="value => onSelectChange('autoSwitchTheme', value)"
     ></cur-select>
+    <div>
+      <div style="font-size: smaller; color: var(--editorColor)">Custom CSS</div>
+      <textarea style="width: 100%" rows="10" :value="customCss" @change="event => onSelectChange('customCss', event.target.value)"></textarea>
+    </div>
     <separator v-show="false"></separator>
     <section v-show="false" class="import-themes ag-underdevelop">
       <div>
@@ -53,7 +57,8 @@ export default {
   computed: {
     ...mapState({
       autoSwitchTheme: state => state.preferences.autoSwitchTheme,
-      theme: state => state.preferences.theme
+      theme: state => state.preferences.theme,
+      customCss: state => state.preferences.customCss
     })
   },
   created () {
diff --git a/src/renderer/store/preferences.js b/src/renderer/store/preferences.js
index c83d7bcb..be8e89fb 100644
--- a/src/renderer/store/preferences.js
+++ b/src/renderer/store/preferences.js
@@ -55,6 +55,7 @@ const state = {
 
   theme: 'light',
   autoSwitchTheme: 2,
+  customCss: '',
 
   spellcheckerEnabled: false,
   spellcheckerIsHunspell: false, // macOS/Windows 10 only
diff --git a/src/renderer/util/theme.js b/src/renderer/util/theme.js
index 2352d549..2e79061e 100644
--- a/src/renderer/util/theme.js
+++ b/src/renderer/util/theme.js
@@ -150,6 +150,19 @@ ${getEmojiPickerPatch()}
 `
 }
 
+export const addCustomStyle = options => {
+  const { customCss } = options
+  if (!customCss) return
+
+  let customStyleEle = document.querySelector('#custom-styles')
+  if (!customStyleEle) {
+    customStyleEle = document.createElement('style')
+    customStyleEle.id = 'custom-styles'
+    document.head.appendChild(customStyleEle)
+  }
+  customStyleEle.innerHTML = customCss
+}
+
 export const addElementStyle = () => {
   const ID = 'mt-el-style'
   let sheet = document.querySelector(`#${ID}`)
diff --git a/static/preference.json b/static/preference.json
index b110a7bc..4a7aa096 100644
--- a/static/preference.json
+++ b/static/preference.json
@@ -51,6 +51,7 @@
 
   "theme": "light",
   "autoSwitchTheme": 2,
+  "customCss": "",
 
   "spellcheckerEnabled": false,
   "spellcheckerIsHunspell": false,