Feature(custom): support theme system and add a new theme hub for piclist

This commit is contained in:
Kuingsmile
2026-01-14 23:00:07 +08:00
parent d98f955a76
commit 50a59a124a
55 changed files with 1440 additions and 1621 deletions

View File

@@ -122,7 +122,7 @@
border-radius: 12px;
width: 44px;
height: 24px;
background: var(--color-border);
background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
transition: all 0.3s ease;
flex-shrink: 0;
}
@@ -141,7 +141,7 @@
}
.switch-input:checked + .switch-slider {
background: var(--color-blue-common);
background: var(--color-accent);
}
.switch-input:checked + .switch-slider::before {
@@ -342,97 +342,3 @@ select.form-input:focus {
align-items: flex-start;
}
}
/* Dark mode styles */
:root.dark .map-settings-panel,
:root.auto.dark .map-settings-panel {
border-color: var(--color-border);
background: var(--color-background-tertiary);
box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
}
:root.dark .picbed-setting-item,
:root.auto.dark .picbed-setting-item {
border-color: var(--color-border);
background: var(--color-surface);
}
:root.dark .picbed-setting-item:hover,
:root.auto.dark .picbed-setting-item:hover {
border-color: var(--color-primary);
box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
}
:root.dark .form-input,
:root.dark .form-color,
:root.auto.dark .form-input,
:root.auto.dark .form-color {
border-color: var(--color-border);
color: var(--color-text-primary);
background: var(--color-surface);
}
:root.dark .form-input:focus,
:root.dark .form-color:focus,
:root.auto.dark .form-input:focus,
:root.auto.dark .form-color:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgb(64 158 255 / 30%);
}
:root.dark .btn-secondary,
:root.auto.dark .btn-secondary {
border-color: var(--color-border);
color: var(--color-text-secondary);
background: var(--color-surface);
}
:root.dark .btn-secondary:hover,
:root.auto.dark .btn-secondary:hover {
border-color: var(--color-border-hover);
color: var(--color-text-primary);
background: var(--color-background-tertiary);
}
:root.dark .switch-slider::before,
:root.auto.dark .switch-slider::before {
background: var(--color-surface);
}
:root.dark .radio-option.small,
:root.auto.dark .radio-option.small {
border-color: var(--color-border);
background: var(--color-surface);
}
:root.dark .radio-option.small:hover,
:root.auto.dark .radio-option.small:hover {
border-color: var(--color-primary);
background: rgb(64 158 255 / 20%);
}
:root.dark .radio-indicator,
:root.auto.dark .radio-indicator {
border-color: var(--color-border);
background: var(--color-surface);
}
:root.dark .radio-input:checked + .radio-indicator,
:root.auto.dark .radio-input:checked + .radio-indicator {
border-color: var(--color-primary);
}
:root.dark .radio-input:checked + .radio-indicator::after,
:root.auto.dark .radio-input:checked + .radio-indicator::after {
background: var(--color-primary);
}
:root.dark select.form-input,
:root.auto.dark select.form-input {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
:root.dark select.form-input:focus,
:root.auto.dark select.form-input:focus {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23409eff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}