R3ap3r/aurora-wordpress-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use color swatches for the theme control instead of icons

Browse Source
This commit is contained in:
Kris Parish
2026-07-03 03:13:22 -05:00
parent 49bb4cf4f4
commit e1bd095682
1 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/shell/components/UserMenu.vue
+29 -13
View File
@@ -63,7 +63,7 @@ onUnmounted(() => document.removeEventListener('click', onDocClick));
title="Light"
@click="emit('set-theme', 'light')"
>
<span class="dashicons dashicons-sun" />
<span class="user-menu__swatch user-menu__swatch--light" />
</button>
<button
type="button"
@@ -71,15 +71,15 @@ onUnmounted(() => document.removeEventListener('click', onDocClick));
title="Dark"
@click="emit('set-theme', 'dark')"
>
<span class="dashicons dashicons-moon" />
<span class="user-menu__swatch user-menu__swatch--dark" />
</button>
<button
type="button"
:class="{ 'is-active': theme === 'system' }"
title="System"
title="Match system"
@click="emit('set-theme', 'system')"
>
<span class="dashicons dashicons-admin-generic" />
<span class="user-menu__swatch user-menu__swatch--system" />
</button>
</div>
</div>
@@ -245,22 +245,38 @@ onUnmounted(() => document.removeEventListener('click', onDocClick));
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
width: 28px;
height: 28px;
border: none;
background: none;
border-radius: 6px;
cursor: pointer;
color: var(--aurora-text-muted);
}
.user-menu__segmented button .dashicons {
font-size: 14px;
width: 14px;
height: 14px;
padding: 3px;
}
.user-menu__segmented button.is-active {
background: var(--aurora-bg);
color: var(--aurora-accent);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.user-menu__swatch {
display: block;
width: 100%;
height: 100%;
border-radius: 4px;
border: 1px solid rgba(127, 127, 127, 0.35);
box-sizing: border-box;
}
.user-menu__swatch--light {
background: #ffffff;
}
.user-menu__swatch--dark {
background: #18181b;
}
.user-menu__swatch--system {
background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #18181b 50%, #18181b 100%);
}
.user-menu__segmented button.is-active .user-menu__swatch {
border-color: var(--aurora-accent);
box-shadow: 0 0 0 1px var(--aurora-accent);
}
</style>