支持编辑区自定义主题/添加编辑区主题
This commit is contained in:
parent
ee9bd1ab5a
commit
545f8da3cb
@ -7,11 +7,12 @@ import Prism from 'prismjs';
|
|||||||
import cledit from '../services/editor/cledit';
|
import cledit from '../services/editor/cledit';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: ['value', 'lang', 'disabled'],
|
props: ['value', 'lang', 'disabled', 'scrollClass'],
|
||||||
mounted() {
|
mounted() {
|
||||||
const preElt = this.$el;
|
const preElt = this.$el;
|
||||||
let scrollElt = preElt;
|
let scrollElt = preElt;
|
||||||
while (scrollElt && !scrollElt.classList.contains('modal')) {
|
const scrollCls = this.scrollClass || 'modal';
|
||||||
|
while (scrollElt && !scrollElt.classList.contains(scrollCls)) {
|
||||||
scrollElt = scrollElt.parentNode;
|
scrollElt = scrollElt.parentNode;
|
||||||
}
|
}
|
||||||
if (scrollElt) {
|
if (scrollElt) {
|
||||||
|
@ -63,6 +63,15 @@ export default {
|
|||||||
}, {
|
}, {
|
||||||
name: '日光白',
|
name: '日光白',
|
||||||
value: 'solarized_light',
|
value: 'solarized_light',
|
||||||
|
}, {
|
||||||
|
name: '咖啡黑',
|
||||||
|
value: 'espresso_libre',
|
||||||
|
}, {
|
||||||
|
name: '薰衣草黑',
|
||||||
|
value: 'lavender',
|
||||||
|
}, {
|
||||||
|
name: '耀斑黑',
|
||||||
|
value: 'solarflare',
|
||||||
}, {
|
}, {
|
||||||
name: 'Clouds白',
|
name: 'Clouds白',
|
||||||
value: 'clouds',
|
value: 'clouds',
|
||||||
@ -72,11 +81,15 @@ export default {
|
|||||||
}, {
|
}, {
|
||||||
name: 'GitHub白',
|
name: 'GitHub白',
|
||||||
value: 'github',
|
value: 'github',
|
||||||
|
}, {
|
||||||
|
name: '自定义',
|
||||||
|
value: 'custom',
|
||||||
}],
|
}],
|
||||||
}),
|
}),
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters('theme', [
|
...mapGetters('theme', [
|
||||||
'currEditTheme',
|
'currEditTheme',
|
||||||
|
'customEditThemeStyle',
|
||||||
]),
|
]),
|
||||||
selectedTheme() {
|
selectedTheme() {
|
||||||
return {
|
return {
|
||||||
@ -103,7 +116,12 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
async changeTheme(item) {
|
async changeTheme(item) {
|
||||||
store.dispatch('theme/setEditTheme', item.value);
|
await store.dispatch('theme/setEditTheme', item.value);
|
||||||
|
// 如果自定义主题没内容 则弹出编辑区域
|
||||||
|
if (item.value === 'custom' && !this.customEditThemeStyle) {
|
||||||
|
this.toggleSideBar(true);
|
||||||
|
store.dispatch('data/setSideBarPanel', 'editTheme');
|
||||||
|
}
|
||||||
},
|
},
|
||||||
showHelp() {
|
showHelp() {
|
||||||
this.toggleSideBar(true);
|
this.toggleSideBar(true);
|
||||||
|
@ -23,6 +23,7 @@
|
|||||||
<div v-else-if="panel === 'help'" class="side-bar__panel side-bar__panel--help">
|
<div v-else-if="panel === 'help'" class="side-bar__panel side-bar__panel--help">
|
||||||
<pre class="markdown-highlighting" v-html="markdownSample"></pre>
|
<pre class="markdown-highlighting" v-html="markdownSample"></pre>
|
||||||
</div>
|
</div>
|
||||||
|
<edit-theme-menu v-else-if="panel === 'editTheme'"></edit-theme-menu>
|
||||||
<div class="side-bar__panel side-bar__panel--toc" :class="{'side-bar__panel--hidden': panel !== 'toc'}">
|
<div class="side-bar__panel side-bar__panel--toc" :class="{'side-bar__panel--hidden': panel !== 'toc'}">
|
||||||
<toc>
|
<toc>
|
||||||
</toc>
|
</toc>
|
||||||
@ -41,6 +42,7 @@ import PublishMenu from './menus/PublishMenu';
|
|||||||
import HistoryMenu from './menus/HistoryMenu';
|
import HistoryMenu from './menus/HistoryMenu';
|
||||||
import ImportExportMenu from './menus/ImportExportMenu';
|
import ImportExportMenu from './menus/ImportExportMenu';
|
||||||
import WorkspaceBackupMenu from './menus/WorkspaceBackupMenu';
|
import WorkspaceBackupMenu from './menus/WorkspaceBackupMenu';
|
||||||
|
import EditThemeMenu from './menus/EditThemeMenu';
|
||||||
import markdownSample from '../data/markdownSample.md';
|
import markdownSample from '../data/markdownSample.md';
|
||||||
import markdownConversionSvc from '../services/markdownConversionSvc';
|
import markdownConversionSvc from '../services/markdownConversionSvc';
|
||||||
import store from '../store';
|
import store from '../store';
|
||||||
@ -55,6 +57,7 @@ const panelNames = {
|
|||||||
history: '文件历史',
|
history: '文件历史',
|
||||||
importExport: '导入/导出',
|
importExport: '导入/导出',
|
||||||
workspaceBackups: '文档空间备份',
|
workspaceBackups: '文档空间备份',
|
||||||
|
editTheme: '编辑区主题',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -67,6 +70,7 @@ export default {
|
|||||||
HistoryMenu,
|
HistoryMenu,
|
||||||
ImportExportMenu,
|
ImportExportMenu,
|
||||||
WorkspaceBackupMenu,
|
WorkspaceBackupMenu,
|
||||||
|
EditThemeMenu,
|
||||||
},
|
},
|
||||||
data: () => ({
|
data: () => ({
|
||||||
markdownSample: markdownConversionSvc.highlight(markdownSample),
|
markdownSample: markdownConversionSvc.highlight(markdownSample),
|
||||||
|
@ -81,6 +81,8 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
float: left;
|
float: left;
|
||||||
min-width: 160px;
|
min-width: 160px;
|
||||||
|
max-height: 450px;
|
||||||
|
overflow-y: scroll;
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
margin: 2px 0 0;
|
margin: 2px 0 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
@ -95,6 +97,7 @@
|
|||||||
li {
|
li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: list-item;
|
display: list-item;
|
||||||
|
margin: 0;
|
||||||
text-align: -webkit-match-parent;
|
text-align: -webkit-match-parent;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
116
src/components/menus/EditThemeMenu.vue
Normal file
116
src/components/menus/EditThemeMenu.vue
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
<template>
|
||||||
|
<div class="edit-theme side-bar__panel side-bar__panel--menu">
|
||||||
|
<div class="side-bar__info">
|
||||||
|
<div class="menu-entry menu-entry--info flex flex--row flex--align-center">
|
||||||
|
<span v-if="currEditTheme==='custom'">
|
||||||
|
下面的自定义主题样式可编辑,可参考其他主题样式填入自己喜欢的编辑样式。<br>
|
||||||
|
主题class为:edit-theme-custom
|
||||||
|
</span>
|
||||||
|
<span v-else>
|
||||||
|
下面的主题样式不可编辑。
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="side-bar__content">
|
||||||
|
<template v-if="currEditTheme === 'default'">
|
||||||
|
默认主题无额外样式,请选择其他主题。
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<code-editor v-for="(value, index) in styleEles" :key="index"
|
||||||
|
v-if="value.id === `edit-theme-${currEditTheme}`" lang="css" :value="value.innerHTML"
|
||||||
|
:disabled="value.id!=='edit-theme-custom'" @changed="changeText" scrollClass="side-bar__inner"></code-editor>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex--row flex--end" v-if="currEditTheme==='custom'">
|
||||||
|
<button class="edit-theme__button button" @click="saveStyleText">保存</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapGetters } from 'vuex';
|
||||||
|
import MenuEntry from './common/MenuEntry';
|
||||||
|
import CodeEditor from '../CodeEditor';
|
||||||
|
import store from '../../store';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
MenuEntry,
|
||||||
|
CodeEditor,
|
||||||
|
},
|
||||||
|
data: () => ({
|
||||||
|
themeStyleText: '',
|
||||||
|
styleEles: [],
|
||||||
|
}),
|
||||||
|
computed: {
|
||||||
|
...mapGetters('theme', [
|
||||||
|
'currEditTheme',
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
saveStyleText() {
|
||||||
|
const typeEle = this.findByTheme(this.currEditTheme);
|
||||||
|
if (!typeEle || !this.themeStyleText) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
typeEle.innerHTML = this.themeStyleText;
|
||||||
|
store.dispatch('theme/setCustomEditThemeStyle', this.themeStyleText);
|
||||||
|
store.dispatch('notification/info', '保存自定义主题样式成功!');
|
||||||
|
},
|
||||||
|
findByTheme(theme) {
|
||||||
|
const findEles = this.styleEles.filter(it => it.id === `edit-theme-${theme}`);
|
||||||
|
return findEles.length ? findEles[0] : null;
|
||||||
|
},
|
||||||
|
changeText(text) {
|
||||||
|
this.themeStyleText = text;
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
store.dispatch('data/setSideBarPanel', 'menu');
|
||||||
|
},
|
||||||
|
initStyle(theme) {
|
||||||
|
if (theme === 'default') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const value = theme || this.currEditTheme;
|
||||||
|
if (this.findByTheme(value)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const styleId = `edit-theme-${value}`;
|
||||||
|
const styleEle = document.getElementById(styleId);
|
||||||
|
if (!styleEle) {
|
||||||
|
setTimeout(() => this.initStyle(value), 1000);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.styleEles.push(styleEle);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
currEditTheme: {
|
||||||
|
immediate: true,
|
||||||
|
handler(val) {
|
||||||
|
this.initStyle(val);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.initStyle();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.side-bar__panel--menu {
|
||||||
|
.side-bar__content {
|
||||||
|
.code-editor {
|
||||||
|
min-height: 400px !important;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-theme__button {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -105,6 +105,11 @@
|
|||||||
<div><div class="menu-entry__label menu-entry__label--count">{{templateCount}}</div> 模板</div>
|
<div><div class="menu-entry__label menu-entry__label--count">{{templateCount}}</div> 模板</div>
|
||||||
<span>为您的导出配置 Handlebars 模板。</span>
|
<span>为您的导出配置 Handlebars 模板。</span>
|
||||||
</menu-entry>
|
</menu-entry>
|
||||||
|
<menu-entry @click.native="setPanel('editTheme')">
|
||||||
|
<icon-select-theme slot="icon"></icon-select-theme>
|
||||||
|
编辑区主题
|
||||||
|
<span>编辑区主题样式(自定义主题可编辑)。</span>
|
||||||
|
</menu-entry>
|
||||||
<menu-entry @click.native="settings">
|
<menu-entry @click.native="settings">
|
||||||
<icon-settings slot="icon"></icon-settings>
|
<icon-settings slot="icon"></icon-settings>
|
||||||
<div>配置</div>
|
<div>配置</div>
|
||||||
|
@ -1,35 +1,49 @@
|
|||||||
const localKey = 'theme/currEditTheme';
|
const localKey = 'theme/currEditTheme';
|
||||||
|
const customEditThemeKey = 'theme/customEditThemeStyle';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
namespaced: true,
|
namespaced: true,
|
||||||
state: {
|
state: {
|
||||||
// 当前编辑主题
|
// 当前编辑主题
|
||||||
currEditTheme: null,
|
currEditTheme: '',
|
||||||
initEditTheme: false,
|
customEditThemeStyle: null,
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
setEditTheme: (state, value) => {
|
setEditTheme: (state, value) => {
|
||||||
state.currEditTheme = value;
|
state.currEditTheme = value;
|
||||||
},
|
},
|
||||||
setInitEditTheme: (state, value) => {
|
setCustomEditThemeStyle: (state, value) => {
|
||||||
state.initEditTheme = value;
|
state.customEditThemeStyle = value;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
getters: {
|
getters: {
|
||||||
currEditTheme: state => state.currEditTheme,
|
currEditTheme: state => state.currEditTheme,
|
||||||
initEditTheme: state => state.initEditTheme,
|
customEditThemeStyle: state => state.customEditThemeStyle,
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
async setEditTheme({ commit }, theme) {
|
async setEditTheme({ commit }, theme) {
|
||||||
commit('setEditTheme', theme);
|
|
||||||
commit('setInitEditTheme', true);
|
|
||||||
localStorage.setItem(localKey, theme);
|
|
||||||
// 如果不是default 则加载样式
|
// 如果不是default 则加载样式
|
||||||
if (!theme || theme === 'default') {
|
if (!theme || theme === 'default') {
|
||||||
|
commit('setEditTheme', theme);
|
||||||
|
localStorage.setItem(localKey, theme);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const themeStyle = document.getElementById(`edit-theme-${theme}`);
|
const themeStyle = document.getElementById(`edit-theme-${theme}`);
|
||||||
if (themeStyle) {
|
if (themeStyle) {
|
||||||
|
commit('setEditTheme', theme);
|
||||||
|
localStorage.setItem(localKey, theme);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 如果是自定义则直接追加
|
||||||
|
if (theme === 'custom') {
|
||||||
|
const styleEle = document.createElement('style');
|
||||||
|
styleEle.id = `edit-theme-${theme}`;
|
||||||
|
styleEle.type = 'text/css';
|
||||||
|
styleEle.innerHTML = localStorage.getItem(customEditThemeKey) || '';
|
||||||
|
commit('setCustomEditThemeStyle', styleEle.innerHTML);
|
||||||
|
document.head.appendChild(styleEle);
|
||||||
|
commit('setEditTheme', theme);
|
||||||
|
localStorage.setItem(localKey, theme);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const script = document.createElement('script');
|
const script = document.createElement('script');
|
||||||
@ -42,6 +56,8 @@ export default {
|
|||||||
try {
|
try {
|
||||||
document.head.appendChild(script);
|
document.head.appendChild(script);
|
||||||
timeout = setTimeout(reject, 30);
|
timeout = setTimeout(reject, 30);
|
||||||
|
commit('setEditTheme', theme);
|
||||||
|
localStorage.setItem(localKey, theme);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
reject(e);
|
reject(e);
|
||||||
}
|
}
|
||||||
@ -51,5 +67,9 @@ export default {
|
|||||||
document.head.removeChild(script);
|
document.head.removeChild(script);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
setCustomEditThemeStyle({ commit }, value) {
|
||||||
|
commit('setCustomEditThemeStyle', value);
|
||||||
|
localStorage.setItem(customEditThemeKey, value);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
72
static/themes/edit-theme-espresso_libre.js
Normal file
72
static/themes/edit-theme-espresso_libre.js
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
function init_edit_theme_espresso_libre() {
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.id = 'edit-theme-espresso_libre';
|
||||||
|
style.type = 'text/css';
|
||||||
|
style.innerHTML = "/* 默认字体颜色、光标颜色、背景颜色*/\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner {\n\
|
||||||
|
color: #BDAE9D;\n\
|
||||||
|
caret-color: #BDAE9D;\n\
|
||||||
|
}\n\
|
||||||
|
.edit-theme--espresso_libre .editor {\n\
|
||||||
|
background-color: #2A211C;\n\
|
||||||
|
}\n\
|
||||||
|
/* 标题颜色 */\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .cn-head,\n\
|
||||||
|
.edit-theme--espresso_libre .editor-in-page-buttons .icon {\n\
|
||||||
|
color: #44AA43;\n\
|
||||||
|
}\n\
|
||||||
|
/* 加粗颜色 */\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .cn-strong {\n\
|
||||||
|
color: #43A8ED;\n\
|
||||||
|
}\n\
|
||||||
|
/* 信息块颜色 */\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .blockquote {\n\
|
||||||
|
color: #52708b;\n\
|
||||||
|
}\n\
|
||||||
|
/* 源信息、md标记符号等非关键信息的颜色 */\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .cl,\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .hr,\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .link,\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .linkref, \n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .linkdef .url {\n\
|
||||||
|
color: rgba(139,158,177,0.8);\n\
|
||||||
|
}\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .cn-toc, \n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .code,\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .img,\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .img-wrapper,\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .imgref,\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .cl-toc {\n\
|
||||||
|
color: rgba(139,158,177,0.8);\n\
|
||||||
|
background-color: rgba(0,0,0,0.33);\n\
|
||||||
|
}\n\
|
||||||
|
/* 代码块颜色 */\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .cn-code {\n\
|
||||||
|
color: #7290D9;\n\
|
||||||
|
}\n\
|
||||||
|
/* 链接颜色 */\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .img .cl-underlined-text,\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .imgref .cl-underlined-text,\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .link .cl-underlined-text,\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .linkref .cl-underlined-text {\n\
|
||||||
|
color: #049B0A;\n\
|
||||||
|
}\n\
|
||||||
|
/* 图片原始链接背景颜色 */\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .img-wrapper .img {\n\
|
||||||
|
background-color: transparent;\n\
|
||||||
|
}\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .keyword {\n\
|
||||||
|
color: #47596b;\n\
|
||||||
|
}\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .email,\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .cl-title,\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .tag,\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .latex,\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .math,\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .entity,\n\
|
||||||
|
.edit-theme--espresso_libre .editor__inner .pre [class*='language-'] {\n\
|
||||||
|
color: #BDAE9D;\n\
|
||||||
|
}";
|
||||||
|
document.head.appendChild(style);
|
||||||
|
}
|
||||||
|
init_edit_theme_espresso_libre();
|
72
static/themes/edit-theme-lavender.js
Normal file
72
static/themes/edit-theme-lavender.js
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
function init_edit_theme_lavender() {
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.id = 'edit-theme-lavender';
|
||||||
|
style.type = 'text/css';
|
||||||
|
style.innerHTML = "/* 默认字体颜色、光标颜色、背景颜色*/\n\
|
||||||
|
.edit-theme--lavender .editor__inner {\n\
|
||||||
|
color: #E0CEED;\n\
|
||||||
|
caret-color: #E0CEED;\n\
|
||||||
|
}\n\
|
||||||
|
.edit-theme--lavender .editor {\n\
|
||||||
|
background-color: #29222E;\n\
|
||||||
|
}\n\
|
||||||
|
/* 标题颜色 */\n\
|
||||||
|
.edit-theme--lavender .editor__inner .cn-head,\n\
|
||||||
|
.edit-theme--lavender .editor-in-page-buttons .icon {\n\
|
||||||
|
color: #F25AE6;\n\
|
||||||
|
}\n\
|
||||||
|
/* 加粗颜色 */\n\
|
||||||
|
.edit-theme--lavender .editor__inner .cn-strong {\n\
|
||||||
|
color: #8E6DA6;\n\
|
||||||
|
}\n\
|
||||||
|
/* 信息块颜色 */\n\
|
||||||
|
.edit-theme--lavender .editor__inner .blockquote {\n\
|
||||||
|
color: #B657FF;\n\
|
||||||
|
}\n\
|
||||||
|
/* 源信息、md标记符号等非关键信息的颜色 */\n\
|
||||||
|
.edit-theme--lavender .editor__inner .cl,\n\
|
||||||
|
.edit-theme--lavender .editor__inner .hr,\n\
|
||||||
|
.edit-theme--lavender .editor__inner .link,\n\
|
||||||
|
.edit-theme--lavender .editor__inner .linkref, \n\
|
||||||
|
.edit-theme--lavender .editor__inner .linkdef .url {\n\
|
||||||
|
color: rgba(139,158,177,0.8);\n\
|
||||||
|
}\n\
|
||||||
|
.edit-theme--lavender .editor__inner .cn-toc, \n\
|
||||||
|
.edit-theme--lavender .editor__inner .code,\n\
|
||||||
|
.edit-theme--lavender .editor__inner .img,\n\
|
||||||
|
.edit-theme--lavender .editor__inner .img-wrapper,\n\
|
||||||
|
.edit-theme--lavender .editor__inner .imgref,\n\
|
||||||
|
.edit-theme--lavender .editor__inner .cl-toc {\n\
|
||||||
|
color: rgba(139,158,177,0.8);\n\
|
||||||
|
background-color: rgba(0,0,0,0.33);\n\
|
||||||
|
}\n\
|
||||||
|
/* 代码块颜色 */\n\
|
||||||
|
.edit-theme--lavender .editor__inner .cn-code {\n\
|
||||||
|
color: #8E69C9;\n\
|
||||||
|
}\n\
|
||||||
|
/* 链接颜色 */\n\
|
||||||
|
.edit-theme--lavender .editor__inner .img .cl-underlined-text,\n\
|
||||||
|
.edit-theme--lavender .editor__inner .imgref .cl-underlined-text,\n\
|
||||||
|
.edit-theme--lavender .editor__inner .link .cl-underlined-text,\n\
|
||||||
|
.edit-theme--lavender .editor__inner .linkref .cl-underlined-text {\n\
|
||||||
|
color: #F5B0EF;\n\
|
||||||
|
}\n\
|
||||||
|
/* 图片原始链接背景颜色 */\n\
|
||||||
|
.edit-theme--lavender .editor__inner .img-wrapper .img {\n\
|
||||||
|
background-color: transparent;\n\
|
||||||
|
}\n\
|
||||||
|
.edit-theme--lavender .editor__inner .keyword {\n\
|
||||||
|
color: #47596b;\n\
|
||||||
|
}\n\
|
||||||
|
.edit-theme--lavender .editor__inner .email,\n\
|
||||||
|
.edit-theme--lavender .editor__inner .cl-title,\n\
|
||||||
|
.edit-theme--lavender .editor__inner .tag,\n\
|
||||||
|
.edit-theme--lavender .editor__inner .latex,\n\
|
||||||
|
.edit-theme--lavender .editor__inner .math,\n\
|
||||||
|
.edit-theme--lavender .editor__inner .entity,\n\
|
||||||
|
.edit-theme--lavender .editor__inner .pre [class*='language-'] {\n\
|
||||||
|
color: #E0CEED;\n\
|
||||||
|
}";
|
||||||
|
document.head.appendChild(style);
|
||||||
|
}
|
||||||
|
init_edit_theme_lavender();
|
72
static/themes/edit-theme-solarflare.js
Normal file
72
static/themes/edit-theme-solarflare.js
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
function init_edit_theme_solarflare() {
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.id = 'edit-theme-solarflare';
|
||||||
|
style.type = 'text/css';
|
||||||
|
style.innerHTML = "/* 默认字体颜色、光标颜色、背景颜色*/\n\
|
||||||
|
.edit-theme--solarflare .editor__inner {\n\
|
||||||
|
color: #e3e2e0;\n\
|
||||||
|
caret-color: #e3e2e0;\n\
|
||||||
|
}\n\
|
||||||
|
.edit-theme--solarflare .editor {\n\
|
||||||
|
background-color: #292D30;\n\
|
||||||
|
}\n\
|
||||||
|
/* 标题颜色 */\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .cn-head,\n\
|
||||||
|
.edit-theme--solarflare .editor-in-page-buttons .icon {\n\
|
||||||
|
color: #FF4E50;\n\
|
||||||
|
}\n\
|
||||||
|
/* 加粗颜色 */\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .cn-strong {\n\
|
||||||
|
color: #FF4E50;\n\
|
||||||
|
}\n\
|
||||||
|
/* 信息块颜色 */\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .blockquote {\n\
|
||||||
|
color: #FF4E50;\n\
|
||||||
|
}\n\
|
||||||
|
/* 源信息、md标记符号等非关键信息的颜色 */\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .cl,\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .hr,\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .link,\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .linkref, \n\
|
||||||
|
.edit-theme--solarflare .editor__inner .linkdef .url {\n\
|
||||||
|
color: rgba(139,158,177,0.8);\n\
|
||||||
|
}\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .cn-toc, \n\
|
||||||
|
.edit-theme--solarflare .editor__inner .code,\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .img,\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .img-wrapper,\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .imgref,\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .cl-toc {\n\
|
||||||
|
color: rgba(139,158,177,0.8);\n\
|
||||||
|
background-color: rgba(0,0,0,0.33);\n\
|
||||||
|
}\n\
|
||||||
|
/* 代码块颜色 */\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .cn-code {\n\
|
||||||
|
color: #FC913A;\n\
|
||||||
|
}\n\
|
||||||
|
/* 链接颜色 */\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .img .cl-underlined-text,\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .imgref .cl-underlined-text,\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .link .cl-underlined-text,\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .linkref .cl-underlined-text {\n\
|
||||||
|
color: #EDE574;\n\
|
||||||
|
}\n\
|
||||||
|
/* 图片原始链接背景颜色 */\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .img-wrapper .img {\n\
|
||||||
|
background-color: transparent;\n\
|
||||||
|
}\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .keyword {\n\
|
||||||
|
color: #47596b;\n\
|
||||||
|
}\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .email,\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .cl-title,\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .tag,\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .latex,\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .math,\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .entity,\n\
|
||||||
|
.edit-theme--solarflare .editor__inner .pre [class*='language-'] {\n\
|
||||||
|
color: #e3e2e0;\n\
|
||||||
|
}";
|
||||||
|
document.head.appendChild(style);
|
||||||
|
}
|
||||||
|
init_edit_theme_solarflare();
|
Loading…
Reference in New Issue
Block a user