add option to set custom css;

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",

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)
     }

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 () {

src/renderer/store/preferences.js

@@ -55,6 +55,7 @@ const state = {
 
   theme: 'light',
   autoSwitchTheme: 2,
+  customCss: '',
 
   spellcheckerEnabled: false,
   spellcheckerIsHunspell: false, // macOS/Windows 10 only

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}`)

static/preference.json

@@ -51,6 +51,7 @@
 
   "theme": "light",
   "autoSwitchTheme": 2,
+  "customCss": "",
 
   "spellcheckerEnabled": false,
   "spellcheckerIsHunspell": false,