fix: 夜间模式ui优化(https://github.com/1Panel-dev/1Panel/issues/938) (#953)

#### What this PR does / why we need it?

#### Summary of your change

#### Please indicate you've done the following:

- [ ] Made sure tests are passing and test coverage is added if needed.
- [ ] Made sure commit message follow the rule of [Conventional Commits specification](https://www.conventionalcommits.org/).
- [ ] Considered the docs impact and opened a new docs issue or PR with docs changes if needed.

frontend/src/components/system-upgrade/index.vue

@@ -53,7 +53,11 @@
                     {{ upgradeInfo.latestVersion }} {{ $t('setting.latestVersion') }}
                 </el-radio>
             </el-radio-group>
-            <MdEditor v-model="upgradeInfo.releaseNote" previewOnly />
+            <MdEditor
+                v-model="upgradeInfo.releaseNote"
+                previewOnly
+                :theme="globalStore.$state.themeConfig.theme || 'light'"
+            />
         </div>
         <template #footer>
             <span class="dialog-footer">

frontend/src/styles/element-dark.scss

@@ -26,6 +26,7 @@ html.dark {
     --panel-popup-color: #060708;
     --panel-alert-bg: #2f3030;
     --panel-path-bg: #2f3030;
+    --panel-button-disabled: #5a5a5a;
 
     .el-tag.el-tag--info {
         --el-tag-bg-color: rgb(49, 51, 51);
@@ -79,6 +80,10 @@ html.dark {
     --w-e-textarea-bg-color: #1b1b1b;
     --w-e-textarea-color: #eeeeee;
 
+    .md-editor-dark {
+        --md-bk-color: #111417;
+    }
+
     // * 以下为自定义暗黑模式内容
     // login
     .login-container {
@@ -202,8 +207,12 @@ html.dark {
         background: #1d2023;
         border-color: #303438;
     }
+    .el-button.is-link.is-disabled {
+        color: var(--panel-button-disabled) !important;
+    }
     .el-button.is-disabled {
         border-color: #303438;
+        color: var(--panel-button-disabled);
     }
     .el-popper.is-dark {
         color: rgb(171 173 173);

frontend/src/views/app-store/detail/index.vue

@@ -83,7 +83,11 @@
                 </div>
             </div>
             <div v-loading="loadingDetail" style="margin-left: 10px">
-                <MdEditor v-model="appDetail.readme" previewOnly />
+                <MdEditor
+                    v-model="appDetail.readme"
+                    previewOnly
+                    :theme="globalStore.$state.themeConfig.theme || 'light'"
+                />
             </div>
         </template>
     </LayoutContent>
@@ -98,6 +102,8 @@ import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Install from './install/index.vue';
 import router from '@/routers';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
 
 const language = useI18n().locale.value;
 

frontend/src/views/setting/safe/mfa/index.vue

@@ -28,7 +28,7 @@
                 <el-row type="flex" justify="center">
                     <el-col :span="22">
                         <el-form-item :label="$t('setting.mfaHelper1')">
-                            <ul>
+                            <ul class="help-ul">
                                 <li>Google Authenticator</li>
                                 <li>Microsoft Authenticator</li>
                                 <li>1Password</li>
@@ -136,3 +136,8 @@ defineExpose({
     acceptParams,
 });
 </script>
+<style scoped>
+.help-ul {
+    color: #8f959e;
+}
+</style>