shumengya/cwd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin): 添加深色主题支持

Browse Source 
- 新增主题切换功能，支持浅色、深色和跟随系统三种模式
- 创建主题管理组合式函数 useTheme 和 CSS 变量定义
- 在所有视图组件中应用 CSS 变量以实现主题适配
- 在布局头部添加主题切换按钮，支持循环切换主题
- 更新 .gitignore 添加 .trae 文件忽略
This commit is contained in:
anghunk
2026-01-27 11:07:13 +08:00
parent 61f2223825
commit ba8349b04c
12 changed files with 411 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -172,3 +172,4 @@ package-lock.json
wrangler.jsonc wrangler.jsonc
.claude .claude
.trae

14
cwd-admin/src/App.vue
View File

@@ -4,7 +4,16 @@
</div> </div>
</template> </template>
<script setup lang="ts"></script> <script setup lang="ts">
import { onMounted } from "vue";
import { useTheme } from "./composables/useTheme";
const { initTheme } = useTheme();
onMounted(() => {
initTheme();
});
</script>
<style> <style>
html, html,
@@ -17,6 +26,7 @@ body,
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background-color: #f5f5f5; background-color: var(--bg-body);
color: var(--text-primary);
} }
</style> </style>

63
cwd-admin/src/assets/theme.css Normal file
View File

@@ -0,0 +1,63 @@
:root {
/* Light Theme (Default) */
--bg-body: #f5f5f5;
--bg-card: #ffffff;
--bg-header: #24292f;
--bg-sider: #f6f8fa;
--bg-input: #ffffff;
--bg-hover: #eaeef2;
--bg-active: #d0ebff;
--bg-select: #24292f; /* Header select bg */
--text-primary: #24292f;
--text-secondary: #57606a;
--text-inverse: #ffffff;
--text-link: #0969da;
--border-color: #d0d7de;
--border-input: #d0d7de;
--border-header: #57606a;
--color-success: #1a7f37;
--color-warning: #9a6700;
--color-danger: #d1242f;
--chart-line: #0ea5e9;
--chart-area-start: rgba(56, 189, 248, 0.80);
--chart-area-end: rgba(56, 189, 248, 0.2);
--shadow-card: 0 1px 3px rgba(0,0,0,0.1);
--shadow-login: 0 18px 45px rgba(15, 23, 42, 0.12);
}
:root.dark {
/* Dark Theme */
--bg-body: #0d1117;
--bg-card: #161b22;
--bg-header: #161b22;
--bg-sider: #010409;
--bg-input: #0d1117;
--bg-hover: #21262d;
--bg-active: #1f6feb33; /* Semi-transparent blue */
--bg-select: #161b22;
--text-primary: #c9d1d9;
--text-secondary: #8b949e;
--text-inverse: #f0f6fc;
--text-link: #58a6ff;
--border-color: #30363d;
--border-input: #30363d;
--border-header: #30363d;
--color-success: #3fb950;
--color-warning: #d29922;
--color-danger: #f85149;
--chart-line: #38bdf8;
--chart-area-start: rgba(56, 189, 248, 0.50);
--chart-area-end: rgba(56, 189, 248, 0.1);
--shadow-card: 0 1px 3px rgba(0,0,0,0.5);
--shadow-login: 0 18px 45px rgba(0, 0, 0, 0.4);
}

57
cwd-admin/src/composables/useTheme.ts Normal file
View File

@@ -0,0 +1,57 @@
import { ref } from 'vue';
export type Theme = 'light' | 'dark' | 'system';
const STORAGE_KEY = 'cwd_admin_theme';
const theme = ref<Theme>('system');
export function useTheme() {
function applyTheme() {
if (typeof window === 'undefined') return;
const root = document.documentElement;
const isDark =
theme.value === 'dark' ||
(theme.value === 'system' &&
window.matchMedia('(prefers-color-scheme: dark)').matches);
if (isDark) {
root.classList.add('dark');
} else {
root.classList.remove('dark');
}
}
function setTheme(newTheme: Theme) {
theme.value = newTheme;
localStorage.setItem(STORAGE_KEY, newTheme);
applyTheme();
}
function initTheme() {
if (typeof window === 'undefined') return;
const stored = localStorage.getItem(STORAGE_KEY) as Theme | null;
if (stored && ['light', 'dark', 'system'].includes(stored)) {
theme.value = stored;
} else {
theme.value = 'system';
}
applyTheme();
// Listen for system changes
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
// Remove existing listener to avoid duplicates if init is called multiple times (though it shouldn't be)
mediaQuery.onchange = () => {
if (theme.value === 'system') {
applyTheme();
}
};
}
return {
theme,
setTheme,
initTheme
};
}

1
cwd-admin/src/main.ts
View File

@@ -1,4 +1,5 @@
import { createApp } from 'vue'; import { createApp } from 'vue';
import './assets/theme.css';
import App from './App.vue'; import App from './App.vue';
import { router } from './router'; import { router } from './router';

62
cwd-admin/src/views/AnalyticsVisitView.vue
View File

@@ -489,7 +489,7 @@ watch(domainFilter, () => {
.page-title { .page-title {
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
color: #24292f; color: var(--text-primary);
} }
.toolbar { .toolbar {
@@ -509,21 +509,23 @@ watch(domainFilter, () => {
padding: 8px 8px; padding: 8px 8px;
box-sizing: border-box; box-sizing: border-box;
font-size: 13px; font-size: 13px;
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 4px;
background-color: #ffffff; background-color: var(--bg-input);
color: var(--text-primary);
} }
.card { .card {
background-color: #ffffff; background-color: var(--bg-card);
border-radius: 6px; border-radius: 6px;
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
padding: 16px 18px; padding: 16px 18px;
} }
.card-title { .card-title {
margin: 0 0 12px; margin: 0 0 12px;
font-size: 16px; font-size: 16px;
color: var(--text-primary);
} }
.card-title-row { .card-title-row {
@@ -536,12 +538,12 @@ watch(domainFilter, () => {
.page-hint { .page-hint {
font-size: 14px; font-size: 14px;
color: #57606a; color: var(--text-secondary);
} }
.page-error { .page-error {
font-size: 14px; font-size: 14px;
color: #d1242f; color: var(--color-danger);
} }
.stats-grid { .stats-grid {
@@ -553,20 +555,20 @@ watch(domainFilter, () => {
.stats-item { .stats-item {
padding: 10px 12px; padding: 10px 12px;
border-radius: 6px; border-radius: 6px;
background-color: #f6f8fa; background-color: var(--bg-sider);
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
} }
.stats-label { .stats-label {
font-size: 14px; font-size: 14px;
color: #57606a; color: var(--text-secondary);
margin-bottom: 4px; margin-bottom: 4px;
} }
.stats-value { .stats-value {
font-size: 26px; font-size: 26px;
font-weight: 600; font-weight: 600;
color: #24292f; color: var(--text-primary);
} }
.domain-table-wrapper { .domain-table-wrapper {
@@ -576,7 +578,7 @@ watch(domainFilter, () => {
} }
.domain-table { .domain-table {
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
border-radius: 6px; border-radius: 6px;
min-width: 520px; min-width: 520px;
overflow: hidden; overflow: hidden;
@@ -584,24 +586,30 @@ watch(domainFilter, () => {
.domain-table-header { .domain-table-header {
display: flex; display: flex;
background-color: #f6f8fa; background-color: var(--bg-sider);
color: var(--text-secondary);
} }
.domain-table-row { .domain-table-row {
display: flex; display: flex;
border-top: 1px solid #eaeae0; border-top: 1px solid var(--border-color);
} }
.domain-cell { .domain-cell {
flex: 1; flex: 1;
padding: 10px 10px; padding: 10px 10px;
font-size: 14px; font-size: 14px;
color: #24292f; color: var(--text-primary);
box-sizing: border-box; box-sizing: border-box;
} }
.domain-cell a { .domain-cell a {
color: #57606a; color: var(--text-link);
text-decoration: none;
}
.domain-cell a:hover {
text-decoration: underline;
} }
.domain-cell-title { .domain-cell-title {
@@ -688,24 +696,24 @@ watch(domainFilter, () => {
padding: 10px 14px; padding: 10px 14px;
border-radius: 6px; border-radius: 6px;
font-size: 13px; font-size: 13px;
box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2); box-shadow: var(--shadow-card);
z-index: 1000; z-index: 1000;
} }
.toast-success { .toast-success {
background-color: #1a7f37; background-color: var(--color-success);
color: #ffffff; color: var(--text-inverse);
} }
.toast-error { .toast-error {
background-color: #d1242f; background-color: var(--color-danger);
color: #ffffff; color: var(--text-inverse);
} }
.visit-tabs { .visit-tabs {
display: inline-flex; display: inline-flex;
border-radius: 999px; border-radius: 999px;
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
overflow: hidden; overflow: hidden;
} }
@@ -713,18 +721,18 @@ watch(domainFilter, () => {
padding: 4px 10px; padding: 4px 10px;
font-size: 12px; font-size: 12px;
border: none; border: none;
background-color: #ffffff; background-color: var(--bg-card);
color: #57606a; color: var(--text-secondary);
cursor: pointer; cursor: pointer;
} }
.visit-tab + .visit-tab { .visit-tab + .visit-tab {
border-left: 1px solid #d0d7de; border-left: 1px solid var(--border-color);
} }
.visit-tab-active { .visit-tab-active {
background-color: #0969da; background-color: var(--primary-color);
color: #ffffff; color: var(--text-inverse);
} }
@media (max-width: 768px) { @media (max-width: 768px) {

124
cwd-admin/src/views/CommentsView.vue
View File

@@ -577,7 +577,7 @@ watch(domainFilter, () => {
.page-title { .page-title {
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
color: #24292f; color: var(--text-primary);
} }
.toolbar { .toolbar {
@@ -602,16 +602,18 @@ watch(domainFilter, () => {
padding: 8px 8px; padding: 8px 8px;
box-sizing: border-box; box-sizing: border-box;
font-size: 13px; font-size: 13px;
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 4px;
background-color: #ffffff; background-color: var(--bg-input);
color: var(--text-primary);
} }
.toolbar-button { .toolbar-button {
padding: 6px 10px; padding: 6px 10px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
background-color: #f6f8fa; background-color: var(--bg-sider);
color: var(--text-primary);
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
min-width: 70px; min-width: 70px;
@@ -619,17 +621,17 @@ watch(domainFilter, () => {
.page-hint { .page-hint {
font-size: 14px; font-size: 14px;
color: #57606a; color: var(--text-secondary);
} }
.page-error { .page-error {
font-size: 14px; font-size: 14px;
color: #d1242f; color: var(--color-danger);
} }
.comment-table { .comment-table {
background-color: #ffffff; background-color: var(--bg-card);
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
overflow-x: auto; overflow-x: auto;
@@ -637,12 +639,12 @@ watch(domainFilter, () => {
.table-header { .table-header {
display: flex; display: flex;
background-color: #f6f8fa; background-color: var(--bg-sider);
} }
.table-row { .table-row {
display: flex; display: flex;
/* border-bottom: 1px solid #eaeae0; */ /* border-bottom: 1px solid var(--border-color); */
} }
.table-row:last-child { .table-row:last-child {
@@ -650,18 +652,18 @@ watch(domainFilter, () => {
} }
.table-row:hover .table-cell { .table-row:hover .table-cell {
background-color: #f8f9fa; background-color: var(--bg-hover);
} }
.table-cell { .table-cell {
padding: 10px 12px; padding: 10px 12px;
font-size: 13px; font-size: 13px;
color: #24292f; color: var(--text-primary);
display: flex; display: flex;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
border-bottom: 1px solid #eaeae0; border-bottom: 1px solid var(--border-color);
} }
.table-cell-id { .table-cell-id {
@@ -715,15 +717,15 @@ watch(domainFilter, () => {
.table-header .table-cell { .table-header .table-cell {
font-weight: 500; font-weight: 500;
color: #57606a; color: var(--text-secondary);
align-items: center; align-items: center;
background-color: #f6f8fa; background-color: var(--bg-sider);
border-bottom: 1px solid #d0d7de; border-bottom: 1px solid var(--border-color);
} }
.cell-id { .cell-id {
font-size: 12px; font-size: 12px;
color: #57606a; color: var(--text-secondary);
} }
.cell-author-name { .cell-author-name {
@@ -734,7 +736,7 @@ watch(domainFilter, () => {
.cell-author-email { .cell-author-email {
font-size: 12px; font-size: 12px;
color: #57606a; color: var(--text-secondary);
word-break: break-all; word-break: break-all;
margin-bottom: 2px; margin-bottom: 2px;
} }
@@ -757,7 +759,7 @@ watch(domainFilter, () => {
.cell-path { .cell-path {
font-size: 13px; font-size: 13px;
color: #2774cb; color: var(--text-link);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -770,7 +772,7 @@ watch(domainFilter, () => {
.cell-time { .cell-time {
font-size: 12px; font-size: 12px;
color: #57606a; color: var(--text-secondary);
} }
.cell-author-wrapper { .cell-author-wrapper {
@@ -805,23 +807,23 @@ watch(domainFilter, () => {
} }
.cell-status-approved { .cell-status-approved {
color: #1a7f37; color: var(--color-success);
background-color: #e7f5eb; background-color: rgba(26, 127, 55, 0.1); /* Simplified bg based on color */
} }
.cell-status-pending { .cell-status-pending {
color: #9a6700; color: var(--color-warning);
background-color: #fff8c5; background-color: rgba(154, 103, 0, 0.1);
} }
.cell-status-rejected { .cell-status-rejected {
color: #d1242f; color: var(--color-danger);
background-color: #ffebe9; background-color: rgba(209, 36, 47, 0.1);
} }
.cell-likes-number { .cell-likes-number {
color: #d1242f; color: var(--color-danger);
background-color: #ffebe9; background-color: rgba(209, 36, 47, 0.1);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -829,14 +831,16 @@ watch(domainFilter, () => {
} }
.cell-pin-flag { .cell-pin-flag {
color: #825802; color: #825802; /* Maybe var(--color-warning)? */
background-color: #f7c848; background-color: #f7c848;
} }
.status-select { .status-select {
padding: 3px 8px; padding: 3px 8px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
background-color: var(--bg-input);
color: var(--text-primary);
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
} }
@@ -850,14 +854,15 @@ watch(domainFilter, () => {
.table-action { .table-action {
padding: 3px 8px; padding: 3px 8px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
background-color: #ffffff; background-color: var(--bg-input);
color: var(--text-primary);
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
} }
.table-action:hover { .table-action:hover {
background-color: #f6f8fa; background-color: var(--bg-hover);
} }
.table-action:disabled { .table-action:disabled {
@@ -866,18 +871,18 @@ watch(domainFilter, () => {
} }
.table-action-danger { .table-action-danger {
border-color: #d1242f; border-color: var(--color-danger);
color: #d1242f; color: var(--color-danger);
} }
.table-action-danger:hover { .table-action-danger:hover {
background-color: #ffebe9; background-color: rgba(209, 36, 47, 0.1);
} }
.table-empty { .table-empty {
padding: 32px; padding: 32px;
text-align: center; text-align: center;
color: #57606a; color: var(--text-secondary);
font-size: 13px; font-size: 13px;
} }
@@ -895,8 +900,9 @@ watch(domainFilter, () => {
min-width: 28px; min-width: 28px;
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
background-color: #f6f8fa; background-color: var(--bg-sider);
color: var(--text-primary);
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
@@ -908,15 +914,15 @@ watch(domainFilter, () => {
} }
.pagination-button-active { .pagination-button-active {
background-color: #0969da; background-color: var(--primary-color);
color: #ffffff; color: var(--text-inverse);
border-color: #0969da; border-color: var(--primary-color);
} }
.pagination-ellipsis { .pagination-ellipsis {
padding: 0 2px; padding: 0 2px;
font-size: 12px; font-size: 12px;
color: #57606a; color: var(--text-secondary);
} }
.pagination-jump { .pagination-jump {
@@ -924,7 +930,7 @@ watch(domainFilter, () => {
align-items: center; align-items: center;
gap: 4px; gap: 4px;
font-size: 12px; font-size: 12px;
color: #57606a; color: var(--text-secondary);
} }
.pagination-input { .pagination-input {
@@ -933,7 +939,9 @@ watch(domainFilter, () => {
box-sizing: border-box; box-sizing: border-box;
padding: 2px 4px; padding: 2px 4px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
background-color: var(--bg-input);
color: var(--text-primary);
font-size: 12px; font-size: 12px;
} }
@@ -959,9 +967,9 @@ watch(domainFilter, () => {
} }
.modal { .modal {
background-color: #ffffff; background-color: var(--bg-card);
border-radius: 0; border-radius: 0;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); box-shadow: var(--shadow-card);
width: 100%; width: 100%;
max-width: 600px; max-width: 600px;
padding: 20px 20px 24px; padding: 20px 20px 24px;
@@ -977,7 +985,7 @@ watch(domainFilter, () => {
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #24292f; color: var(--text-primary);
} }
.modal-body { .modal-body {
@@ -1002,14 +1010,14 @@ watch(domainFilter, () => {
} }
.modal-btn.primary { .modal-btn.primary {
background-color: #0969da; background-color: var(--primary-color);
color: #ffffff; color: var(--text-inverse);
} }
.modal-btn.secondary { .modal-btn.secondary {
background-color: #f6f8fa; background-color: var(--bg-sider);
border-color: #d0d7de; border-color: var(--border-color);
color: #24292f; color: var(--text-primary);
} }
.modal-btn:hover { .modal-btn:hover {
@@ -1024,19 +1032,21 @@ watch(domainFilter, () => {
.form-label { .form-label {
font-size: 13px; font-size: 13px;
color: #57606a; color: var(--text-secondary);
} }
.form-input { .form-input {
padding: 8px 10px; padding: 8px 10px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
background-color: var(--bg-input);
color: var(--text-primary);
font-size: 13px; font-size: 13px;
outline: none; outline: none;
} }
.form-input:focus { .form-input:focus {
border-color: #0969da; border-color: var(--primary-color);
box-shadow: 0 0 0 1px rgba(9, 105, 218, 0.2); box-shadow: 0 0 0 1px rgba(9, 105, 218, 0.2);
} }

64
cwd-admin/src/views/DataView.vue
View File

@@ -409,13 +409,13 @@ async function executeImport(comments: any[]) {
.page-title { .page-title {
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
color: #24292f; color: var(--text-primary);
} }
.card { .card {
background-color: #ffffff; background-color: var(--bg-card);
border-radius: 6px; border-radius: 6px;
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
padding: 16px 18px; padding: 16px 18px;
margin-bottom: 1em; margin-bottom: 1em;
} }
@@ -423,6 +423,7 @@ async function executeImport(comments: any[]) {
.card-title { .card-title {
margin: 0 0 12px; margin: 0 0 12px;
font-size: 15px; font-size: 15px;
color: var(--text-primary);
} }
.stats-grid { .stats-grid {
@@ -434,55 +435,56 @@ async function executeImport(comments: any[]) {
.stats-item { .stats-item {
padding: 10px 12px; padding: 10px 12px;
border-radius: 6px; border-radius: 6px;
background-color: #f6f8fa; background-color: var(--bg-sider);
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
} }
.stats-label { .stats-label {
font-size: 12px; font-size: 12px;
color: #57606a; color: var(--text-secondary);
margin-bottom: 4px; margin-bottom: 4px;
} }
.stats-value { .stats-value {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #24292f; color: var(--text-primary);
} }
.stats-value-approved { .stats-value-approved {
color: #1a7f37; color: var(--color-success);
} }
.stats-value-pending { .stats-value-pending {
color: #9a6700; color: var(--color-warning);
} }
.stats-value-rejected { .stats-value-rejected {
color: #d1242f; color: var(--color-danger);
} }
.domain-table { .domain-table {
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
} }
.domain-table-header { .domain-table-header {
display: flex; display: flex;
background-color: #f6f8fa; background-color: var(--bg-sider);
color: var(--text-secondary);
} }
.domain-table-row { .domain-table-row {
display: flex; display: flex;
border-top: 1px solid #eaeae0; border-top: 1px solid var(--border-color);
} }
.domain-cell { .domain-cell {
flex: 1; flex: 1;
padding: 8px 10px; padding: 8px 10px;
font-size: 13px; font-size: 13px;
color: #24292f; color: var(--text-primary);
box-sizing: border-box; box-sizing: border-box;
} }
@@ -493,7 +495,7 @@ async function executeImport(comments: any[]) {
.card-desc { .card-desc {
font-size: 14px; font-size: 14px;
color: #57606a; color: var(--text-secondary);
margin: 0 0 16px; margin: 0 0 16px;
} }
@@ -506,8 +508,8 @@ async function executeImport(comments: any[]) {
padding: 8px 14px; padding: 8px 14px;
border-radius: 4px; border-radius: 4px;
border: none; border: none;
background-color: #0969da; background-color: var(--primary-color);
color: #ffffff; color: var(--text-inverse);
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
min-width: 100px; min-width: 100px;
@@ -527,22 +529,22 @@ async function executeImport(comments: any[]) {
.form-label { .form-label {
font-size: 14px; font-size: 14px;
color: #24292f; color: var(--text-primary);
font-weight: 500; font-weight: 500;
} }
.form-select { .form-select {
padding: 6px 8px; padding: 6px 8px;
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 14px;
color: #24292f; color: var(--text-primary);
background-color: #f6f8fa; background-color: var(--bg-input);
outline: none; outline: none;
} }
.form-select:focus { .form-select:focus {
border-color: #0969da; border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.3); box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.3);
} }
@@ -556,32 +558,32 @@ async function executeImport(comments: any[]) {
padding: 10px 14px; padding: 10px 14px;
border-radius: 6px; border-radius: 6px;
font-size: 13px; font-size: 13px;
box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2); box-shadow: var(--shadow-card);
z-index: 1000; z-index: 1000;
} }
.toast-success { .toast-success {
background-color: #1a7f37; background-color: var(--color-success);
color: #ffffff; color: var(--text-inverse);
} }
.toast-error { .toast-error {
background-color: #d1242f; background-color: var(--color-danger);
color: #ffffff; color: var(--text-inverse);
} }
.log-container { .log-container {
margin-top: 16px; margin-top: 16px;
padding: 12px; padding: 12px;
background-color: #f6f8fa; background-color: var(--bg-sider);
border-radius: 6px; border-radius: 6px;
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
} }
.log-title { .log-title {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #24292f; color: var(--text-primary);
margin-bottom: 8px; margin-bottom: 8px;
} }
@@ -597,7 +599,7 @@ async function executeImport(comments: any[]) {
font-size: 12px; font-size: 12px;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
monospace; monospace;
color: #57606a; color: var(--text-secondary);
line-height: 1.5; line-height: 1.5;
} }
</style> </style>

89
cwd-admin/src/views/LayoutView.vue
View File

@@ -31,8 +31,20 @@
<a class="layout-button" href="https://github.com/anghunk/cwd" target="_blank"> <a class="layout-button" href="https://github.com/anghunk/cwd" target="_blank">
Github Github
</a> </a>
<button class="layout-button" @click="cycleTheme" :title="themeTitle" type="button">
<svg v-if="theme === 'light'" viewBox="0 0 24 24" width="16" height="16">
<path d="M12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" fill="currentColor"/>
</svg>
<svg v-else-if="theme === 'dark'" viewBox="0 0 24 24" width="16" height="16">
<path d="M20 12.986c-.52.095-1.056.15-1.6.15-5.238 0-9.486-4.248-9.486-9.486 0-.544.055-1.08.15-1.6-5.275.986-9.264 5.615-9.264 11.123 0 6.255 5.07 11.325 11.325 11.325 5.508 0 10.137-3.989 11.123-9.264a9.66 9.66 0 0 1-2.248.752z" fill="currentColor"/>
</svg>
<svg v-else viewBox="0 0 24 24" width="16" height="16">
<path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6zM6 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H6zm-3 14a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-1z" fill="currentColor"/>
</svg>
</button>
<button class="layout-button" @click="handleLogout">退出</button> <button class="layout-button" @click="handleLogout">退出</button>
</div> </div>
<button <button
class="layout-actions-toggle" class="layout-actions-toggle"
@click="toggleActions" @click="toggleActions"
@@ -115,18 +127,32 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, watch, provide } from "vue"; import { ref, onMounted, watch, provide, computed } from "vue";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import { logoutAdmin, fetchDomainList } from "../api/admin"; import { logoutAdmin, fetchDomainList } from "../api/admin";
import { useTheme } from "../composables/useTheme";
const DOMAIN_STORAGE_KEY = "cwd_admin_domain_filter"; const DOMAIN_STORAGE_KEY = "cwd_admin_domain_filter";
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const { theme, setTheme } = useTheme();
const isMobileSiderOpen = ref(false); const isMobileSiderOpen = ref(false);
const isActionsOpen = ref(false); const isActionsOpen = ref(false);
const themeTitle = computed(() => {
if (theme.value === 'light') return '明亮模式';
if (theme.value === 'dark') return '暗黑模式';
return '跟随系统';
});
function cycleTheme() {
if (theme.value === 'system') setTheme('light');
else if (theme.value === 'light') setTheme('dark');
else setTheme('system');
}
const storedDomain = const storedDomain =
typeof window !== "undefined" typeof window !== "undefined"
? window.localStorage.getItem(DOMAIN_STORAGE_KEY) || "" ? window.localStorage.getItem(DOMAIN_STORAGE_KEY) || ""
@@ -245,8 +271,9 @@ function handleLogoutFromActions() {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 24px; padding: 0 24px;
background-color: #24292f; background-color: var(--bg-header);
color: #ffffff; color: var(--text-inverse);
border-bottom: 1px solid var(--border-header);
} }
.layout-title { .layout-title {
@@ -269,9 +296,9 @@ function handleLogoutFromActions() {
.layout-domain-select { .layout-domain-select {
padding: 6px 8px; padding: 6px 8px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #57606a; border: 1px solid var(--border-header);
background-color: #24292f; background-color: var(--bg-select);
color: #ffffff; color: var(--text-inverse);
font-size: 13px; font-size: 13px;
} }
@@ -284,15 +311,18 @@ function handleLogoutFromActions() {
text-decoration: none; text-decoration: none;
padding: 6px 10px; padding: 6px 10px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #57606a; border: 1px solid var(--border-header);
background-color: #24292f; background-color: var(--bg-select);
color: #ffffff; color: var(--text-inverse);
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
} }
.layout-button:hover { .layout-button:hover {
background-color: #32383f; background-color: var(--border-header);
} }
.layout-actions-toggle { .layout-actions-toggle {
@@ -301,9 +331,9 @@ function handleLogoutFromActions() {
justify-content: center; justify-content: center;
padding: 6px; padding: 6px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #57606a; border: 1px solid var(--border-header);
background-color: #24292f; background-color: var(--bg-select);
color: #ffffff; color: var(--text-inverse);
cursor: pointer; cursor: pointer;
} }
@@ -319,8 +349,8 @@ function handleLogoutFromActions() {
.layout-sider { .layout-sider {
width: 180px; width: 180px;
background-color: #f6f8fa; background-color: var(--bg-sider);
border-right: 1px solid #d0d7de; border-right: 1px solid var(--border-color);
} }
.menu { .menu {
@@ -333,16 +363,17 @@ function handleLogoutFromActions() {
padding: 10px 16px; padding: 10px 16px;
cursor: pointer; cursor: pointer;
font-size: 15px; font-size: 15px;
color: #24292f; color: var(--text-primary);
} }
.menu-item:hover { .menu-item:hover {
background-color: #eaeef2; background-color: var(--bg-hover);
} }
.menu-item.active { .menu-item.active {
background-color: #d0ebff; background-color: var(--bg-active);
font-weight: 600; font-weight: 600;
color: var(--primary-color);
} }
.layout-content { .layout-content {
@@ -357,9 +388,9 @@ function handleLogoutFromActions() {
justify-content: center; justify-content: center;
padding: 6px 10px; padding: 6px 10px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #57606a; border: 1px solid var(--border-header);
background-color: #24292f; background-color: var(--bg-select);
color: #ffffff; color: var(--text-inverse);
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
} }
@@ -397,7 +428,7 @@ function handleLogoutFromActions() {
bottom: 0; bottom: 0;
width: 220px; width: 220px;
max-width: 80%; max-width: 80%;
border-right: 1px solid #d0d7de; border-right: 1px solid var(--border-color);
transform: translateX(-100%); transform: translateX(-100%);
transition: transform 0.2s ease-out; transition: transform 0.2s ease-out;
z-index: 1000; z-index: 1000;
@@ -434,10 +465,10 @@ function handleLogoutFromActions() {
position: fixed; position: fixed;
top: 56px; top: 56px;
right: 12px; right: 12px;
background-color: #ffffff; background-color: var(--bg-card);
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
border-radius: 6px; border-radius: 6px;
box-shadow: 0 8px 24px rgba(140, 149, 159, 0.3); box-shadow: var(--shadow-card);
padding: 6px 0; padding: 6px 0;
min-width: 160px; min-width: 160px;
z-index: 1100; z-index: 1100;
@@ -452,20 +483,20 @@ function handleLogoutFromActions() {
border: none; border: none;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
color: #24292f; color: var(--text-primary);
width: 100%; width: 100%;
} }
.layout-actions-item:hover { .layout-actions-item:hover {
background-color: #f6f8fa; background-color: var(--bg-hover);
} }
.layout-actions-item-danger { .layout-actions-item-danger {
color: #d1242f; color: var(--color-danger);
} }
.layout-actions-item-danger:hover { .layout-actions-item-danger:hover {
background-color: #ffebe9; background-color: rgba(209, 36, 47, 0.1);
} }
} }
</style> </style>

30
cwd-admin/src/views/LoginView.vue
View File

@@ -88,15 +88,16 @@ async function handleSubmit() {
justify-content: center; justify-content: center;
min-height: 100vh; min-height: 100vh;
padding: 24px 16px; padding: 24px 16px;
background: radial-gradient(circle at top, #eef2ff 0, #f9fafb 45%, #f3f4f6 100%); background: var(--bg-body);
background: radial-gradient(circle at top, var(--bg-hover) 0, var(--bg-body) 100%);
} }
.login-card { .login-card {
background-color: #ffffff; background-color: var(--bg-card);
padding: 32px 32px 28px; padding: 32px 32px 28px;
border-radius: 12px; border-radius: 12px;
border: 1px solid #e5e7eb; border: 1px solid var(--border-color);
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12); box-shadow: var(--shadow-login);
width: 100%; width: 100%;
max-width: 420px; max-width: 420px;
box-sizing: border-box; box-sizing: border-box;
@@ -106,7 +107,7 @@ async function handleSubmit() {
margin: 0; margin: 0;
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
color: #111827; color: var(--text-primary);
letter-spacing: 0.03em; letter-spacing: 0.03em;
} }
@@ -114,7 +115,7 @@ async function handleSubmit() {
margin: 8px 0 28px; margin: 8px 0 28px;
font-size: 13px; font-size: 13px;
text-align: center; text-align: center;
color: #6b7280; color: var(--text-secondary);
} }
.login-form { .login-form {
@@ -131,28 +132,29 @@ async function handleSubmit() {
.form-label { .form-label {
font-size: 14px; font-size: 14px;
color: #4b5563; color: var(--text-secondary);
} }
.form-input { .form-input {
padding: 9px 12px; padding: 9px 12px;
border-radius: 8px; border-radius: 8px;
border: 1px solid #d1d5db; border: 1px solid var(--border-color);
font-size: 14px; font-size: 14px;
outline: none; outline: none;
background-color: #f9fafb; background-color: var(--bg-input);
color: var(--text-primary);
transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease; transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
} }
.form-input:focus { .form-input:focus {
border-color: #2563eb; border-color: var(--primary-color);
background-color: #ffffff; background-color: var(--bg-input);
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
} }
.form-error { .form-error {
font-size: 13px; font-size: 13px;
color: #dc2626; color: var(--color-danger);
margin-top: 4px; margin-top: 4px;
} }
@@ -161,8 +163,8 @@ async function handleSubmit() {
padding: 10px 0; padding: 10px 0;
border-radius: 999px; border-radius: 999px;
border: none; border: none;
background: linear-gradient(135deg, #2563eb, #1d4ed8); background: var(--primary-color);
color: #ffffff; color: var(--text-inverse);
font-size: 15px; font-size: 15px;
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;

65
cwd-admin/src/views/SettingsView.vue
View File

@@ -668,13 +668,13 @@ onMounted(() => {
.page-title { .page-title {
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
color: #24292f; color: var(--text-primary);
} }
.card { .card {
background-color: #ffffff; background-color: var(--bg-card);
border-radius: 6px; border-radius: 6px;
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
padding: 12px 18px; padding: 12px 18px;
margin-bottom: 1em; margin-bottom: 1em;
} }
@@ -693,11 +693,12 @@ onMounted(() => {
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: var(--text-primary);
} }
.card-icon { .card-icon {
font-size: 12px; font-size: 12px;
color: #57606a; color: var(--text-secondary);
transition: transform 0.2s ease; transition: transform 0.2s ease;
} }
@@ -713,12 +714,12 @@ onMounted(() => {
margin: 0 0 12px; margin: 0 0 12px;
font-size: 15px; font-size: 15px;
font-weight: 600; font-weight: 600;
color: #24292f; color: var(--text-primary);
} }
.divider { .divider {
height: 1px; height: 1px;
background-color: #d0d7de; background-color: var(--border-color);
margin: 16px 0; margin: 16px 0;
} }
@@ -731,19 +732,21 @@ onMounted(() => {
.form-label { .form-label {
font-size: 14px; font-size: 14px;
color: #555555; color: var(--text-secondary);
} }
.form-input { .form-input {
padding: 8px 10px; padding: 8px 10px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
font-size: 14px; font-size: 14px;
outline: none; outline: none;
background-color: var(--bg-input);
color: var(--text-primary);
} }
.form-input:focus { .form-input:focus {
border-color: #0969da; border-color: var(--primary-color);
box-shadow: 0 0 0 1px rgba(9, 105, 218, 0.2); box-shadow: 0 0 0 1px rgba(9, 105, 218, 0.2);
} }
@@ -757,18 +760,18 @@ onMounted(() => {
padding: 10px 14px; padding: 10px 14px;
border-radius: 6px; border-radius: 6px;
font-size: 13px; font-size: 13px;
box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2); box-shadow: var(--shadow-card);
z-index: 1000; z-index: 1000;
} }
.toast-success { .toast-success {
background-color: #1a7f37; background-color: var(--color-success);
color: #ffffff; color: var(--text-inverse);
} }
.toast-error { .toast-error {
background-color: #d1242f; background-color: var(--color-danger);
color: #ffffff; color: var(--text-inverse);
} }
.switch { .switch {
@@ -792,7 +795,7 @@ onMounted(() => {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #d0d7de; background-color: var(--border-color);
transition: 0.2s; transition: 0.2s;
border-radius: 999px; border-radius: 999px;
} }
@@ -811,7 +814,7 @@ onMounted(() => {
} }
.switch input:checked + .slider { .switch input:checked + .slider {
background-color: #0969da; background-color: var(--primary-color);
} }
.switch input:checked + .slider::before { .switch input:checked + .slider::before {
@@ -828,21 +831,21 @@ onMounted(() => {
padding: 8px 14px; padding: 8px 14px;
border-radius: 4px; border-radius: 4px;
border: none; border: none;
background-color: #0969da; background-color: var(--primary-color);
color: #ffffff; color: var(--text-inverse);
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
min-width: 100px; min-width: 100px;
} }
.card-button.secondary { .card-button.secondary {
background-color: #f6f8fa; background-color: var(--bg-sider);
color: #24292f; color: var(--text-primary);
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
} }
.card-button.secondary:hover { .card-button.secondary:hover {
background-color: #f3f4f6; background-color: var(--bg-hover);
border-color: #d0d7de; border-color: var(--border-color);
} }
.card-button:disabled { .card-button:disabled {
@@ -856,11 +859,11 @@ onMounted(() => {
} }
.form-message-success { .form-message-success {
color: #1a7f37; color: var(--color-success);
} }
.form-message-error { .form-message-error {
color: #d1242f; color: var(--color-danger);
} }
.loading-container { .loading-container {
@@ -875,15 +878,15 @@ onMounted(() => {
.loading-spinner { .loading-spinner {
width: 32px; width: 32px;
height: 32px; height: 32px;
border: 3px solid #f0f0f0; border: 3px solid var(--bg-hover);
border-top-color: #0969da; border-top-color: var(--primary-color);
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
.loading-text { .loading-text {
font-size: 14px; font-size: 14px;
color: #57606a; color: var(--text-secondary);
} }
@keyframes spin { @keyframes spin {
@@ -896,16 +899,16 @@ onMounted(() => {
} }
.page-hint { .page-hint {
font-size: 14px; font-size: 14px;
color: #57606a; color: var(--text-secondary);
} }
.form-hint { .form-hint {
font-size: 12px; font-size: 12px;
color: #57606a; color: var(--text-secondary);
margin-top: 4px; margin-top: 4px;
line-height: 1.5; line-height: 1.5;
} }
.form-hint a { .form-hint a {
color: #0969da; color: var(--primary-color);
text-decoration: none; text-decoration: none;
} }
.form-hint a:hover { .form-hint a:hover {

61
cwd-admin/src/views/StatsView.vue
View File

@@ -272,7 +272,7 @@ onBeforeUnmount(() => {
.page-title { .page-title {
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
color: #24292f; color: var(--text-primary);
} }
.toolbar { .toolbar {
@@ -292,21 +292,23 @@ onBeforeUnmount(() => {
padding: 8px 8px; padding: 8px 8px;
box-sizing: border-box; box-sizing: border-box;
font-size: 13px; font-size: 13px;
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
border-radius: 4px; border-radius: 4px;
background-color: #ffffff; background-color: var(--bg-input);
color: var(--text-primary);
} }
.card { .card {
background-color: #ffffff; background-color: var(--bg-card);
border-radius: 6px; border-radius: 6px;
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
padding: 16px 18px; padding: 16px 18px;
} }
.card-title { .card-title {
margin: 0 0 12px; margin: 0 0 12px;
font-size: 16px; font-size: 16px;
color: var(--text-primary);
} }
.card-title-row { .card-title-row {
@@ -319,18 +321,18 @@ onBeforeUnmount(() => {
.page-hint { .page-hint {
font-size: 14px; font-size: 14px;
color: #57606a; color: var(--text-secondary);
} }
.page-error { .page-error {
font-size: 14px; font-size: 14px;
color: #d1242f; color: var(--color-danger);
} }
.chart-tabs { .chart-tabs {
display: inline-flex; display: inline-flex;
border-radius: 999px; border-radius: 999px;
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
overflow: hidden; overflow: hidden;
} }
@@ -338,18 +340,18 @@ onBeforeUnmount(() => {
padding: 4px 10px; padding: 4px 10px;
font-size: 12px; font-size: 12px;
border: none; border: none;
background-color: #ffffff; background-color: var(--bg-card);
color: #57606a; color: var(--text-secondary);
cursor: pointer; cursor: pointer;
} }
.chart-tab + .chart-tab { .chart-tab + .chart-tab {
border-left: 1px solid #d0d7de; border-left: 1px solid var(--border-color);
} }
.chart-tab-active { .chart-tab-active {
background-color: #0969da; background-color: var(--primary-color);
color: #ffffff; color: var(--text-inverse);
} }
.stats-grid { .stats-grid {
@@ -361,32 +363,32 @@ onBeforeUnmount(() => {
.stats-item { .stats-item {
padding: 10px 12px; padding: 10px 12px;
border-radius: 6px; border-radius: 6px;
background-color: #f6f8fa; background-color: var(--bg-sider);
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
} }
.stats-label { .stats-label {
font-size: 14px; font-size: 14px;
color: #57606a; color: var(--text-secondary);
margin-bottom: 4px; margin-bottom: 4px;
} }
.stats-value { .stats-value {
font-size: 30px; font-size: 30px;
font-weight: 600; font-weight: 600;
color: #24292f; color: var(--text-primary);
} }
.stats-value-approved { .stats-value-approved {
color: #1a7f37; color: var(--color-success);
} }
.stats-value-pending { .stats-value-pending {
color: #9a6700; color: var(--color-warning);
} }
.stats-value-rejected { .stats-value-rejected {
color: #d1242f; color: var(--color-danger);
} }
.domain-table-wrapper { .domain-table-wrapper {
@@ -396,7 +398,7 @@ onBeforeUnmount(() => {
} }
.domain-table { .domain-table {
border: 1px solid #d0d7de; border: 1px solid var(--border-color);
border-radius: 6px; border-radius: 6px;
min-width: 520px; min-width: 520px;
overflow: hidden; overflow: hidden;
@@ -404,19 +406,20 @@ onBeforeUnmount(() => {
.domain-table-header { .domain-table-header {
display: flex; display: flex;
background-color: #f6f8fa; background-color: var(--bg-sider);
color: var(--text-secondary);
} }
.domain-table-row { .domain-table-row {
display: flex; display: flex;
border-top: 1px solid #eaeae0; border-top: 1px solid var(--border-color);
} }
.domain-cell { .domain-cell {
flex: 1; flex: 1;
padding: 10px 10px; padding: 10px 10px;
font-size: 14px; font-size: 14px;
color: #24292f; color: var(--text-primary);
box-sizing: border-box; box-sizing: border-box;
} }
@@ -444,18 +447,18 @@ onBeforeUnmount(() => {
padding: 10px 14px; padding: 10px 14px;
border-radius: 6px; border-radius: 6px;
font-size: 13px; font-size: 13px;
box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2); box-shadow: var(--shadow-card);
z-index: 1000; z-index: 1000;
} }
.toast-success { .toast-success {
background-color: #1a7f37; background-color: var(--color-success);
color: #ffffff; color: var(--text-inverse);
} }
.toast-error { .toast-error {
background-color: #d1242f; background-color: var(--color-danger);
color: #ffffff; color: var(--text-inverse);
} }
@media (max-width: 768px) { @media (max-width: 768px) {