diff --git a/CHANGELOG.md b/CHANGELOG.md index 9da78809..1b73f8b1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ - Add Focus Mode, the current paragraph's will be focused. +- Add Dark theme, Light theme. + **Optimization** - Optimize the display of path name and file name in title bar. diff --git a/src/editor/config.js b/src/editor/config.js index 46bb37ed..d9ff0ac5 100644 --- a/src/editor/config.js +++ b/src/editor/config.js @@ -47,6 +47,7 @@ export const LOWERCASE_TAGS = generateKeyHash([ export const CLASS_OR_ID = genUpper2LowerKeyHash([ 'mousetrap', + 'AG_THEME_ID', 'AG_GRAY', 'AG_HIDE', 'AG_WARN', diff --git a/src/editor/index.js b/src/editor/index.js index 2c5f2329..65f6ab35 100644 --- a/src/editor/index.js +++ b/src/editor/index.js @@ -1,7 +1,7 @@ import ContentState from './contentState' import selection from './selection' import EventCenter from './event' -import { LOWERCASE_TAGS, EVENT_KEYS, CLASS_OR_ID } from './config' +import { LOWERCASE_TAGS, EVENT_KEYS, CLASS_OR_ID, codeMirrorConfig } from './config' import { throttle, debounce } from './utils' import { search } from './codeMirror' import { checkEditLanguage } from './codeMirror/language' @@ -429,6 +429,23 @@ class Aganippe { this.focusMode = bool } + setTheme (name, css) { + if (name === 'dark') { + codeMirrorConfig.theme = 'railscasts' + } else { + delete codeMirrorConfig.theme + } + const themeStyleId = CLASS_OR_ID['AG_THEME_ID'] + let styleEle = document.querySelector(`#${themeStyleId}`) + if (!styleEle) { + styleEle = document.createElement('style') + styleEle.id = themeStyleId + document.querySelector('head').appendChild(styleEle) + } + styleEle.innerHTML = css + this.contentState.render() + } + updateParagraph (type) { this.contentState.updateParagraph(type) } diff --git a/src/editor/tablePicker/index.css b/src/editor/tablePicker/index.css index ab9953ec..626e9952 100644 --- a/src/editor/tablePicker/index.css +++ b/src/editor/tablePicker/index.css @@ -84,7 +84,6 @@ .ag-table-picker .footer button { outline: none; cursor: pointer; - vertical-align: text-bottom; border-radius: 2px; line-height: 12px; border: none; diff --git a/src/editor/themes/dark.css b/src/editor/themes/dark.css index 8d07cb28..e4dc0fd1 100755 --- a/src/editor/themes/dark.css +++ b/src/editor/themes/dark.css @@ -5,37 +5,8 @@ @include-when-export url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext); -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: normal; - src: local('Open Sans Regular'), url('./github/400.woff') format('woff') -} - -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: normal; - src: local('Open Sans Italic'), url('./github/400i.woff') format('woff') -} - -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: bold; - src: local('Open Sans Bold'), url('./github/700.woff') format('woff') -} - -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: bold; - src: local('Open Sans Bold Italic'), url('./github/700i.woff') format('woff') -} - html, body { font-size: 16px; - background: rgb(43, 43, 43); } body { @@ -62,11 +33,44 @@ body { margin-top: 30px; } +.ag-float-box { + background: #303133; + border: 1px solid #303133; +} +.ag-float-item { + color: #909399; +} + +.ag-float-item-active { + background: #606266; + color: #C0C4CC; +} + +.ag-table-picker { + background: #606266; + border: 1px solid #606266; +} + +.ag-table-picker::before { + background: #606266; + border: 1px solid #606266; + border-right: none; + border-bottom: none; +} + .ag-gray { color: #909399; text-decoration: none; } +.el-dialog { + background: rgb(43, 43, 43); +} + +.v-modal { + background: rgba(0, 0, 0, .9); +} + body>*:first-child { margin-top: 0 !important; } diff --git a/src/editor/themes/light.css b/src/editor/themes/light.css index d76f5309..93160aa9 100644 --- a/src/editor/themes/light.css +++ b/src/editor/themes/light.css @@ -5,34 +5,6 @@ @include-when-export url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext); -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: normal; - src: local('Open Sans Regular'), url('./github/400.woff') format('woff') -} - -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: normal; - src: local('Open Sans Italic'), url('./github/400i.woff') format('woff') -} - -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: bold; - src: local('Open Sans Bold'), url('./github/700.woff') format('woff') -} - -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: bold; - src: local('Open Sans Bold Italic'), url('./github/700i.woff') format('woff') -} - html, body { font-size: 16px; background: rgb(252, 252, 252); @@ -40,7 +12,7 @@ html, body { body { font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #606266; + color: #303133; line-height: 1.6; } @@ -67,6 +39,11 @@ body { text-decoration: none; } +.v-modal { + background: #fff; + opacity: .8; +} + body>*:first-child { margin-top: 0 !important; } diff --git a/src/main/actions/theme.js b/src/main/actions/theme.js new file mode 100644 index 00000000..d5355f30 --- /dev/null +++ b/src/main/actions/theme.js @@ -0,0 +1,45 @@ +import fs from 'fs' +import path from 'path' +import { ipcMain, BrowserWindow } from 'electron' +import { getMenuItem } from '../utils' + +const THEME_PATH = path.resolve(__dirname, '../../editor/themes') +const themeCSS = {} + +export const selectTheme = (win, theme, themeCSS) => { + win.webContents.send('AGANI::theme', { theme, themeCSS }) +} + +const getSelectTheme = () => { + const themeMenu = getMenuItem('Theme') + return themeMenu.submenu.items.find(item => item.checked) +} + +ipcMain.on('AGANI::ask-for-theme', e => { + const win = BrowserWindow.fromWebContents(e.sender) + if (!Object.keys(themeCSS).length) { + const promises = ['dark', 'light'].map(theme => { + return new Promise((resolve, reject) => { + fs.readFile(`${THEME_PATH}/${theme}.css`, 'utf-8', (err, data) => { + if (err) reject(err) + resolve({ theme, data }) + }) + }) + }) + Promise.all(promises) + .then(themes => { + themes.forEach(t => { + console.log(t) + const { theme, data } = t + themeCSS[theme] = data + }) + const selectedTheme = getSelectTheme().label.toLowerCase() + console.log(selectedTheme) + console.log(themeCSS) + selectTheme(win, selectedTheme, themeCSS) + }) + } else { + const selectedTheme = getSelectTheme().label.toLowerCase() + selectTheme(win, selectedTheme, themeCSS) + } +}) diff --git a/src/main/config.js b/src/main/config.js index 932d2142..8552d9a7 100644 --- a/src/main/config.js +++ b/src/main/config.js @@ -17,6 +17,8 @@ export const EXTENSION_HASN = { pdf: '.pdf' } +export const DEFAULT_THEME = 'dark' + export const VIEW_MENU_ITEM = { 'Source Code Mode': false, 'Typewriter Mode': false, diff --git a/src/main/menus/index.js b/src/main/menus/index.js index 1629fa7a..1dd0323f 100644 --- a/src/main/menus/index.js +++ b/src/main/menus/index.js @@ -6,6 +6,7 @@ import view from './view' import windowMenu from './windowMenu' import paragraph from './paragraph' import format from './format' +import theme from './theme' export dockMenu from './dock' @@ -19,6 +20,7 @@ export default function configureMenu ({ app }) { paragraph, format, windowMenu, + theme, view, help ] diff --git a/src/main/menus/theme.js b/src/main/menus/theme.js new file mode 100644 index 00000000..d0484ad7 --- /dev/null +++ b/src/main/menus/theme.js @@ -0,0 +1,20 @@ +import * as actions from '../actions/theme' + +export default { + label: 'Theme', + submenu: [{ + label: 'Dark', + type: 'radio', + checked: true, + click (menuItem, browserWindow) { + actions.selectTheme(browserWindow, 'dark') + } + }, { + label: 'Light', + type: 'radio', + checked: false, + click (menuItem, browserWindow) { + actions.selectTheme(browserWindow, 'light') + } + }] +} diff --git a/src/main/utils.js b/src/main/utils.js index a83ee3bb..3a3ef76f 100644 --- a/src/main/utils.js +++ b/src/main/utils.js @@ -2,5 +2,6 @@ import { Menu } from 'electron' export const getMenuItem = menuName => { const menus = Menu.getApplicationMenu() + console.log(typeof menus.append) return menus.items.find(menu => menu.label === menuName) } diff --git a/src/renderer/App.vue b/src/renderer/App.vue index 0f211091..a507e576 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -5,6 +5,7 @@ :filename="filename" :active="windowActive" :word-count="wordCount" + :theme="theme" > @@ -46,12 +51,14 @@ computed: { ...mapState([ 'pathname', 'filename', 'windowActive', 'wordCount', - 'typewriter', 'focus', 'sourceCode', 'markdown', 'cursor' + 'typewriter', 'focus', 'sourceCode', 'markdown', 'cursor', + 'theme', 'themeCSS' ]) }, created () { const { dispatch } = this.$store + dispatch('ASK_FOR_THEME') dispatch('ASK_FOR_MODE') dispatch('LISTEN_FOR_CLOSE') dispatch('LISTEN_FOR_SAVE_AS') diff --git a/src/renderer/components/Editor.vue b/src/renderer/components/Editor.vue index 48084acd..549da452 100644 --- a/src/renderer/components/Editor.vue +++ b/src/renderer/components/Editor.vue @@ -1,7 +1,7 @@