From 004879b49afda1a16e61ee6331d1655838ad044d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Felix=20H=C3=A4usler?= Date: Sun, 31 Mar 2019 06:56:03 +0200 Subject: [PATCH] Modified themes and added dark and one dark theme (#826) * Modified themes and added dark and one dark theme * fix: print service * Update documentation --- .electron-vue/webpack.renderer.config.js | 4 +- .github/CHANGELOG.md | 2 +- doc/SETTINGS.md | 39 ++ src/main/menus/theme.js | 40 +- src/main/preference.js | 6 +- src/muya/themes/{light.css => default.css} | 159 ++----- src/muya/themes/prismjs/light.theme.css | 115 +++++ src/renderer/assets/styles/index.css | 4 +- src/renderer/assets/styles/printService.css | 16 +- .../assets/themes/codemirror/one-dark.css | 110 +++++ src/renderer/assets/themes/dark.theme.css | 66 +++ src/renderer/assets/themes/graphite.theme.css | 127 ++++++ .../assets/themes/material-dark.theme.css | 62 +++ src/renderer/assets/themes/one-dark.theme.css | 190 ++++++++ .../assets/themes/prismjs/dark.theme.css | 126 ++++++ .../assets/themes/prismjs/one-dark.theme.css | 137 ++++++ src/renderer/assets/themes/ulysses.theme.css | 139 ++++++ .../components/editorWithTabs/editor.vue | 5 +- .../components/editorWithTabs/sourceCode.vue | 4 +- .../components/editorWithTabs/tabs.vue | 1 + src/renderer/components/titleBar.vue | 3 +- src/renderer/config.js | 3 +- src/renderer/services/notification/index.css | 13 + src/renderer/services/notification/index.js | 15 +- src/renderer/util/theme.js | 41 +- src/renderer/util/themeColor.js | 416 +----------------- static/preference.md | 2 +- 27 files changed, 1275 insertions(+), 570 deletions(-) create mode 100644 doc/SETTINGS.md rename src/muya/themes/{light.css => default.css} (82%) create mode 100644 src/muya/themes/prismjs/light.theme.css create mode 100644 src/renderer/assets/themes/codemirror/one-dark.css create mode 100644 src/renderer/assets/themes/dark.theme.css create mode 100644 src/renderer/assets/themes/graphite.theme.css create mode 100644 src/renderer/assets/themes/material-dark.theme.css create mode 100644 src/renderer/assets/themes/one-dark.theme.css create mode 100644 src/renderer/assets/themes/prismjs/dark.theme.css create mode 100644 src/renderer/assets/themes/prismjs/one-dark.theme.css create mode 100644 src/renderer/assets/themes/ulysses.theme.css diff --git a/.electron-vue/webpack.renderer.config.js b/.electron-vue/webpack.renderer.config.js index df6f0308..b4a9056b 100644 --- a/.electron-vue/webpack.renderer.config.js +++ b/.electron-vue/webpack.renderer.config.js @@ -47,7 +47,7 @@ const rendererConfig = { } }, { - test: /(katex|github\-markdown|prism[\-a-z]*)\.css$/, + test: /(katex|github\-markdown|prism[\-a-z]*|\.theme)\.css$/, use: [ 'to-string-loader', 'css-loader' @@ -55,7 +55,7 @@ const rendererConfig = { }, { test: /\.css$/, - exclude: /(katex|github\-markdown|prism[\-a-z]*)\.css$/, + exclude: /(katex|github\-markdown|prism[\-a-z]*|\.theme)\.css$/, use: [ proMode ? MiniCssExtractPlugin.loader : 'style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, diff --git a/.github/CHANGELOG.md b/.github/CHANGELOG.md index 5ae72d1c..7b2cdfb8 100644 --- a/.github/CHANGELOG.md +++ b/.github/CHANGELOG.md @@ -19,7 +19,7 @@ This update **fixes a XSS security vulnerability** when exporting a document. - Open local markdown file when you click on it in another tab (#359) - Clicking a link should open it in the browser (#425) - Support maxOS `dark mode`, when you change `mode dark or light` in system, Mark Text will change its theme. -- Add two new themes Ulysses Light and Graphite Light theme. +- Add new themes: Ulysses Light, Graphite Light, Material Dark and One Dark. - Watch file changed in tabs and show a notice(autoSave is `false`) or update the file(autoSave is `true`) **:butterfly:Optimization** diff --git a/doc/SETTINGS.md b/doc/SETTINGS.md new file mode 100644 index 00000000..e8bc9909 --- /dev/null +++ b/doc/SETTINGS.md @@ -0,0 +1,39 @@ +# Settings + +## Options + +### Editor + +- **fontSize**: The editor font size. +- **editorFontFamily**: The editor font family name. +- **codeFontSize**: The code block font size. +- **codeFontFamily**: The code block font family name. +- **lineHeight**: The line height of the editor. +- **tabSize**: The number of spaces a tab is equal to. +- **autoPairBracket**: If `true` the editor automatically closes brackets. +- **autoPairMarkdownSyntax**: If `true` the editor automatically closes inline markdown like `*` or `_`. +- **autoPairQuote**: If `true` the editor automatically closes quotes (`'` and `"`). +- **hideQuickInsertHint**: If `true` the editor hides the quick insert hint. +- **preferLooseListItem**: The preferred list style. If `true` a loose list is preferred otherwise a tight list. +- **bulletListMarker**: The preferred list item bullet (`+`,`-` or `*`). + +### Files + +- **autoSave**: Automatically saves the file after editing. +- **endOfLine**: The default end of line character (`lf`, `crlf` or `default`). + +### Window + +- **theme**: Specifies the theme (`dark`, `graphite`, `material-dark`, `one-dark`, `light` or `ulysses`). +- **textDirection**: The editor text direction (`ltr` or `rtl`). +- **openFilesInNewWindow**: If `true` files should opened in a new window. +- **titleBarStyle**: Specifies the title bar (`csd` (macOS only), `custom` or `native`). + +### Misc + +- **aidou**: Show aidou menu entry. + +### Deprecated + +- **lightColor** +- **darkColor** diff --git a/src/main/menus/theme.js b/src/main/menus/theme.js index c746f20a..633f7656 100644 --- a/src/main/menus/theme.js +++ b/src/main/menus/theme.js @@ -7,14 +7,6 @@ export default { label: 'Theme', id: 'themeMenu', submenu: [{ - label: 'Material Dark', - type: 'radio', - id: 'dark', - checked: theme === 'dark', - click (menuItem, browserWindow) { - actions.selectTheme('dark') - } - }, { label: 'Cadmium Light', type: 'radio', id: 'light', @@ -23,12 +15,12 @@ export default { actions.selectTheme('light') } }, { - label: 'Ulysses Light', + label: 'Dark', type: 'radio', - id: 'ulysses', - checked: theme === 'ulysses', + id: 'dark', + checked: theme === 'dark', click (menuItem, browserWindow) { - actions.selectTheme('ulysses') + actions.selectTheme('dark') } }, { label: 'Graphite Light', @@ -38,5 +30,29 @@ export default { click (menuItem, browserWindow) { actions.selectTheme('graphite') } + }, { + label: 'Material Dark', + type: 'radio', + id: 'material-dark', + checked: theme === 'material-dark', + click (menuItem, browserWindow) { + actions.selectTheme('material-dark') + } + }, { + label: 'One Dark', + type: 'radio', + id: 'one-dark', + checked: theme === 'one-dark', + click (menuItem, browserWindow) { + actions.selectTheme('one-dark') + } + }, { + label: 'Ulysses Light', + type: 'radio', + id: 'ulysses', + checked: theme === 'ulysses', + click (menuItem, browserWindow) { + actions.selectTheme('ulysses') + } }] } diff --git a/src/main/preference.js b/src/main/preference.js index 4c1d43e9..f2b0b665 100644 --- a/src/main/preference.js +++ b/src/main/preference.js @@ -120,16 +120,16 @@ class Preference { } let brokenSettings = false - if (!settings.theme || (settings.theme && !/^(dark|light)$/.test(settings.theme))) { + if (!settings.theme || (settings.theme && !/^(?:dark|graphite|material-dark|one-dark|light|ulysses)$/.test(settings.theme))) { brokenSettings = true settings.theme = 'light' } if (!settings.bulletListMarker || - (settings.bulletListMarker && !/^(\+|-|\*)$/.test(settings.bulletListMarker))) { + (settings.bulletListMarker && !/^(?:\+|-|\*)$/.test(settings.bulletListMarker))) { brokenSettings = true settings.bulletListMarker = '-' } - if (!settings.titleBarStyle || !/^(native|csd|custom)$/.test(settings.titleBarStyle)) { + if (!settings.titleBarStyle || !/^(?:native|csd|custom)$/.test(settings.titleBarStyle)) { settings.titleBarStyle = 'csd' } if (brokenSettings) { diff --git a/src/muya/themes/light.css b/src/muya/themes/default.css similarity index 82% rename from src/muya/themes/light.css rename to src/muya/themes/default.css index ac889efd..7b810393 100644 --- a/src/muya/themes/light.css +++ b/src/muya/themes/default.css @@ -112,6 +112,8 @@ pre.ag-paragraph { font-size: 14px; } +@media not print { + #ag-editor-id { max-width: var(--editorAreaWidth); margin: 0 auto; @@ -408,19 +410,6 @@ pre[class*="language-"] { color: var(--editorColor50); } -@media print { - html { - font-size: 13px; - } - table, - pre { - page-break-inside: avoid; - } - pre { - word-wrap: break-word; - } -} - .ag-hide.ag-math > .ag-math-render { color: var(--editorColor); } @@ -456,127 +445,41 @@ blockquote .ag-hide.ag-math > .ag-math-render { background-image: url(../lib/assets/icons/image_light_fail.png); } -/* prismjs default theme */ - -code[class*="language-"], -pre.ag-paragraph { - color: black; - /*font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;*/ - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; - } - - /* Code blocks */ - pre.ag-paragraph { - padding: 1em; - margin: 1em 0; - } - - /* Inline code */ - :not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; - white-space: normal; - } - - .token.comment, - .token.prolog, - .token.doctype, - .token.cdata { - color: slategray; - } - - .token.punctuation { - color: #999; - } - - .namespace { - opacity: .7; - } - - .token.property, - .token.tag, - .token.boolean, - .token.number, - .token.constant, - .token.symbol { - color: #905; - } - - .token.selector, - .token.attr-name, - .token.string, - .token.char, - .token.builtin { - color: #690; - } - - .token.inserted { - color: #22863a; - background: #f0fff4; +body.dark .ag-image-marked-text::before { + background: url(../lib/assets/icons/image_dark.png); } -.token.deleted { - color: #b31d28; - background: #ffeef0; +body.dark .ag-image-marked-text.ag-image-fail::before { + background-image: url(../lib/assets/icons/image_dark_fail.png); } - - .token.operator, - .token.entity, - .token.url, - .language-css .token.string, - .style .token.string { - color: #9a6e3a; - } - - .token.atrule, - .token.attr-value, - .token.keyword { - color: #07a; - } - - .token.function, - .token.class-name { - color: #DD4A68; - } - - .token.regex, - .token.important, - .token.variable { - color: #e90; - } - - .token.important, - .token.bold { - font-weight: bold; - } - .token.italic { - font-style: italic; - } - - .token.entity { - cursor: help; - } - .ag-front-icon { - fill: var(--editorColor50); - } +.ag-front-icon { + fill: var(--editorColor50); +} - .ag-front-icon::before { +.ag-front-icon::before { border: 3px solid var(--editorColor50); border-bottom: none; border-left-color: transparent; border-right-color: transparent; - } - +} + +} /* end not print */ + +@media print { + html { + font-size: 13px; + } + table, + pre { + page-break-inside: avoid; + } + pre { + word-wrap: break-word; + } +} + +/* + * Prism.js theme + */ +@import url("prismjs/light.theme.css"); diff --git a/src/muya/themes/prismjs/light.theme.css b/src/muya/themes/prismjs/light.theme.css new file mode 100644 index 00000000..71839b10 --- /dev/null +++ b/src/muya/themes/prismjs/light.theme.css @@ -0,0 +1,115 @@ +/* + * ------------------------------------ + * Prism.js light theme + */ + +code[class*="language-"], +pre.ag-paragraph { + color: black; + /*font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;*/ + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +/* Code Fence */ +pre.ag-paragraph { + padding: 1em; + margin: 1em 0; +} + +/* Inline Code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin { + color: #690; +} + +.token.inserted { + color: #22863a; + background: #f0fff4; +} + +.token.deleted { + color: #b31d28; + background: #ffeef0; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/src/renderer/assets/styles/index.css b/src/renderer/assets/styles/index.css index 2d85bc29..3eaadb49 100644 --- a/src/renderer/assets/styles/index.css +++ b/src/renderer/assets/styles/index.css @@ -2,6 +2,7 @@ :root { --titleBarHeight: 32px; --editorAreaWidth: 700px; + /*editor*/ --themeColor: rgba(33, 181, 111, 1); --highlightColor: rgba(33, 181, 111, .4); @@ -10,12 +11,13 @@ --editorColor50: rgba(0, 0, 0, .5); --editorColor30: rgba(0, 0, 0, .3); --editorColor10: rgba(0, 0, 0, .1); - --editorColor04: rgba(0, 0, 0, .03); /* on purpose to set it to .03*/ + --editorColor04: rgba(0, 0, 0, .03); --editorBgColor: rgba(255, 255, 255, 1); --deleteColor: #ff6969; --iconColor: #333; --codeBgColor: #d8d8d869; --codeBlockBgColor: rgba(33, 181, 111, 0.08); + /*marktext*/ --sideBarColor: rgba(0, 0, 0, .6); --sideBarTitleColor: rgba(0, 0, 0, 1); diff --git a/src/renderer/assets/styles/printService.css b/src/renderer/assets/styles/printService.css index 026262a5..6c25bb33 100644 --- a/src/renderer/assets/styles/printService.css +++ b/src/renderer/assets/styles/printService.css @@ -2,13 +2,27 @@ body article.print-container { display: none; } @media print { + .editor-container { + display: none !important; + } + /* General rules for printing. */ html, body { + position: relative !important; + width: 100% !important; + display: block !important; + height: auto !important; background: transparent !important; + overflow: hidden; + } + + body { + position: relative !important; + height: auto !important; } body > div { - display: none; + display: none !important; } body article.print-container { diff --git a/src/renderer/assets/themes/codemirror/one-dark.css b/src/renderer/assets/themes/codemirror/one-dark.css new file mode 100644 index 00000000..b67fa0c4 --- /dev/null +++ b/src/renderer/assets/themes/codemirror/one-dark.css @@ -0,0 +1,110 @@ +/* + Name: one-dark 1.1.1 + Author: Török Ádám (http://github.com/Aerobird98) + Original Atom One Dark Theme (https://github.com/atom/one-dark-ui & https://github.com/atom/one-dark-syntax) + +MIT License + +Copyright (c) 2016-2017 Aerobird98 + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. +*/ + +/* basic */ +.cm-s-one-dark { + font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace; + font-weight: 350; + font-size: 18px; + color: #abb2bf; + background-color: #282c34; +} +.cm-s-one-dark .CodeMirror-selected {background-color: #3e4451;} +.cm-s-one-dark .CodeMirror-gutter, +.cm-s-one-dark .CodeMirror-gutters { + border: none; + background-color: #282c34; +} +.cm-s-one-dark .CodeMirror-linenumber, +.cm-s-one-dark .CodeMirror-linenumbers { + color: #5c6370 !important; + background-color: transparent; +} +.cm-s-one-dark .CodeMirror-lines { + color: #abb2bf !important; + background-color: transparent; +} +.cm-s-one-dark .CodeMirror-cursor {border-left: 2px solid #56b6c2 !important;} +/* addon: edit/machingbrackets.js & addon: edit/matchtags.js */ +.cm-s-one-dark .CodeMirror-matchingbracket, +.cm-s-one-dark .CodeMirror-matchingtag { + border-bottom: 2px solid #56b6c2; + color: #abb2bf !important; + background-color: transparent; +} +.cm-s-one-dark .CodeMirror-nonmatchingbracket { + border-bottom: 2px solid #e06c75; + color: #abb2bf !important; + background-color: transparent; +} +/* addon: fold/foldgutter.js */ +.cm-s-one-dark .CodeMirror-foldmarker, +.cm-s-one-dark .CodeMirror-foldgutter, +.cm-s-one-dark .CodeMirror-foldgutter-open, +.cm-s-one-dark .CodeMirror-foldgutter-folded { + border: none; + text-shadow: none; + color: #5c6370 !important; + background-color: transparent; +} +/* addon: selection/active-line.js */ +.cm-s-one-dark .CodeMirror-activeline-background {background-color: rgba(153, 187, 255, 0.04);} +/* basic syntax */ +.cm-s-one-dark .cm-header {color: #e06c75;} +.cm-s-one-dark .cm-quote {color: #5c6370;font-style: italic;} +.cm-s-one-dark .cm-negative {color: #e06c75;} +.cm-s-one-dark .cm-positive {color: #e06c75;} +.cm-s-one-dark .cm-strong {color: #d19a66;font-weight: bold;} +.cm-s-one-dark .cm-header .cm-strong {color: #d19a66;font-weight: bold;} +.cm-s-one-dark .cm-em {color: #c678dd;font-style: italic;} +.cm-s-one-dark .cm-header .cm-em {color: #c678dd;font-style: italic;} +.cm-s-one-dark .cm-tag {color: #e06c75;} +.cm-s-one-dark .cm-attribute {color: #d19a66;} +.cm-s-one-dark .cm-link {color: #98c379;border-bottom: solid 1px #98c379;} +.cm-s-one-dark .cm-builtin {color: #e06c75;} +.cm-s-one-dark .cm-keyword {color: #c678dd;} +.cm-s-one-dark .cm-def {color: #e5c07b;} /* original: #d19a66; */ +.cm-s-one-dark .cm-atom {color: #d19a66;} +.cm-s-one-dark .cm-number {color: #d19a66;} +.cm-s-one-dark .cm-property {color: #56b6c2;} /* original: #abb2bf */ +.cm-s-one-dark .cm-qualifier {color: #d19a66;} +.cm-s-one-dark .cm-variable {color: #e06c75;} +.cm-s-one-dark .cm-string {color: #98c379;} +.cm-s-one-dark .cm-punctuation {color: #abb2bf;} +.cm-s-one-dark .cm-operator {color: #56b6c2;} /* original: #abb2bf */ +.cm-s-one-dark .cm-meta {color: #abb2bf;} +.cm-s-one-dark .cm-bracket {color: #abb2bf;} +.cm-s-one-dark .cm-comment {color: #5c6370;font-style: italic;} +.cm-s-one-dark .cm-error {color: #e06c75;} +/* css syntax corrections */ +.cm-s-one-dark .cm-m-css.cm-variable {color: #828997;} +.cm-s-one-dark .cm-m-css.cm-property {color: #abb2bf;} +.cm-s-one-dark .cm-m-css.cm-atom {color: #56b6c2;} +.cm-s-one-dark .cm-m-css.cm-builtin {color: #56b6c2;} +/* lua syntax corrections */ +.cm-s-one-dark .cm-m-lua.cm-variable {color: #56b6c2;} diff --git a/src/renderer/assets/themes/dark.theme.css b/src/renderer/assets/themes/dark.theme.css new file mode 100644 index 00000000..f5bb727a --- /dev/null +++ b/src/renderer/assets/themes/dark.theme.css @@ -0,0 +1,66 @@ +:root { + /*editor*/ + --themeColor: #409eff; + --highlightColor: rgba(102, 177, 255, .6); + --selectionColor: rgba(102, 177, 255, .3); + --editorColor: rgba(255, 255, 255, .8); + --editorColor50: rgba(255, 255, 255, .5); + --editorColor30: rgba(255, 255, 255, .3); + --editorColor10: rgba(255, 255, 255, .1); + --editorColor04: rgba(255, 255, 255, .04); + --editorBgColor: #282828; + --deleteColor: #409eff; + --iconColor: rgba(255, 255, 255, .8); + --codeBgColor: #424344; + --codeBlockBgColor: #424344; + + /*marktext*/ + --sideBarColor: rgba(255, 255, 255, .6); + --sideBarTitleColor: rgba(255, 255, 255, .8); + --sideBarTextColor: rgba(255, 255, 255, .4); + --sideBarBgColor: #1e1e1e; + --sideBarItemHoverBgColor: rgba(255, 255, 255, .03); + --itemBgColor: #3f3f3f; + --floatBgColor: #3f3f3f; + --floatHoverColor: rgba(255, 255, 255, .04); + --floatBorderColor: rgba(0, 0, 0, .05); + --editorAreaWidth: 700px; +} + +::-webkit-scrollbar { + background: var(--editorBgColor); +} + +.title-bar .frameless-titlebar-button > div > svg { + fill: #ffffff; +} + +.side-bar { + border-right: 1px solid #1d1d1d !important; +} + +.editor-tabs { + border-bottom: 1px solid #1d1d1d; + box-shadow: none !important; +} +.tabs-container > li, +.tabs-container > li.active { + background: var(--editorBgColor) !important; +} + +:not(pre) > code[class*="language-"], +pre.ag-paragraph { + background: var(--codeBlockBgColor) !important; +} + +p:not(.ag-active)[data-role="hr"]::before { + border-top: 2px dashed var(--editorColor10) !important; + background: none !important; +} + +/* + * Prism.js theme (override light theme) + */ + +/* @import url("prismjs/dark.theme.css"); */ + diff --git a/src/renderer/assets/themes/graphite.theme.css b/src/renderer/assets/themes/graphite.theme.css new file mode 100644 index 00000000..142c30b6 --- /dev/null +++ b/src/renderer/assets/themes/graphite.theme.css @@ -0,0 +1,127 @@ +:root { + --themeColor: rgb(104, 134, 170); + --highlightColor: rgba(104, 134, 170, .4); + --selectionColor: rgba(0, 0, 0, .1); + --editorColor: rgba(43, 48, 50, .8); + --editorColor50: rgba(43, 48, 50, .5); + --editorColor30: rgba(43, 48, 50, .3); + --editorColor10: rgba(43, 48, 50, .1); + --editorColor04: rgba(43, 48, 50, .04); + --editorBgColor: #f7f7f7; + --deleteColor: #ff6969; + --iconColor: rgba(135, 135, 135, .8); + --codeBgColor: #d8d8d869; + --codeBlockBgColor: rgba(104, 134, 170, .04); + + --sideBarColor: rgba(188, 193, 197, .8); + --sideBarTitleColor: rgba(255, 255, 255, 1); + --sideBarTextColor: rgba(188, 193, 197, .4); + --sideBarBgColor: rgba(69, 75, 80, 1); + --sideBarItemHoverBgColor: rgba(255, 255, 255, .03); + --itemBgColor: rgba(43, 48, 50, .5); + --floatBgColor: rgb(237, 237, 238); + --floatHoverColor: rgba(43, 48, 50, .04); + --floatBorderColor: rgba(0, 0, 0, .03); + --editorAreaWidth: 700px; +} + +.title-bar.tabs-visible { + background: #f3f3f3 !important; +} + +.editor-tabs { + background: #f3f3f3 !important; + border-bottom: 1px solid #dddddd !important; + box-shadow: none !important; +} +.tabs-container > li { + background: none !important; +} +.tabs-container > li.active { + border: 1px solid #dddddd; + border-top: none; + border-bottom: none; + background: var(--floatBgColor) !important; +} +.tabs-container > li.active:not(:last-child):after { + top: 0 !important; + bottom: auto !important; + background: var(--themeColor) !important; +} + +/* ------------------------------------ */ + +li.ag-paragraph { + color: var(--editorColor); +} + +/*task list*/ +li.ag-task-list-item { + list-style-type: none; + position: relative; +} +li.ag-task-list-item > input[type=checkbox] { + position: absolute; + cursor: pointer; + width: 16px; + height: 16px; + margin: 4px 0px 0px; + top: 2px; + left: -22px; + transform-origin: center; + transform: rotate(-90deg); + transition: all .2s ease; +} +li.ag-task-list-item > input.ag-checkbox-checked { + transform: rotate(0); + opacity: .5; +} +li.ag-task-list-item > input[type=checkbox]::before { + content: ''; + width: 16px; + height: 16px; + box-sizing: border-box; + display: inline-block; + border: 2px solid var(--editorColor); + border-radius: 2px; + background-color: var(--editorBgColor); + position: absolute; + top: 0; + left: 0; + transition: all .2s ease; +} +li.ag-task-list-item > input.ag-checkbox-checked::before { + border: transparent; + background-color: var(--editorColor); +} +li.ag-task-list-item > input::after { + content: ''; + transform: rotate(-45deg) scale(0); + width: 9px; + height: 5px; + border: 2px solid #fff; + border-top: none; + border-right: none; + position: absolute; + display: inline-block; + top: 1px; + left: 5px; + transition: all .2s ease; +} +li.ag-task-list-item > input.ag-checkbox-checked::after { + transform: rotate(-45deg) scale(1); +} + +/*horizontal line*/ +p:not(.ag-active)[data-role="hr"]::before { + content: ''; + position: absolute; + width: 100%; + display: block; + left: 50%; + top: 50%; + height: 2px; + box-sizing: border-box; + border-bottom: 2px dashed var(--editorColor50); + transform: translateX(-50%) translateY(-50%); +} diff --git a/src/renderer/assets/themes/material-dark.theme.css b/src/renderer/assets/themes/material-dark.theme.css new file mode 100644 index 00000000..f96e9e12 --- /dev/null +++ b/src/renderer/assets/themes/material-dark.theme.css @@ -0,0 +1,62 @@ +:root { + /*editor*/ + --themeColor: #f48237; + --highlightColor: rgba(244, 130, 55, .4); + --selectionColor: rgba(255, 255, 255, .2); + --editorColor: rgba(171, 178, 191, 1); + --editorColor50: rgba(171, 178, 191, .9); + --editorColor30: rgba(171, 178, 191, .8); + --editorColor10: rgba(171, 178, 191, .5); + --editorColor04: rgba(171, 178, 191, .04); + --editorBgColor: #34393f; + --deleteColor: #ff6969; + --iconColor: rgba(255, 255, 255, .8); + --codeBgColor: #d8d8d869; + --codeBlockBgColor: #3f454c; + + /*marktext*/ + --sideBarColor: rgba(255, 255, 255, .6); + --sideBarTitleColor: rgba(255, 255, 255, 1); + --sideBarTextColor: rgba(255, 255, 255, .4); + --sideBarBgColor: rgba(26, 33, 41, 0.9); + --sideBarItemHoverBgColor: rgba(255, 255, 255, .03); + --itemBgColor: rgba(71, 78, 86, 0.6); + --floatBgColor: #3c4650; + --floatHoverColor: rgba(255, 255, 255, .04); + --floatBorderColor: rgba(0, 0, 0, .03); + --editorAreaWidth: 700px; +} + +.title-bar .frameless-titlebar-button > div > svg { + fill: #ffffff; +} + +.tabs-container > li { + background: none !important; +} +.tabs-container > li.active { + background: var(--floatBgColor) !important; +} + +/* ------------------------------------ */ + +:not(pre) > code[class*="language-"], +pre.ag-paragraph { + background: var(--codeBlockBgColor) !important; +} + +/*.ag-image-marked-text::before { + background: url(../lib/assets/icons/image_dark.png); +} + +.ag-image-marked-text.ag-image-fail::before { + background-image: url(../lib/assets/icons/image_dark_fail.png); +}*/ + +/* + * Prism.js theme (override light theme) + */ + +/* +@import url("prismjs/dark.theme.css"); +*/ diff --git a/src/renderer/assets/themes/one-dark.theme.css b/src/renderer/assets/themes/one-dark.theme.css new file mode 100644 index 00000000..e28b415a --- /dev/null +++ b/src/renderer/assets/themes/one-dark.theme.css @@ -0,0 +1,190 @@ +:root { + /*editor*/ + --themeColor: #e2c08d; + --highlightColor: #ffffff10; + --selectionColor: #67769660; + --editorColor: #9da5b4; + --editorColor50: rgba(157, 165, 180, .5); + --editorColor30: rgba(157, 165, 180, .3); + --editorColor10: rgba(157, 165, 180, .1); + --editorColor04: rgba(157, 165, 180, .04); + --editorBgColor: #282c34; + --deleteColor: #ff6969; + --iconColor: rgba(255, 255, 255, .8); + --codeBgColor: #3a3f4b; + --codeBlockBgColor: #3a3f4b; + + /*marktext*/ + --sideBarColor: #9da5b4; + --sideBarTitleColor: #9da5b4; + --sideBarTextColor: #9da5b4; + --sideBarBgColor: #21252b; + --sideBarItemHoverBgColor: #3a3f4b; + --itemBgColor: #21252b; + --floatBgColor: #21252b; + --floatHoverColor: #3a3f4b; + --floatBorderColor: #181a1f; + --editorAreaWidth: 700px; +} + +::-webkit-scrollbar { + background: var(--editorBgColor); +} +::-webkit-scrollbar:vertical { + width: 10px; +} +::-webkit-scrollbar:vertical:hover { + width: 12px; +} +::-webkit-scrollbar-thumb { + background: #414956; +} +::-webkit-scrollbar-thumb:hover { + background: #4b5362; +} + +.el-tooltip__popper.is-dark { + border: 1px solid #181a1f; +} +.v-modal { + background: #000; +} +.el-dialog { + box-shadow: 0 1px 3px rgba(0,0,0,.3) !important; + border: 1px solid #181a1f !important; +} + +.mt-notification > .notice-bg.icon-message { + background: #4d78cc !important; +} + +.title-bar .frameless-titlebar-button > div > svg { + fill: #ffffff; +} +.frameless-titlebar-minimize[data-v-0a64f081]:hover, +.frameless-titlebar-toggle[data-v-0a64f081]:hover { + background-color: rgba(215, 218, 224, 0.05) !important; +} + +.side-bar { + border-right: 1px solid #181a1f !important; +} +.left-column ul > li > svg { + color: rgba(215, 218, 224, 0.6) !important; +} +.left-column ul > li:hover > svg { + color: #d7dae0 !important; +} +.left-column ul > li.active > svg { + color: #4d78cc !important; +} +.open-project svg, +.empty .no-data svg, +.side-bar-toc .no-data svg { + fill: #4d78cc !important; +} +.open-project a { + color: #9da5b4 !important; + border: 1px solid #181a1f !important; + background-color: #353b45 !important; + background-image: linear-gradient(#3a3f4b, #353b45) !important; + box-shadow: none !important; +} + +.editor-tabs { + border-bottom: 1px solid #181a1f; + box-shadow: none !important; +} +.tabs-container > li, +.tabs-container > li.active { + background: var(--editorBgColor) !important; +} +.tabs-container > li.active { + border: 1px solid #181a1f; + border-bottom: none; +} +.tabs-container > li.active:not(:last-child):after { + top: 0 !important; + right: auto !important; + width: 2px !important; + height: auto !important; + background: #4d78cc !important; +} + +:not(pre) > code[class*="language-"], +pre.ag-paragraph { + background: var(--codeBlockBgColor) !important; +} + +p:not(.ag-active)[data-role="hr"]::before { + border-top: 2px dashed #4b5362 !important; + background: none !important; +} + +.input-wrapper { + background: #1b1d23 !important; +} + +li.ag-task-list-item { + list-style-type: none; + position: relative; +} +li.ag-task-list-item > input[type=checkbox] { + position: absolute; + cursor: pointer; + width: 16px; + height: 16px; + margin: 4px 0px 0px; + top: 2px; + left: -22px; + transform-origin: center; + transform: rotate(-90deg); + transition: all .2s ease; +} +li.ag-task-list-item > input.ag-checkbox-checked { + transform: rotate(0); + opacity: .6; +} +li.ag-task-list-item > input[type=checkbox]::before { + content: ''; + width: 16px; + height: 16px; + box-sizing: border-box; + display: inline-block; + border: 2px solid var(--editorColor); + border-radius: 2px; + background-color: var(--editorBgColor); + position: absolute; + top: 0; + left: 0; + transition: all .2s ease; +} +li.ag-task-list-item > input.ag-checkbox-checked::before { + border: transparent; + background-color: var(--editorColor); +} +li.ag-task-list-item > input::after { + content: ''; + transform: rotate(-45deg) scale(0); + width: 9px; + height: 5px; + border: 2px solid #fff; + border-top: none; + border-right: none; + position: absolute; + display: inline-block; + top: 1px; + left: 5px; + transition: all .2s ease; +} +li.ag-task-list-item > input.ag-checkbox-checked::after { + transform: rotate(-45deg) scale(1); +} + +/* ------------------------------------ */ + +/* + * Prism.js theme (override light theme) + */ + +/* @import url("prismjs/one-dark.theme.css"); */ diff --git a/src/renderer/assets/themes/prismjs/dark.theme.css b/src/renderer/assets/themes/prismjs/dark.theme.css new file mode 100644 index 00000000..dcb4d51c --- /dev/null +++ b/src/renderer/assets/themes/prismjs/dark.theme.css @@ -0,0 +1,126 @@ +/* + * ------------------------------------ + * Prism.js dark theme + */ + +code[class*="language-"], +pre.ag-paragraph { + color: #f8f8f2; + /*font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;*/ + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + overflow: visible; +} + +/* Code Fence */ +pre.ag-paragraph { + padding: 1em; + margin: 1em 0; + border-radius: 0.3em; +} + +/* Inline Code */ +:not(pre) > code[class*="language-"], +pre.ag-paragraph { + background: #272822; +} + +/* Inline Code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #f8f8f2; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.constant, +.token.symbol { + color: #f92672; +} + +.token.boolean, +.token.number { + color: #ae81ff; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin { + color: #a6e22e; +} + +.token.inserted { + color: #22863a; + background: #f0fff4; +} + +.token.deleted { + color: #b31d28; + background: #ffeef0; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string, +.token.variable { + color: #f8f8f2; +} + +.token.atrule, +.token.attr-value, +.token.function, +.token.class-name { + color: #e6db74; +} + +.token.keyword { + color: #66d9ef; +} + +.token.regex, +.token.important { + color: #fd971f; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/src/renderer/assets/themes/prismjs/one-dark.theme.css b/src/renderer/assets/themes/prismjs/one-dark.theme.css new file mode 100644 index 00000000..0374db18 --- /dev/null +++ b/src/renderer/assets/themes/prismjs/one-dark.theme.css @@ -0,0 +1,137 @@ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + +The MIT License (MIT) + +Copyright (c) 2016 Adrián + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + */ + +code[class*="language-"], +pre.ag-paragraph { + color: #ABB2BF; + /*font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;*/ + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + overflow: visible; +} + +/* Code Fence */ +pre.ag-paragraph { + padding: 1em; + margin: 1em 0; + border-radius: 0.3em; +} + +/* Inline Code */ +:not(pre) > code[class*="language-"], +pre.ag-paragraph { + background: #282c34; +} + +/* Inline Code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #5C6370; +} + +.token.punctuation { + color: #abb2bf; +} + +.token.selector, +.token.tag { + color: #e06c75; +} + +.token.property, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.attr-name, +.token.deleted { + color: #d19a66; +} + +.token.string, +.token.char, +.token.attr-value, +.token.builtin, +.token.inserted { + color: #98c379; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #56b6c2; +} + +.token.atrule, +.token.keyword { + color: #c678dd; +} + +.token.function { + color: #61afef; +} + +.token.regex, +.token.important, +.token.variable { + color: #c678dd; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/src/renderer/assets/themes/ulysses.theme.css b/src/renderer/assets/themes/ulysses.theme.css new file mode 100644 index 00000000..0e3de123 --- /dev/null +++ b/src/renderer/assets/themes/ulysses.theme.css @@ -0,0 +1,139 @@ +:root { + --themeColor: rgb(12, 139, 186); + --highlightColor: rgba(12, 139, 186, .4); + --selectionColor: rgba(0, 0, 0, .1); + --editorColor: rgba(101, 101, 101, .8); + --editorColor50: rgba(101, 101, 101, .5); + --editorColor30: rgba(101, 101, 101, .3); + --editorColor10: rgba(101, 101, 101, .1); + --editorColor04: rgba(101, 101, 101, .04); + --editorBgColor: #f3f3f3; + --deleteColor: #ff6969; + --iconColor: rgba(101, 101, 101, .8); + --codeBgColor: #d8d8d869; + --codeBlockBgColor: rgba(12, 139, 186, .04); + + --sideBarColor: rgba(101, 101, 101, .6); + --sideBarTitleColor: rgba(101, 101, 101, 1); + --sideBarTextColor: rgba(101, 101, 101, .4); + --sideBarBgColor: rgba(248, 248, 248, 0.9); + --sideBarItemHoverBgColor: rgba(101, 101, 101, .03); + --itemBgColor: rgba(245, 245, 245, 0.6); + --floatBgColor: #ffffff; + --floatHoverColor: rgba(101, 101, 101, .04); + --floatBorderColor: rgba(0, 0, 0, .03); + --editorAreaWidth: 700px; +} + +.editor-tabs { + box-shadow: none !important; +} + +.tabs-container > li:not(:last-child) { + border-right: 1px solid #e5e5e5 !important; + background: var(--editorBgColor) !important; +} + +/* ------------------------------------ */ + +h1, h2, h3, h4, h5, h6 { + color: var(--themeColor); + text-align: center; +} + +li.ag-bullet-list-item { + position: relative; + list-style: none; +} +li.ag-bullet-list-item::before { + content: ''; + display: block; + position: absolute; + width: 5px; + height: 2px; + left: -18px; + top: 15px; + background: var(--editorColor); +} + +blockquote.ag-paragraph { + background: rgb(233, 233, 233); +} +blockquote.ag-paragraph::before { + content: none; +} + +li.ag-paragraph { + color: var(--editorColor); +} + +/*task list*/ +li.ag-task-list-item { + list-style-type: none; + position: relative; +} +li.ag-task-list-item > input[type=checkbox] { + position: absolute; + cursor: pointer; + width: 16px; + height: 16px; + margin: 4px 0px 0px; + top: 2px; + left: -22px; + transform-origin: center; + transform: rotate(-90deg); + transition: all .2s ease; +} +li.ag-task-list-item > input.ag-checkbox-checked { + transform: rotate(0); + opacity: .5; +} +li.ag-task-list-item > input[type=checkbox]::before { + content: ''; + width: 16px; + height: 16px; + box-sizing: border-box; + display: inline-block; + border: 2px solid var(--editorColor); + border-radius: 2px; + background-color: var(--editorBgColor); + position: absolute; + top: 0; + left: 0; + transition: all .2s ease; +} +li.ag-task-list-item > input.ag-checkbox-checked::before { + border: transparent; + background-color: var(--editorColor); +} +li.ag-task-list-item > input::after { + content: ''; + transform: rotate(-45deg) scale(0); + width: 9px; + height: 5px; + border: 2px solid #fff; + border-top: none; + border-right: none; + position: absolute; + display: inline-block; + top: 1px; + left: 5px; + transition: all .2s ease; +} +li.ag-task-list-item > input.ag-checkbox-checked::after { + transform: rotate(-45deg) scale(1); +} + +/*horizontal line*/ +p:not(.ag-active)[data-role="hr"]::before { + content: ''; + position: absolute; + width: 50%; + display: block; + left: 50%; + top: 50%; + height: 2px; + box-sizing: border-box; + border-bottom: 2px dashed var(--editorColor50); + transform: translateX(-50%) translateY(-50%); +} diff --git a/src/renderer/components/editorWithTabs/editor.vue b/src/renderer/components/editorWithTabs/editor.vue index 74c086ff..2b13898f 100644 --- a/src/renderer/components/editorWithTabs/editor.vue +++ b/src/renderer/components/editorWithTabs/editor.vue @@ -89,9 +89,10 @@ import Printer from '@/services/printService' import { DEFAULT_EDITOR_FONT_FAMILY } from '@/config' - import 'muya/themes/light.css' - import CloseIcon from '@/assets/icons/close.svg' + import 'muya/themes/default.css' + import '@/assets/themes/codemirror/one-dark.css' import 'view-image/lib/imgViewer.css' + import CloseIcon from '@/assets/icons/close.svg' const STANDAR_Y = 320 diff --git a/src/renderer/components/editorWithTabs/sourceCode.vue b/src/renderer/components/editorWithTabs/sourceCode.vue index 231bf73b..62f952bc 100644 --- a/src/renderer/components/editorWithTabs/sourceCode.vue +++ b/src/renderer/components/editorWithTabs/sourceCode.vue @@ -12,7 +12,7 @@ import { mapState } from 'vuex' import { adjustCursor } from '../../util' import bus from '../../bus' - import { railscastsThemes } from '@/config' + import { oneDarkThemes, railscastsThemes } from '@/config' export default { props: { @@ -67,6 +67,8 @@ } if (railscastsThemes.includes(theme)) { codeMirrorConfig.theme = 'railscasts' + } else if (oneDarkThemes.includes(theme)) { + codeMirrorConfig.theme = 'one-dark' } const editor = this.editor = codeMirror(container, codeMirrorConfig) bus.$on('file-loaded', this.setMarkdown) diff --git a/src/renderer/components/editorWithTabs/tabs.vue b/src/renderer/components/editorWithTabs/tabs.vue index 68709e61..08ee9339 100644 --- a/src/renderer/components/editorWithTabs/tabs.vue +++ b/src/renderer/components/editorWithTabs/tabs.vue @@ -53,6 +53,7 @@ width: 100%; height: 35px; user-select: none; + box-shadow: 0px 0px 9px 2px rgba(0, 0, 0, .1); } .tabs-container { list-style: none; diff --git a/src/renderer/components/titleBar.vue b/src/renderer/components/titleBar.vue index e7b77599..22355964 100644 --- a/src/renderer/components/titleBar.vue +++ b/src/renderer/components/titleBar.vue @@ -1,7 +1,7 @@