dark主题样式调整

package-lock.json

@@ -594,7 +594,7 @@
     },
     "@braintree/sanitize-url": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-3.1.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@braintree/sanitize-url/-/sanitize-url-3.1.0.tgz",
       "integrity": "sha512-GcIY79elgB+azP74j8vqkiXz8xLFfIzbQJdlwOPisgbKT00tviJQuEghOXSMVxJ00HoYJbGswr4kcllUc4xCcg=="
     },
     "@mrmlnc/readdir-enhanced": {

src/components/ExplorerNode.vue

@@ -236,6 +236,10 @@ $item-font-size: 14px;
 .explorer-node--trash,
 .explorer-node--temp {
   color: rgba(0, 0, 0, 0.5);
+
+  .app--dark & {
+    color: rgba(255, 255, 255, 0.5);
+  }
 }
 
 .explorer-node--folder > .explorer-node__item,

src/components/Layout.vue

@@ -208,6 +208,10 @@ $preview-background-dark: #252525;
 .layout__panel--explorer,
 .layout__panel--side-bar {
   background-color: #ddd;
+
+  .app--dark & {
+    background-color: #383c4a;
+  }
 }
 
 .layout__panel--find-replace {

src/components/Modal.vue

@@ -273,6 +273,10 @@ export default {
   position: relative;
   overflow: hidden;
 
+  .app--dark & {
+    background-color: #383c4a;
+  }
+
   &::before {
     content: '';
     position: absolute;

src/components/NavigationBar.vue

@@ -7,6 +7,7 @@
     </div>
     <!-- Side bar -->
     <div class="navigation-bar__inner navigation-bar__inner--right navigation-bar__inner--button">
+      <button class="navigation-bar__button navigation-bar__button--theme button" v-title="'切换主题'" tour-step-anchor="theme" @click="switchTheme"><icon-switch-theme></icon-switch-theme></button>
       <a class="navigation-bar__button navigation-bar__button--stackedit button" v-if="light" href="app" target="_blank" v-title="'打开StackEdit'"><icon-provider provider-id="stackedit"></icon-provider></a>
       <button class="navigation-bar__button navigation-bar__button--stackedit button" v-else tour-step-anchor="menu" @click="toggleSideBar()" v-title="'切换侧边栏'"><icon-provider provider-id="stackedit"></icon-provider></button>
     </div>
@@ -187,6 +188,9 @@ export default {
         publishSvc.requestPublish();
       }
     },
+    switchTheme() {
+      store.dispatch('data/switchThemeSetting');
+    },
     pagedownClick(name) {
       if (store.getters['content/isCurrentEditable']) {
         const text = editorSvc.clEditor.getContent();
@@ -309,6 +313,18 @@ export default {
     padding: 0 4px;
     width: 38px;
 
+    &.navigation-bar__button--theme {
+      width: 34px;
+      padding: 0 7px;
+      opacity: 0.85;
+
+      &:active,
+      &:focus,
+      &:hover {
+        opacity: 1;
+      }
+    }
+
     &.navigation-bar__button--stackedit {
       opacity: 0.85;
 

src/components/Tour.vue

@@ -12,7 +12,7 @@
       </div>
       <div class="tour-step__inner" v-else-if="step === 'editor'">
         <h2>您的Markdown编辑器</h2>
-        <p>StackEdit实时将Markdown转换为HTML。</p>
+        <p>StackEdit中文版实时将Markdown转换为HTML。</p>
         <p>点击 <icon-side-preview></icon-side-preview> 切换侧边预览</p>
         <div class="tour-step__button-bar">
           <button class="button" @click="finish">跳过</button>
@@ -21,7 +21,7 @@
       </div>
       <div class="tour-step__inner" v-else-if="step === 'explorer'">
         <h2>文件资源管理器</h2>
-        <p>StackEdit可以管理文档空间中的多个文件和文件夹。</p>
+        <p>StackEdit中文版可以管理文档空间中的多个文件和文件夹。</p>
         <p>点击 <icon-folder></icon-folder> 打开文件资源管理器。</p>
         <div class="tour-step__button-bar">
           <button class="button" @click="finish">跳过</button>
@@ -29,17 +29,26 @@
         </div>
       </div>
       <div class="tour-step__inner" v-else-if="step === 'menu'">
-        <h2>更多！</h2>
+        <h2>切换侧边栏！</h2>
-        <p>StackEdit还可以同步和发布文件，管理协作文档空间...</p>
+        <p>StackEdit中文版还可以同步和发布文件，管理协作文档空间...</p>
         <p>点击 <icon-provider provider-id="stackedit"></icon-provider> 浏览菜单。</p>
         <div class="tour-step__button-bar">
           <button class="button" @click="finish">跳过</button>
           <button class="button button--resolve" @click="next">下一步</button>
         </div>
       </div>
+      <div class="tour-step__inner" v-else-if="step === 'theme'">
+        <h2>切换主题！</h2>
+        <p>StackEdit中文版可以切换黑白主题。</p>
+        <p>点击 <icon-switch-theme></icon-switch-theme> 切换主题。</p>
+        <div class="tour-step__button-bar">
+          <button class="button" @click="finish">跳过</button>
+          <button class="button button--resolve" @click="next">下一步</button>
+        </div>
+      </div>
       <div class="tour-step__inner" v-else-if="step === 'end'">
         <h2>Enjoy!</h2>
-        <p>如果您喜欢StackEdit中文版，请在<a href="https://gitee.com/mafgwo/stackedit">Gitee仓库</a>上点一下starred，谢谢！</p>
+        <p>如果您喜欢StackEdit中文版，请在<a href="https://gitee.com/mafgwo/stackedit">Gitee仓库</a>上点一下Star，谢谢！</p>
         <div class="tour-step__button-bar">
           <button class="button button--resolve" @click="finish">确认</button>
         </div>
@@ -57,6 +66,7 @@ const steps = [
   'editor',
   'explorer',
   'menu',
+  'theme',
   'end',
 ];
 
@@ -90,7 +100,8 @@ export default {
               break;
             }
             case 'editor':
-            case 'menu': {
+            case 'menu':
+            case 'theme': {
               style.left = `${anchorRect.left}px`;
               break;
             }
@@ -139,6 +150,7 @@ export default {
 }
 
 $tour-step-background: transparentize(mix(#f3f3f3, $selection-highlighting-color, 75%), 0.025);
+$tour-step-darkbackground: transparentize(mix(#4d4d4d, $selection-highlighting-color, 75%), 0.025);
 $tour-step-width: 240px;
 
 .tour-step__inner {
@@ -151,6 +163,10 @@ $tour-step-width: 240px;
   text-align: center;
   border-radius: $border-radius-base;
 
+  .app--dark & {
+    background-color: $tour-step-darkbackground;
+  }
+
   h2 {
     margin: 0;
 
@@ -183,11 +199,16 @@ $tour-step-width: 240px;
       right: 0;
       border-top: 10px solid $tour-step-background;
       border-left: 10px solid transparent;
+
+      .app--dark & {
+        border-top: 10px solid $tour-step-darkbackground;
+      }
     }
   }
 
   .tour-step--editor &,
-  .tour-step--menu & {
+  .tour-step--menu &,
+  .tour-step--theme & {
     right: 15px;
     border-top-right-radius: 0;
 
@@ -196,6 +217,10 @@ $tour-step-width: 240px;
       right: -10px;
       border-top: 10px solid $tour-step-background;
       border-right: 10px solid transparent;
+
+      .app--dark & {
+        border-top: 10px solid $tour-step-darkbackground;
+      }
     }
   }
 
@@ -208,6 +233,10 @@ $tour-step-width: 240px;
       left: -10px;
       border-top: 10px solid $tour-step-background;
       border-left: 10px solid transparent;
+
+      .app--dark & {
+        border-top: 10px solid $tour-step-darkbackground;
+      }
     }
   }
 }

src/components/menus/common/MenuEntry.vue

@@ -73,6 +73,10 @@
   background-color: #fff;
   border-radius: 3px;
   opacity: 0.6;
+
+  .app--dark & {
+    background-color: #000;
+  }
 }
 
 .menu-entry__label--warning {

src/components/modals/providers/DropboxAccountModal.vue

@@ -4,7 +4,7 @@
       <div class="modal__image">
         <icon-provider provider-id="dropbox"></icon-provider>
       </div>
-      <p>将您的<b>Dropbox</b>链接到<b>StackEdit</b>。</p>
+      <p>将您的<b>Dropbox</b>链接到<b>StackEdit中文版</b>。</p>
       <div class="form-entry">
         <div class="form-entry__checkbox">
           <label>

src/components/modals/providers/GiteaAccountModal.vue

@@ -4,7 +4,7 @@
       <div class="modal__image">
         <icon-provider provider-id="gitea"></icon-provider>
       </div>
-      <p>将您的<b>Gitea</b>链接到<b>StackEdit</b>。</p>
+      <p>将您的<b>Gitea</b>链接到<b>StackEdit中文版</b>。</p>
       <form-entry label="Gitea URL" error="serverUrl">
         <input v-if="config.forceServerUrl" slot="field" class="textfield" type="text" disabled="disabled" v-model="config.forceServerUrl">
         <input v-else slot="field" class="textfield" type="text" v-model.trim="serverUrl" @keydown.enter="resolve()">

src/components/modals/providers/GithubAccountModal.vue

@@ -4,7 +4,7 @@
       <div class="modal__image">
         <icon-provider provider-id="github"></icon-provider>
       </div>
-      <p>将您的<b>Github账号</b>链接到<b>StackEdit</b>。</p>
+      <p>将您的<b>Github账号</b>链接到<b>StackEdit中文版</b>。</p>
       <div class="form-entry">
         <div class="form-entry__checkbox">
           <label>

src/components/modals/providers/GitlabAccountModal.vue

@@ -4,7 +4,7 @@
       <div class="modal__image">
         <icon-provider provider-id="gitlab"></icon-provider>
       </div>
-      <p>将您的<b>GitLab</b>链接到<b>StackEdit</b>。</p>
+      <p>将您的<b>GitLab</b>链接到<b>StackEdit中文版</b>。</p>
       <form-entry label="GitLab URL" error="serverUrl">
         <input v-if="config.forceServerUrl" slot="field" class="textfield" type="text" disabled="disabled" v-model="config.forceServerUrl">
         <input v-else slot="field" class="textfield" type="text" v-model.trim="serverUrl" @keydown.enter="resolve()">

src/components/modals/providers/GoogleDriveAccountModal.vue

@@ -4,14 +4,14 @@
       <div class="modal__image">
         <icon-provider provider-id="googleDrive"></icon-provider>
       </div>
-      <p>将您的<b>Google Drive</b>链接到<b>StackEdit</b>。</p>
+      <p>将您的<b>Google Drive</b>链接到<b>StackEdit中文版</b>。</p>
       <div class="form-entry">
         <div class="form-entry__checkbox">
           <label>
             <input type="checkbox" v-model="restrictedAccess"> 限制访问
           </label>
           <div class="form-entry__info">
-            如果限制，则将访问仅限于您使用<b>StackEdit</b>创建的文件。
+            如果限制，则将访问仅限于您使用<b>StackEdit中文版</b>创建的文件。
           </div>
         </div>
       </div>

src/components/modals/providers/ZendeskAccountModal.vue

@@ -4,7 +4,7 @@
       <div class="modal__image">
         <icon-provider provider-id="zendesk"></icon-provider>
       </div>
-      <p>将您的<b>Zendesk</b>链接到<b>StackEdit</b>。</p>
+      <p>将您的<b>Zendesk</b>链接到<b>StackEdit中文版</b>。</p>
       <form-entry label="Site URL" error="siteUrl">
         <input slot="field" class="textfield" type="text" v-model.trim="siteUrl" @keydown.enter="resolve()">
         <div class="form-entry__info">

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: |

src/data/faq.md

@@ -4,6 +4,6 @@
 
 我们建议同步您的文档空间，以确保在清除浏览器数据的情况下不会丢失文件。自托管Gitea后端非常适合保证隐私。
 
-**StackEdit可以访问我的数据而不告诉我吗？**
+**StackEdit中文版可以访问我的数据而不告诉我吗？**
 
-StackEdit是一个基于浏览器的应用程序。Gitee，Github，Dropbox ...发出的访问令牌存储在您的浏览器中，不会发送到任何形式的后端或第三方，因此任何人都不会访问您的数据。
+StackEdit中文版是一个基于浏览器的应用程序。Gitee，Github，Dropbox ...发出的访问令牌存储在您的浏览器中，不会发送到任何形式的后端或第三方，因此任何人都不会访问您的数据。

src/data/features.js

@@ -553,6 +553,11 @@ export default [
         '更新设置',
         '使用“设置”对话框调整应用程序行为。',
       ),
+      new Feature(
+        'switchTheme',
+        '切换主题',
+        '使用“主题切换”按钮切换主题。',
+      ),
       new Feature(
         'changeShortcuts',
         '编辑快捷键',

src/data/simpleModals.js

@@ -95,7 +95,7 @@ export default {
     '好的',
   ),
   workspaceGoogleRedirection: simpleModal(
-    '<p>StackEdit需要完整的Google Drive访问才能打开此文档空间。</p>',
+    '<p>StackEdit中文版需要完整的Google Drive访问才能打开此文档空间。</p>',
     '取消',
     '确认授权',
   ),

src/icons/SwitchTheme.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg t="1659766631486" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2235" width="32" height="32"><path d="M512 938.666667c235.648 0 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667z m0-64v-725.333334a362.666667 362.666667 0 0 1 0 725.333334z" p-id="2236"></path></svg>
+</template>

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);

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'),

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 {

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 {

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 {

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;