diff --git a/src/data/defaults/defaultSettings.yml b/src/data/defaults/defaultSettings.yml
index 6c8e4500..0ee6cc0d 100644
--- a/src/data/defaults/defaultSettings.yml
+++ b/src/data/defaults/defaultSettings.yml
@@ -88,7 +88,7 @@ newFileContent: |
- > Written with [StackEdit](https://stackedit.cn/).
+ > Written with [StackEdit中文版](https://stackedit.cn/).
# Default properties for new files
newFileProperties: |
diff --git a/src/data/faq.md b/src/data/faq.md
index 1b855495..65a4d6b0 100644
--- a/src/data/faq.md
+++ b/src/data/faq.md
@@ -4,6 +4,6 @@
我们建议同步您的文档空间，以确保在清除浏览器数据的情况下不会丢失文件。自托管Gitea后端非常适合保证隐私。
-**StackEdit可以访问我的数据而不告诉我吗？**
+**StackEdit中文版可以访问我的数据而不告诉我吗？**
-StackEdit是一个基于浏览器的应用程序。Gitee，Github，Dropbox ...发出的访问令牌存储在您的浏览器中，不会发送到任何形式的后端或第三方，因此任何人都不会访问您的数据。
+StackEdit中文版是一个基于浏览器的应用程序。Gitee，Github，Dropbox ...发出的访问令牌存储在您的浏览器中，不会发送到任何形式的后端或第三方，因此任何人都不会访问您的数据。
diff --git a/src/data/features.js b/src/data/features.js
index 95d7028c..c9d91fb0 100644
--- a/src/data/features.js
+++ b/src/data/features.js
@@ -553,6 +553,11 @@ export default [
'更新设置',
'使用“设置”对话框调整应用程序行为。',
),
+ new Feature(
+ 'switchTheme',
+ '切换主题',
+ '使用“主题切换”按钮切换主题。',
+ ),
new Feature(
'changeShortcuts',
'编辑快捷键',
diff --git a/src/data/simpleModals.js b/src/data/simpleModals.js
index b10ccc61..5b90223e 100644
--- a/src/data/simpleModals.js
+++ b/src/data/simpleModals.js
@@ -95,7 +95,7 @@ export default {
'好的',
),
workspaceGoogleRedirection: simpleModal(
- '
StackEdit需要完整的Google Drive访问才能打开此文档空间。
',
+ '
StackEdit中文版需要完整的Google Drive访问才能打开此文档空间。
',
'取消',
'确认授权',
),
diff --git a/src/icons/SwitchTheme.vue b/src/icons/SwitchTheme.vue
new file mode 100644
index 00000000..9d1c6b9f
--- /dev/null
+++ b/src/icons/SwitchTheme.vue
@@ -0,0 +1,3 @@
+
+
+
diff --git a/src/icons/index.js b/src/icons/index.js
index 7f151b42..f54f34e7 100644
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -55,6 +55,7 @@ import ContentCopy from './ContentCopy';
import Key from './Key';
import DotsHorizontal from './DotsHorizontal';
import Seal from './Seal';
+import SwitchTheme from './SwitchTheme';
Vue.component('iconProvider', Provider);
Vue.component('iconFormatBold', FormatBold);
@@ -112,3 +113,4 @@ Vue.component('iconContentCopy', ContentCopy);
Vue.component('iconKey', Key);
Vue.component('iconDotsHorizontal', DotsHorizontal);
Vue.component('iconSeal', Seal);
+Vue.component('iconSwitchTheme', SwitchTheme);
diff --git a/src/store/data.js b/src/store/data.js
index 8f6a24db..3a32369d 100644
--- a/src/store/data.js
+++ b/src/store/data.js
@@ -236,6 +236,21 @@ export default {
actions: {
setServerConf: setter('serverConf'),
setSettings: setter('settings'),
+ switchThemeSetting: ({ commit, getters }) => {
+ const customSettingStr = getters.settings;
+ let { colorTheme } = getters.computedSettings;
+ if (!colorTheme || colorTheme === 'light') {
+ colorTheme = 'dark';
+ } else {
+ colorTheme = 'light';
+ }
+ const themeStr = `colorTheme: ${colorTheme}`;
+ let settingsStr = (customSettingStr && customSettingStr.trim()) || '# 增加您的自定义配置覆盖默认配置';
+ settingsStr = settingsStr.indexOf('colorTheme:') > -1 ?
+ settingsStr.replace(/colorTheme:.*/, themeStr) : `${settingsStr}\n${themeStr}`;
+ commit('setItem', itemTemplate('settings', settingsStr));
+ badgeSvc.addBadge('switchTheme');
+ },
patchLocalSettings: patcher('localSettings'),
patchLayoutSettings: patcher('layoutSettings'),
toggleNavigationBar: layoutSettingsToggler('showNavigationBar', 'toggleNavigationBar'),
diff --git a/src/styles/app.scss b/src/styles/app.scss
index d6774ad6..5148dc32 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -91,6 +91,10 @@ textarea {
background-image: none;
border: 0;
border-radius: $border-radius-base;
+
+ .app--dark & {
+ background-color: rgba(0, 0, 0, 0.2);
+ }
}
.button {
@@ -129,6 +133,20 @@ textarea {
text-decoration: none;
}
+ .app--dark & {
+ color: rgba(255, 255, 255, 0.75);
+
+ &:active,
+ &:focus,
+ &:hover,
+ .hidden-file:focus + & {
+ color: rgba(255, 255, 255, 0.75);
+ background-color: rgba(255, 255, 255, 0.05);
+ outline: 0;
+ text-decoration: none;
+ }
+ }
+
.app--dark .layout__panel--editor &,
.app--dark .layout__panel--preview & {
color: #ccc;
@@ -166,6 +184,18 @@ textarea {
color: #fff;
background-color: darken(#349be8, 8%);
}
+
+ .app--dark & {
+ background-color: #567c98;
+ color: rgb(222, 222, 222);
+
+ &:active,
+ &:focus,
+ &:hover {
+ color: #fff;
+ background-color: darken(#567c98, 8%);
+ }
+ }
}
.textfield {
@@ -190,6 +220,16 @@ textarea {
background-color: #f0f0f0;
color: #999;
}
+
+ .app--dark & {
+ background-color: rgba(0, 0, 0, 0.2);
+
+ &[disabled] {
+ cursor: not-allowed;
+ background-color: #373737;
+ color: #999;
+ }
+ }
}
.flex {
diff --git a/src/styles/base.scss b/src/styles/base.scss
index 18e55a2f..a6c55d5a 100644
--- a/src/styles/base.scss
+++ b/src/styles/base.scss
@@ -12,6 +12,10 @@ body {
line-height: $line-height-base;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+
+ .app--dark {
+ color: $body-color-dark;
+ }
}
.app--dark .layout__panel--editor,
@@ -98,6 +102,10 @@ code {
background-color: $code-bg;
border-radius: $border-radius-base;
padding: 2px 4px;
+
+ .app--dark & {
+ background-color: $code-dark-bg;
+ }
}
hr {
@@ -113,6 +121,10 @@ pre > code {
-webkit-text-size-adjust: none;
overflow-x: auto;
white-space: pre;
+
+ .app--dark & {
+ background-color: $code-dark-bg;
+ }
}
.toc ul {
diff --git a/src/styles/markdownHighlighting.scss b/src/styles/markdownHighlighting.scss
index c2fdf228..fe5f22bf 100644
--- a/src/styles/markdownHighlighting.scss
+++ b/src/styles/markdownHighlighting.scss
@@ -134,6 +134,10 @@
background-color: $code-bg;
border-radius: $code-border-radius;
padding: 0.15em 0;
+
+ .app--dark & {
+ background-color: $code-dark-bg;
+ }
}
.img-wrapper {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 4ed3cf71..41cc5eb3 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -3,6 +3,7 @@ $font-family-monospace: 'Roboto Mono', 'Lucida Sans Typewriter', 'Lucida Console
$body-color-light: rgba(0, 0, 0, 0.75);
$body-color-dark: rgba(255, 255, 255, 0.75);
$code-bg: rgba(0, 0, 0, 0.05);
+$code-dark-bg: rgba(0, 0, 0, 0.2);
$line-height-base: 1.67;
$line-height-title: 1.33;
$font-size-monospace: 0.85em;