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" title="Light"
@click="emit('set-theme', 'light')" @click="emit('set-theme', 'light')"
> >
<span class="dashicons dashicons-sun" /> <span class="user-menu__swatch user-menu__swatch--light" />
</button> </button>
<button <button
type="button" type="button"
@@ -71,15 +71,15 @@ onUnmounted(() => document.removeEventListener('click', onDocClick));
title="Dark" title="Dark"
@click="emit('set-theme', 'dark')" @click="emit('set-theme', 'dark')"
> >
<span class="dashicons dashicons-moon" /> <span class="user-menu__swatch user-menu__swatch--dark" />
</button> </button>
<button <button
type="button" type="button"
:class="{ 'is-active': theme === 'system' }" :class="{ 'is-active': theme === 'system' }"
title="System" title="Match system"
@click="emit('set-theme', 'system')" @click="emit('set-theme', 'system')"
> >
<span class="dashicons dashicons-admin-generic" /> <span class="user-menu__swatch user-menu__swatch--system" />
</button> </button>
</div> </div>
</div> </div>
@@ -245,22 +245,38 @@ onUnmounted(() => document.removeEventListener('click', onDocClick));
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 26px; width: 28px;
height: 26px; height: 28px;
border: none; border: none;
background: none; background: none;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
color: var(--aurora-text-muted); padding: 3px;
}
.user-menu__segmented button .dashicons {
font-size: 14px;
width: 14px;
height: 14px;
} }
.user-menu__segmented button.is-active { .user-menu__segmented button.is-active {
background: var(--aurora-bg); background: var(--aurora-bg);
color: var(--aurora-accent);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); 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> </style>