mirror of
https://github.com/marktext/marktext.git
synced 2025-05-02 19:59:41 +08:00
Modified themes and added dark and one dark theme (#826)
* Modified themes and added dark and one dark theme * fix: print service * Update documentation
This commit is contained in:
Felix Häusler
Ran Luo
parent
70d49c30e1
commit
004879b49a
@ -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 } },
|
||||
|
||||
2
.github/CHANGELOG.md
vendored
2
.github/CHANGELOG.md
vendored
@ -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**
|
||||
|
||||
39
doc/SETTINGS.md
Normal file
39
doc/SETTINGS.md
Normal file
@ -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**
|
||||
@ -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')
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
.ag-front-icon {
|
||||
fill: var(--editorColor50);
|
||||
}
|
||||
|
||||
.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::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");
|
||||
115
src/muya/themes/prismjs/light.theme.css
Normal file
115
src/muya/themes/prismjs/light.theme.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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);
|
||||
|
||||
@ -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 {
|
||||
|
||||
110
src/renderer/assets/themes/codemirror/one-dark.css
Normal file
110
src/renderer/assets/themes/codemirror/one-dark.css
Normal file
@ -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;}
|
||||
66
src/renderer/assets/themes/dark.theme.css
Normal file
66
src/renderer/assets/themes/dark.theme.css
Normal file
@ -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"); */
|
||||
|
||||
127
src/renderer/assets/themes/graphite.theme.css
Normal file
127
src/renderer/assets/themes/graphite.theme.css
Normal file
@ -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%);
|
||||
}
|
||||
62
src/renderer/assets/themes/material-dark.theme.css
Normal file
62
src/renderer/assets/themes/material-dark.theme.css
Normal file
@ -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");
|
||||
*/
|
||||
190
src/renderer/assets/themes/one-dark.theme.css
Normal file
190
src/renderer/assets/themes/one-dark.theme.css
Normal file
@ -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"); */
|
||||
126
src/renderer/assets/themes/prismjs/dark.theme.css
Normal file
126
src/renderer/assets/themes/prismjs/dark.theme.css
Normal file
@ -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;
|
||||
}
|
||||
137
src/renderer/assets/themes/prismjs/one-dark.theme.css
Normal file
137
src/renderer/assets/themes/prismjs/one-dark.theme.css
Normal file
@ -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;
|
||||
}
|
||||
139
src/renderer/assets/themes/ulysses.theme.css
Normal file
139
src/renderer/assets/themes/ulysses.theme.css
Normal file
@ -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%);
|
||||
}
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
class="title-bar"
|
||||
:class="[{ 'active': active }, { 'frameless': titleBarStyle === 'custom' }, { 'isOsx': platform === 'darwin' }]"
|
||||
:class="[{ 'active': active }, { 'tabs-visible': showTabBar }, { 'frameless': titleBarStyle === 'custom' }, { 'isOsx': platform === 'darwin' }]"
|
||||
>
|
||||
<div class="title">
|
||||
<span v-if="!filename">Mark Text</span>
|
||||
@ -141,6 +141,7 @@
|
||||
computed: {
|
||||
...mapState({
|
||||
'titleBarStyle': state => state.preferences.titleBarStyle,
|
||||
'showTabBar': state => state.layout.showTabBar
|
||||
}),
|
||||
paths () {
|
||||
if (!this.pathname) return []
|
||||
|
||||
@ -13,4 +13,5 @@ export const DEFAULT_STYLE = {
|
||||
theme: 'light'
|
||||
}
|
||||
|
||||
export const railscastsThemes = ['dark']
|
||||
export const railscastsThemes = ['dark', 'material-dark']
|
||||
export const oneDarkThemes = ['one-dark']
|
||||
|
||||
@ -23,6 +23,19 @@
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
& > .notice-bg.icon-message {
|
||||
background: var(--themeColor);
|
||||
}
|
||||
& > .notice-bg.icon-error {
|
||||
background: var(--deleteColor);
|
||||
}
|
||||
& > .notice-bg.icon-warn {
|
||||
background: var(--deleteColor);
|
||||
}
|
||||
& > .notice-bg.icon-info {
|
||||
background: #999999;
|
||||
}
|
||||
|
||||
& .content {
|
||||
z-index: 100;
|
||||
color: #fff;
|
||||
|
||||
@ -9,17 +9,16 @@ const INON_HASH = {
|
||||
info: 'icon-info'
|
||||
}
|
||||
|
||||
const COLOR_HASH = {
|
||||
primary: 'var(--themeColor)',
|
||||
error: 'var(--deleteColor)',
|
||||
warning: 'var(--deleteColor)',
|
||||
info: '#999999'
|
||||
}
|
||||
// const COLOR_HASH = {
|
||||
// primary: 'var(--themeColor)',
|
||||
// error: 'var(--deleteColor)',
|
||||
// warning: 'var(--deleteColor)',
|
||||
// info: '#999999'
|
||||
// }
|
||||
|
||||
const notification = {
|
||||
name: 'notify',
|
||||
noticeCache: {},
|
||||
// it's a dirty implement of clear, because not remove all the event listeners. need refactor.
|
||||
clear () {
|
||||
Object.keys(this.noticeCache).forEach(key => {
|
||||
this.noticeCache[key].remove()
|
||||
@ -56,7 +55,7 @@ const notification = {
|
||||
target = noticeContainer.querySelector('.confirm')
|
||||
}
|
||||
|
||||
bgNotice.style.backgroundColor = `${COLOR_HASH[type]}`
|
||||
bgNotice.classList.add(INON_HASH[type])
|
||||
|
||||
fluent.style.height = offsetHeight * 2 + 'px'
|
||||
fluent.style.width = offsetHeight * 2 + 'px'
|
||||
|
||||
@ -1,40 +1,63 @@
|
||||
import { THEME_STYLE_ID, COMMON_STYLE_ID, DEFAULT_CODE_FONT_FAMILY, railscastsThemes } from '../config'
|
||||
import { dark, ulysses, graphite } from './themeColor'
|
||||
import { THEME_STYLE_ID, COMMON_STYLE_ID, DEFAULT_CODE_FONT_FAMILY, oneDarkThemes, railscastsThemes } from '../config'
|
||||
import { dark, graphite, materialDark, oneDark, ulysses } from './themeColor'
|
||||
|
||||
const patchTheme = css => {
|
||||
return `@media not print {\n${css}\n}`
|
||||
}
|
||||
|
||||
export const addThemeStyle = theme => {
|
||||
const isCmRailscasts = railscastsThemes.includes(theme)
|
||||
const isCmOneDark = oneDarkThemes.includes(theme)
|
||||
const isDarkTheme = isCmOneDark || isCmRailscasts
|
||||
let themeStyleEle = document.querySelector(`#${THEME_STYLE_ID}`)
|
||||
if (!themeStyleEle) {
|
||||
themeStyleEle = document.createElement('style')
|
||||
themeStyleEle.id = THEME_STYLE_ID
|
||||
document.head.appendChild(themeStyleEle)
|
||||
}
|
||||
|
||||
switch (theme) {
|
||||
case 'light':
|
||||
themeStyleEle.innerHTML = ''
|
||||
break
|
||||
case 'dark':
|
||||
themeStyleEle.innerHTML = dark
|
||||
themeStyleEle.innerHTML = patchTheme(dark())
|
||||
break
|
||||
case 'material-dark':
|
||||
themeStyleEle.innerHTML = patchTheme(materialDark())
|
||||
break
|
||||
case 'ulysses':
|
||||
themeStyleEle.innerHTML = ulysses
|
||||
themeStyleEle.innerHTML = patchTheme(ulysses())
|
||||
break
|
||||
case 'graphite':
|
||||
themeStyleEle.innerHTML = graphite
|
||||
themeStyleEle.innerHTML = patchTheme(graphite())
|
||||
break
|
||||
case 'one-dark':
|
||||
themeStyleEle.innerHTML = patchTheme(oneDark())
|
||||
break
|
||||
default:
|
||||
console.log('unknown theme')
|
||||
break
|
||||
}
|
||||
|
||||
// change codeMirror theme
|
||||
// workaround: use dark icons
|
||||
document.body.classList.remove('dark')
|
||||
if (isDarkTheme) {
|
||||
document.body.classList.add('dark')
|
||||
}
|
||||
|
||||
// change CodeMirror theme
|
||||
const cm = document.querySelector('.CodeMirror')
|
||||
if (cm) {
|
||||
if (railscastsThemes.includes(theme)) {
|
||||
cm.classList.remove('cm-s-default')
|
||||
cm.classList.remove('cm-s-default')
|
||||
cm.classList.remove('cm-s-one-dark')
|
||||
cm.classList.remove('cm-s-railscasts')
|
||||
if (isCmOneDark) {
|
||||
cm.classList.add('cm-s-one-dark')
|
||||
} else if (isCmRailscasts) {
|
||||
cm.classList.add('cm-s-railscasts')
|
||||
} else {
|
||||
cm.classList.add('cm-s-default')
|
||||
cm.classList.remove('cm-s-railscasts')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,410 +1,28 @@
|
||||
// we can load custom theme from userData folder, we also can write this theme in userData folder.
|
||||
import imageDark from '../../muya/lib/assets/icons/image_dark.png'
|
||||
import imageDarkFail from '../../muya/lib/assets/icons/image_dark_fail.png'
|
||||
import darkTheme from '../assets/themes/dark.theme.css'
|
||||
import graphiteTheme from '../assets/themes/graphite.theme.css'
|
||||
import materialDarkTheme from '../assets/themes/material-dark.theme.css'
|
||||
import oneDarkTheme from '../assets/themes/one-dark.theme.css'
|
||||
import ulyssesTheme from '../assets/themes/ulysses.theme.css'
|
||||
|
||||
export const dark = `
|
||||
:root {
|
||||
/*editor*/
|
||||
--themeColor: #f48237;
|
||||
--highlightColor: rgba(244, 130, 55, .4);
|
||||
--selectionColor: rgba(255, 255, 255, .2);
|
||||
--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: #34393f;
|
||||
--deleteColor: #ff6969;
|
||||
--iconColor: rgba(255, 255, 255, .8);
|
||||
--codeBgColor: #d8d8d869;
|
||||
--codeBlockBgColor: rgba(244, 130, 55, .04);
|
||||
/*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);
|
||||
--floatShadow: rgba(0, 0, 0, 0.1);
|
||||
--editorAreaWidth: 700px;
|
||||
}
|
||||
div.title-bar .frameless-titlebar-button > div > svg {
|
||||
fill: #ffffff;
|
||||
}
|
||||
/**
|
||||
* okaidia theme for JavaScript, CSS and HTML
|
||||
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
|
||||
* @author ocodia
|
||||
*/
|
||||
import darkPrismTheme from '../assets/themes/prismjs/dark.theme.css'
|
||||
import oneDarkPrismTheme from '../assets/themes/prismjs/one-dark.theme.css'
|
||||
|
||||
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 blocks */
|
||||
pre.ag-paragraph {
|
||||
padding: 1em;
|
||||
margin: 1em 0;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
: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;
|
||||
}
|
||||
|
||||
.ag-image-marked-text::before {
|
||||
background: url(${imageDark});
|
||||
export const dark = () => {
|
||||
return darkTheme + '\n' + darkPrismTheme
|
||||
}
|
||||
|
||||
.ag-image-marked-text.ag-image-fail::before {
|
||||
background-image: url(${imageDarkFail});
|
||||
export const graphite = () => {
|
||||
return graphiteTheme
|
||||
}
|
||||
|
||||
.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;
|
||||
export const materialDark = () => {
|
||||
return materialDarkTheme + '\n' + darkPrismTheme
|
||||
}
|
||||
|
||||
.token.deleted {
|
||||
color: #b31d28;
|
||||
background: #ffeef0;
|
||||
export const oneDark = () => {
|
||||
return oneDarkTheme + '\n' + oneDarkPrismTheme
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
`
|
||||
|
||||
|
||||
export const ulysses = `
|
||||
: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);
|
||||
--floatShadow: rgba(0, 0, 0, 0.1);
|
||||
--editorAreaWidth: 700px;
|
||||
export const ulysses = () => {
|
||||
return ulyssesTheme
|
||||
}
|
||||
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%);
|
||||
}
|
||||
`
|
||||
|
||||
export const graphite = `
|
||||
: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);
|
||||
--floatShadow: rgba(0, 0, 0, 0.1);
|
||||
--editorAreaWidth: 700px;
|
||||
}
|
||||
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%);
|
||||
}
|
||||
`
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
Edit and save to update preferences. You can only change the JSON below!
|
||||
|
||||
- **theme**: *String* `dark` or `light`
|
||||
- **theme**: *String* `dark`, `graphite`, `material-dark`, `one-dark`, `light` or `ulysses`
|
||||
|
||||
- **autoSave**: *Boolean* `true` or `false`
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user