gandc/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-03-22 10:35:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Optimize Dark Theme & Ultra Dark (#1889)

Browse Source 
---------

Co-authored-by: MHSanaei <ho3ein.sanaei@gmail.com>
Co-authored-by: Alireza Ahmadi <alireza7@gmail.com>
This commit is contained in:
Tara Rostami
2024-02-28 14:35:01 +03:30
committed by GitHub
parent 806b57f959
commit 836ee29b78
18 changed files with 322 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/html/xui/common_sider.html
View File

@@ -15,10 +15,6 @@
<a-icon type="tool"></a-icon>
<span><b>{{ i18n "menu.xray"}}</b></span>
</a-menu-item>
<!--<a-menu-item key="{{ .base_path }}panel/clients">-->
<!-- <a-icon type="laptop"></a-icon>-->
<!-- <span>Client</span>-->
<!--</a-menu-item>-->
<a-menu-item key="{{ .base_path }}logout">
<a-icon type="logout"></a-icon>
<span><b>{{ i18n "menu.logout"}}</b></span>
@@ -31,7 +27,13 @@
<a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
<a-menu-item mode="inline">
<a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
<theme-switch />
<theme-switch>
</theme-switch>
<a-checkbox v-if="themeSwitcher.isDarkTheme" style="padding-left: 1rem; vertical-align: middle;"
:checked="themeSwitcher.isUltra"
@click="themeSwitcher.toggleUltra()">
Ultra
</a-checkbox>
</a-menu-item>
</a-menu>
<a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']"
@@ -50,7 +52,13 @@
<a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
<a-menu-item mode="inline">
<a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
<theme-switch />
<theme-switch>
</theme-switch>
<a-checkbox v-if="themeSwitcher.isDarkTheme" style="padding-left: 1rem; vertical-align: middle;"
:checked="themeSwitcher.isUltra"
@click="themeSwitcher.toggleUltra()">
Ultra
</a-checkbox>
</a-menu-item>
</a-menu>
<a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']"

30
web/html/xui/component/themeSwitch.html
View File

@@ -10,32 +10,48 @@
<script>
function createThemeSwitcher() {
const isDarkTheme = localStorage.getItem('dark-mode') === 'true';
const isUltra = localStorage.getItem('isUltraDarkThemeEnabled') === 'true';
if (isUltra) {
document.documentElement.setAttribute('data-theme', 'ultra-dark');
}
const theme = isDarkTheme ? 'dark' : 'light';
document.querySelector('body').setAttribute('class', theme)
document.querySelector('body').setAttribute('class', theme);
return {
isDarkTheme,
isUltra,
get currentTheme() {
return this.isDarkTheme ? 'dark' : 'light';
},
toggleTheme() {
this.isDarkTheme = !this.isDarkTheme;
localStorage.setItem('dark-mode', this.isDarkTheme);
document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light')
document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light');
document.getElementById('message').className = themeSwitcher.currentTheme;
},
toggleUltra() {
this.isUltra = !this.isUltra;
if (this.isUltra) {
document.documentElement.setAttribute('data-theme', 'ultra-dark');
} else {
document.documentElement.removeAttribute('data-theme');
}
localStorage.setItem('isUltraDarkThemeEnabled', this.isUltra.toString());
}
};
}
const themeSwitcher = createThemeSwitcher();
Vue.component('theme-switch', {
props: [],
template: `{{template "component/themeSwitchTemplate"}}`,
data: () => ({ themeSwitcher }),
data: () => ({
themeSwitcher
}),
mounted() {
this.$message.config({getContainer: () => document.getElementById('message')});
this.$message.config({
getContainer: () => document.getElementById('message')
});
document.getElementById('message').className = themeSwitcher.currentTheme;
}
});
</script>
{{end}}
{{end}}

22
web/html/xui/index.html
View File

@@ -10,23 +10,11 @@
margin-inline: 0.3rem;
}
}
.ant-col-sm-24 {
margin-top: 10px;
}
.ant-card-dark h2 {
color: hsla(0, 0%, 100%, .65);
}
.dark .ant-card-hoverable:hover,
.dark .ant-space-item > .ant-tabs:hover {
transform: scale(0.987);
outline-color: #40434d;
}
.dark .ant-card-bordered {
outline: 2px solid var(--dark-color-background);
color: var(--dark-color-text-primary);
}
</style>
@@ -104,8 +92,8 @@
<a-col :sm="24" :lg="12">
<a-card hoverable>
<b>{{ i18n "pages.index.operationHours" }}:</b>
<a-tag color="green">Xray [[ formatSecond(status.appStats.uptime) ]]</a-tag>
<a-tag color="green">OS [[ formatSecond(status.uptime) ]]</a-tag>
<a-tag :color="status.xray.color">Xray: [[ formatSecond(status.appStats.uptime) ]]</a-tag>
<a-tag color="green">OS: [[ formatSecond(status.uptime) ]]</a-tag>
</a-card>
</a-col>
<a-col :sm="24" :lg="12">
@@ -153,10 +141,10 @@
<a-card hoverable>
<b>{{ i18n "usage"}}:</b>
<a-tag color="green">
RAM [[ sizeFormat(status.appStats.mem) ]]
RAM: [[ sizeFormat(status.appStats.mem) ]]
</a-tag>
<a-tag color="green">
Threads [[ status.appStats.threads ]]
Threads: [[ status.appStats.threads ]]
</a-tag>
</a-card>
</a-col>

6
web/html/xui/xray.html
View File

@@ -74,8 +74,8 @@
</transition>
<a-space direction="vertical">
<a-card hoverable style="margin-bottom: .5rem;">
<a-row>
<a-col :xs="24" :sm="8" style="padding: 4px;">
<a-row style="display: flex; flex-wrap: wrap; align-items: center;">
<a-col :xs="24" :sm="10" style="padding: 4px;">
<a-space direction="horizontal">
<a-button type="primary" :disabled="saveBtnDisable" @click="updateXraySetting">{{ i18n "pages.xray.save" }}</a-button>
<a-button type="danger" :disabled="!saveBtnDisable" @click="restartXray">{{ i18n "pages.xray.restart" }}</a-button>
@@ -89,7 +89,7 @@
</a-popover>
</a-space>
</a-col>
<a-col :xs="24" :sm="16">
<a-col :xs="24" :sm="14">
<template>
<div>
<a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200">