sha/sLogos
1
0
Fork 0
mirror of https://github.com/shadoll/sLogos.git synced 2026-02-04 11:03:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor theme switcher layout and styles for improved usability and aesthetics

Browse Source
This commit is contained in:
sHa
2025-04-30 16:17:23 +03:00
parent c28037e1a7
commit a999f219d4
1 changed files with 41 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/App.svelte
View File

@@ -195,15 +195,17 @@
<div class="header-row"> <div class="header-row">
<h1>Logo Gallery</h1> <h1>Logo Gallery</h1>
<div class="theme-switcher"> <div class="theme-switcher">
<button on:click={() => setTheme('system')} class:active={theme === 'system'} aria-label="System theme"> <div class="theme-switch-group">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2"/><path d="M10 2a8 8 0 0 1 8 8" stroke="currentColor" stroke-width="2"/></svg> <button on:click={() => setTheme('system')} class:active={theme === 'system'} aria-label="System theme">
</button> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="2"/><path d="M10 2a8 8 0 0 1 8 8" stroke="currentColor" stroke-width="2"/></svg>
<button on:click={() => setTheme('light')} class:active={theme === 'light'} aria-label="Light mode"> </button>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="5" stroke="currentColor" stroke-width="2"/><path d="M10 1v2M10 17v2M3.22 3.22l1.42 1.42M15.36 15.36l1.42 1.42M1 10h2M17 10h2M3.22 16.78l1.42-1.42M15.36 4.64l1.42-1.42" stroke="currentColor" stroke-width="2"/></svg> <button on:click={() => setTheme('light')} class:active={theme === 'light'} aria-label="Light mode">
</button> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="5" stroke="currentColor" stroke-width="2"/><path d="M10 1v2M10 17v2M3.22 3.22l1.42 1.42M15.36 15.36l1.42 1.42M1 10h2M17 10h2M3.22 16.78l1.42-1.42M15.36 4.64l1.42-1.42" stroke="currentColor" stroke-width="2"/></svg>
<button on:click={() => setTheme('dark')} class:active={theme === 'dark'} aria-label="Dark mode"> </button>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 13A7 7 0 0 1 7 4.5a7 7 0 1 0 8.5 8.5z" stroke="currentColor" stroke-width="2"/></svg> <button on:click={() => setTheme('dark')} class:active={theme === 'dark'} aria-label="Dark mode">
</button> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 13A7 7 0 0 1 7 4.5a7 7 0 1 0 8.5 8.5z" stroke="currentColor" stroke-width="2"/></svg>
</button>
</div>
</div> </div>
</div> </div>
<div class="header-row header-controls"> <div class="header-row header-controls">
@@ -483,27 +485,50 @@
margin-left: auto; margin-left: auto;
} }
.theme-switcher button { .theme-switch-group {
display: flex;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--color-border, #ccc);
background: var(--color-card, #fff);
}
.theme-switch-group button {
background: none; background: none;
border: 1px solid var(--color-border); border: none;
color: var(--color-text); color: var(--color-text);
padding: 0.2em 0.5em; padding: 0.2em 0.7em;
border-radius: 4px; font-size: 1.1rem;
cursor: pointer; border-radius: 0;
transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.theme-switcher button.active, .theme-switch-group button:first-child {
.theme-switcher button:focus { border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.theme-switch-group button:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.theme-switch-group button.active,
.theme-switch-group button:focus {
background: var(--color-accent); background: var(--color-accent);
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
outline: 2px solid var(--color-border); outline: 2px solid var(--color-border);
} }
.theme-switch-group button:hover {
background: var(--color-accent, #f0f0f0);
color: var(--color-accent-text, #4f8cff);
}
@media (max-width: 700px) { @media (max-width: 700px) {
.header-row { .header-row {
flex-direction: column; flex-direction: column;