Custom CSS Support

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/components/editorWithTabs/tabs.vue

@@ -95,6 +95,9 @@ export default {
  closeAll () {
  this.$store.dispatch('CLOSE_ALL_TABS')
  },
+ changeMaxWidth (width) {
+ this.$store.dispatch('CHANGE_SIDE_BAR_WIDTH', width)
+ },
  rename (tabId) {
  const tab = this.tabs.find(f => f.id === tabId)
  if (tab && tab.pathname) {
@@ -129,6 +132,7 @@ export default {
  bus.$on('TABS::rename', this.rename)
  bus.$on('TABS::copy-path', this.copyPath)
  bus.$on('TABS::show-in-folder', this.showInFolder)
+ bus.$on('EDITOR_TABS::change-max-width', this.changeMaxWidth)
  })
  },
  mounted () {

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,