diff --git a/frontend/src/components/log-file/index.vue b/frontend/src/components/log-file/index.vue index f5447ec28..7642d4c92 100644 --- a/frontend/src/components/log-file/index.vue +++ b/frontend/src/components/log-file/index.vue @@ -290,7 +290,7 @@ defineExpose({ changeTail, onDownload, clearLog }); overflow-y: auto; overflow-x: auto; position: relative; - background-color: #1e1e1e; + background-color: var(--panel-logs-bg-color); margin-top: 10px; } diff --git a/frontend/src/components/terminal/index.vue b/frontend/src/components/terminal/index.vue index 653ef9f3a..2ac20c920 100644 --- a/frontend/src/components/terminal/index.vue +++ b/frontend/src/components/terminal/index.vue @@ -47,12 +47,13 @@ const acceptParams = (props: WsProps) => { }; const newTerm = () => { + const background = getComputedStyle(document.documentElement).getPropertyValue('--panel-terminal-bg-color').trim(); term.value = new Terminal({ lineHeight: 1.2, fontSize: 12, fontFamily: "Monaco, Menlo, Consolas, 'Courier New', monospace", theme: { - background: '#000000', + background: background, }, cursorBlink: true, cursorStyle: 'underline', @@ -243,4 +244,7 @@ onBeforeUnmount(() => { width: 100%; height: 100%; } +:deep(.xterm) { + padding: 5px !important; +} </style> diff --git a/frontend/src/styles/element-dark.scss b/frontend/src/styles/element-dark.scss index 564eb19b9..eb59bfdb2 100644 --- a/frontend/src/styles/element-dark.scss +++ b/frontend/src/styles/element-dark.scss @@ -49,6 +49,12 @@ html.dark { --el-color-primary-light-7: var(--panel-color-primary-light-7); --el-color-primary-light-8: var(--panel-color-primary-light-8); --el-color-primary-light-9: var(--panel-color-primary-light-9); + --el-color-primary-dark-2: var(--panel-color-primary); + --el-scrollbar-bg-color: var(--panel-main-bg-color-8); + --el-border-color-darker: var(--panel-main-bg-color-6); + --el-color-success:#238636; + --el-color-success-light-8: #3fb950; + --el-color-success-light-9: #3fb95030; --panel-border: 2px solid var(--panel-main-bg-color-8); @@ -59,7 +65,10 @@ html.dark { --panel-footer-border: var(--panel-main-bg-color-7); --panel-text-color: var(--panel-main-bg-color-1); --panel-menu-bg-color: var(--panel-main-bg-color-10); - --panel-terminal-tag-bg-color: var(--panel-main-bg-color-10); + --panel-terminal-tag-bg-color: var(--panel-main-bg-color-10); + --panel-terminal-tag-active-bg-color: var(--panel-main-bg-color-10); + --panel-terminal-bg-color: var(--panel-main-bg-color-10); + --panel-logs-bg-color: var(--panel-main-bg-color-9); --el-menu-item-bg-color: var(--panel-main-bg-color-10); --el-menu-item-bg-color-active: var(--panel-main-bg-color-8); @@ -160,14 +169,14 @@ html.dark { --el-button-hover-border-color: var(--panel-main-bg-color-8); } - .el-button:hover { + .el-button--primary:hover { --el-button-hover-text-color: var(--panel-text-color-white); --el-button-border-color: var(--el-color-primary-light-3); --el-button-hover-bg-color: var(--el-color-primary-light-3); --el-button-hover-border-color: var(--el-color-primary-light-3); } - .el-button:active { + .el-button--primary:active { --el-button-hover-text-color: var(--panel-text-color-white); --el-button-active-bg-color: var(--el-color-primary-light-3); --el-button-active-border-color: var(--el-color-primary-light-3); @@ -197,7 +206,7 @@ html.dark { } .el-drawer .el-drawer__header span { - color: var(--el-menu-text-color); + color: var(--panel-text-color); } .el-dialog { @@ -234,4 +243,65 @@ html.dark { --el-color-info: var(--panel-alert-info-text-color); } + .md-editor-dark { + --md-bk-color: var(--panel-main-bg-color-8); + } + .md-editor-dark .md-editor-preview { + --md-theme-color: var(--el-text-color-primary); + } + .md-editor-dark .default-theme a { + --md-theme-link-color: var(--el-color-primary); + } + + .el-descriptions__title { + color: var(--el-text-color-primary); + } + .el-descriptions__content.el-descriptions__cell.is-bordered-content { + color: var(--el-text-color-primary); + } + .el-descriptions--large .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell { + padding: 12px 15px; + background-color: transparent; + } + .el-descriptions__body { + background-color: transparent; + } + .el-descriptions__label { + color: var(--el-color-primary) !important; + margin-right: 16px; + } + + .el-avatar { + --el-avatar-bg-color: var(--panel-main-bg-color-7) !important; + box-shadow: 0 0 4px rgba(0, 94, 235, 0.1); + border: 0.5px solid var(--panel-main-bg-color-7); + } + + .cm-editor { + background-color: var(--panel-main-bg-color-9); + } + .cm-gutters { + background-color: var(--panel-main-bg-color-8); + } + + // scroll-bar + ::-webkit-scrollbar { + background-color: var(--el-scrollbar-bg-color) !important; + } + ::-webkit-scrollbar-thumb { + background-color: var(--el-border-color-darker); + } + + .app-warn { + span { + &:nth-child(2) { + color: var(--panel-color-primary); + + &:hover { + color: var(--panel-color-primary-light-3); + } + } + } + } + } \ No newline at end of file diff --git a/frontend/src/styles/element.scss b/frontend/src/styles/element.scss index 83f8fb409..36998aa79 100644 --- a/frontend/src/styles/element.scss +++ b/frontend/src/styles/element.scss @@ -25,6 +25,9 @@ --el-color-primary-light-9: var(--panel-color-primary-light-9); --el-text-color-regular: #646a73; + --el-color-success:#238636; + --el-color-success-light-8: #3fb950; + --el-color-success-light-9: #3fb95030; } html { @@ -44,6 +47,9 @@ html { --panel-button-bg-color: #ffffff; --panel-footer-border: #e4e7ed; --panel-terminal-tag-bg-color: #efefef; + --panel-terminal-tag-active-bg-color: #575758; + --panel-terminal-bg-color: #1e1e1e; + --panel-logs-bg-color: #1e1e1e; --panel-alert-bg: #e2e4ec; --panel-path-bg: #ffffff; diff --git a/frontend/src/utils/xpack.ts b/frontend/src/utils/xpack.ts index 1fe395c49..aef395f1d 100644 --- a/frontend/src/utils/xpack.ts +++ b/frontend/src/utils/xpack.ts @@ -115,6 +115,7 @@ export async function getXpackSettingForTheme() { globalStore.themeConfig.logoWithText = res2.data?.logoWithText; globalStore.themeConfig.favicon = res2.data?.favicon; globalStore.themeConfig.themeColor = res2.data?.themeColor; + globalStore.themeConfig.theme = res2.data?.theme || 'auto'; } else { resetXSetting(); } diff --git a/frontend/src/views/app-store/apps/index.vue b/frontend/src/views/app-store/apps/index.vue index c1bc85cb0..4419cd79d 100644 --- a/frontend/src/views/app-store/apps/index.vue +++ b/frontend/src/views/app-store/apps/index.vue @@ -282,7 +282,7 @@ onMounted(() => { }); </script> -<style lang="scss"> +<style scoped lang="scss"> .header { padding-bottom: 10px; } diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue index 0f47a67df..5f551e245 100644 --- a/frontend/src/views/database/mysql/index.vue +++ b/frontend/src/views/database/mysql/index.vue @@ -251,11 +251,12 @@ :close-on-click-modal="false" :destroy-on-close="true" > - <el-alert :closable="false" :title="$t('app.checkInstalledWarn', [dashboardName])" type="info"> + <div class="flex justify-center items-center gap-2 flex-wrap"> + {{ $t('app.checkInstalledWarn', [dashboardName]) }} <el-link icon="Position" @click="getAppDetail" type="primary"> {{ $t('database.goInstall') }} </el-link> - </el-alert> + </div> <template #footer> <span class="dialog-footer"> <el-button @click="dashboardVisible = false">{{ $t('commons.button.cancel') }}</el-button> diff --git a/frontend/src/views/database/postgresql/index.vue b/frontend/src/views/database/postgresql/index.vue index 28aeb014a..eceea68b1 100644 --- a/frontend/src/views/database/postgresql/index.vue +++ b/frontend/src/views/database/postgresql/index.vue @@ -211,11 +211,12 @@ :close-on-click-modal="false" :destroy-on-close="true" > - <el-alert :closable="false" :title="$t('app.checkInstalledWarn', [dashboardName])" type="info"> + <div class="flex justify-center items-center gap-2 flex-wrap"> + {{ $t('app.checkInstalledWarn', [dashboardName]) }} <el-link icon="Position" @click="getAppDetail" type="primary"> {{ $t('database.goInstall') }} </el-link> - </el-alert> + </div> <template #footer> <span class="dialog-footer"> <el-button @click="dashboardVisible = false">{{ $t('commons.button.cancel') }}</el-button> diff --git a/frontend/src/views/database/redis/index.vue b/frontend/src/views/database/redis/index.vue index 342efc99f..32b3b3d73 100644 --- a/frontend/src/views/database/redis/index.vue +++ b/frontend/src/views/database/redis/index.vue @@ -123,11 +123,12 @@ :close-on-click-modal="false" :destroy-on-close="true" > - <el-alert :closable="false" :title="$t('app.checkInstalledWarn', ['Redis-Commander'])" type="info"> + <div class="flex justify-center items-center gap-2 flex-wrap"> + {{ $t('app.checkInstalledWarn', ['Redis-Commander']) }} <el-link icon="Position" @click="getAppDetail('redis-commander')" type="primary"> {{ $t('database.goInstall') }} </el-link> - </el-alert> + </div> <template #footer> <span class="dialog-footer"> <el-button @click="commandVisible = false">{{ $t('commons.button.cancel') }}</el-button> diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue index 2726f1102..fa0a3e520 100644 --- a/frontend/src/views/home/index.vue +++ b/frontend/src/views/home/index.vue @@ -722,7 +722,7 @@ onBeforeUnmount(() => { .system-label { font-weight: 400 !important; font-size: 14px !important; - color: #1f2329; + color: var(--panel-text-color); } .system-content { diff --git a/frontend/src/views/host/terminal/command/index.vue b/frontend/src/views/host/terminal/command/index.vue index 4a0cbf703..dce42389d 100644 --- a/frontend/src/views/host/terminal/command/index.vue +++ b/frontend/src/views/host/terminal/command/index.vue @@ -8,7 +8,7 @@ <div class="flex w-full flex-col gap-4 md:justify-between md:flex-row"> <div class="flex flex-wrap gap-4"> <el-button type="primary" @click="onCreate()"> - {{ $t('commons.button.create') }} {{ $t('terminal.quickCommand') }} + {{ $t('commons.button.create') }}{{ $t('terminal.quickCommand') }} </el-button> <el-button type="primary" plain @click="onOpenGroupDialog()"> {{ $t('terminal.group') }} diff --git a/frontend/src/views/host/terminal/terminal/index.vue b/frontend/src/views/host/terminal/terminal/index.vue index 32ee4e78b..5b05cd935 100644 --- a/frontend/src/views/host/terminal/terminal/index.vue +++ b/frontend/src/views/host/terminal/terminal/index.vue @@ -44,7 +44,10 @@ </span> </template> <Terminal - :style="{ height: `calc(100vh - ${loadHeight()})`, 'background-color': '#000' }" + :style="{ + height: `calc(100vh - ${loadHeight()})`, + 'background-color': `var(--panel-logs-bg-color)`, + }" :ref="'t-' + item.index" :key="item.Refresh" ></Terminal> @@ -427,12 +430,10 @@ onMounted(() => { z-index: calc(var(--el-index-normal) + 1); } :deep(.el-tabs__item) { - color: #575758; - padding: 0 0px; + padding: 0; } :deep(.el-tabs__item.is-active) { - color: #ebeef5; - background-color: #575758; + background-color: var(--panel-terminal-tag-active-bg-color); } } diff --git a/frontend/src/views/log/operation/index.vue b/frontend/src/views/log/operation/index.vue index fb41a8e15..408c34ee4 100644 --- a/frontend/src/views/log/operation/index.vue +++ b/frontend/src/views/log/operation/index.vue @@ -241,3 +241,11 @@ onMounted(() => { search(); }); </script> +<style scoped lang="scss"> +.tag-button { + &.no-active { + background: none; + border: none; + } +} +</style> diff --git a/frontend/src/views/login/components/login-form.vue b/frontend/src/views/login/components/login-form.vue index 8acb11502..5fb410fd1 100644 --- a/frontend/src/views/login/components/login-form.vue +++ b/frontend/src/views/login/components/login-form.vue @@ -366,7 +366,8 @@ const loadDataFromDB = async () => { globalStore.setDefaultNetwork(res.data.defaultNetwork); globalStore.setOpenMenuTabs(res.data.menuTabs === 'enable'); globalStore.updateLanguage(res.data.language); - globalStore.setThemeConfig({ ...themeConfig.value, theme: res.data.theme, panelName: res.data.panelName }); + let theme = globalStore.themeConfig.theme === res.data.theme ? res.data.theme : globalStore.themeConfig.theme; + globalStore.setThemeConfig({ ...themeConfig.value, theme: theme, panelName: res.data.panelName }); }; onMounted(() => { diff --git a/frontend/src/views/setting/panel/index.vue b/frontend/src/views/setting/panel/index.vue index 748c2a38e..da4ea2abf 100644 --- a/frontend/src/views/setting/panel/index.vue +++ b/frontend/src/views/setting/panel/index.vue @@ -303,6 +303,7 @@ const search = async () => { form.theme = xpackRes.data.theme || globalStore.themeConfig.theme; form.themeColor = JSON.parse(xpackRes.data.themeColor); globalStore.themeConfig.themeColor = xpackRes.data.themeColor; + globalStore.themeConfig.theme = form.theme; form.proxyDocker = xpackRes.data.proxyDocker; } } else { diff --git a/frontend/src/views/setting/panel/theme-color/index.vue b/frontend/src/views/setting/panel/theme-color/index.vue index a6b735ce7..1c9c0b773 100644 --- a/frontend/src/views/setting/panel/theme-color/index.vue +++ b/frontend/src/views/setting/panel/theme-color/index.vue @@ -27,11 +27,11 @@ </el-tooltip> <el-tooltip :content="$t('xpack.theme.freshGreen')" placement="top"> <el-button - color="#00CC00" - :class="form.light === '#00CC00' ? 'selected-white' : ''" + color="#238636" + :class="form.light === '#238636' ? 'selected-white' : ''" circle dark - @click="changeLightColor('#00CC00')" + @click="changeLightColor('#238636')" /> </el-tooltip> <el-color-picker @@ -68,11 +68,11 @@ </el-tooltip> <el-tooltip :content="$t('xpack.theme.freshGreen')" placement="top"> <el-button - color="#00CC00" - :class="form.dark === '#00CC00' ? 'selected-white' : ''" + color="#238636" + :class="form.dark === '#238636' ? 'selected-white' : ''" circle dark - @click="changeDarkColor('#00CC00')" + @click="changeDarkColor('#238636')" /> </el-tooltip> <el-color-picker @@ -136,7 +136,7 @@ const predefineColors = ref([ '#005eeb', '#3D8EFF', '#F0BE96', - '#00CC00', + '#238636', '#00ced1', '#c71585', '#ff4500', diff --git a/frontend/src/views/website/runtime/php/create/index.vue b/frontend/src/views/website/runtime/php/create/index.vue index 1f9d06be7..5a276557f 100644 --- a/frontend/src/views/website/runtime/php/create/index.vue +++ b/frontend/src/views/website/runtime/php/create/index.vue @@ -107,9 +107,7 @@ ></EditParams> <el-form-item> <el-alert :title="$t('runtime.buildHelper')" type="warning" :closable="false" /> - </el-form-item> - <el-form-item> - <el-alert type="info" :closable="false"> + <span class="input-help"> <span>{{ $t('runtime.extendHelper') }}</span> <el-link target="_blank" @@ -119,19 +117,14 @@ {{ $t('php.toExtensionsList') }} </el-link> <br /> - </el-alert> + </span> </el-form-item> <div v-if="mode == 'edit'"> <el-form-item> <el-checkbox v-model="runtime.rebuild"> {{ $t('runtime.rebuild') }} </el-checkbox> - </el-form-item> - <el-form-item> - <el-alert type="info" :closable="false"> - <span>{{ $t('runtime.rebuildHelper') }}</span> - <br /> - </el-alert> + <span class="input-help">{{ $t('runtime.rebuildHelper') }}</span> </el-form-item> </div> </div>