Update binding icon styles and fix theme editor
This commit is contained in:
parent
90bcd87d24
commit
7c52196c61
|
@ -5,19 +5,8 @@ export const getThemeStore = () => {
|
||||||
const initialValue = {
|
const initialValue = {
|
||||||
darkMode: true,
|
darkMode: true,
|
||||||
}
|
}
|
||||||
|
|
||||||
const store = localStorageStore("bb-theme", initialValue)
|
const store = localStorageStore("bb-theme", initialValue)
|
||||||
|
|
||||||
// Resets the custom theme to the default dark theme.
|
|
||||||
// The reset option is only available when dark theme is on, which is why it
|
|
||||||
// sets dark mode to true here
|
|
||||||
store.reset = () => {
|
|
||||||
store.set({
|
|
||||||
...initialValue,
|
|
||||||
darkMode: true,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update theme when store changes
|
// Update theme when store changes
|
||||||
store.subscribe(theme => {
|
store.subscribe(theme => {
|
||||||
themeElement.classList.toggle("spectrum--darkest", theme.darkMode)
|
themeElement.classList.toggle("spectrum--darkest", theme.darkMode)
|
||||||
|
|
|
@ -138,18 +138,19 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
right: 2px;
|
right: 1px;
|
||||||
top: 2px;
|
top: 1px;
|
||||||
bottom: 2px;
|
bottom: 1px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-left: 7px;
|
padding-left: 4px;
|
||||||
border-left: 1px solid var(--grey-4);
|
padding-right: 2px;
|
||||||
background-color: var(--grey-2);
|
border-left: 1px solid var(--spectrum-alias-border-color);
|
||||||
border-top-right-radius: var(--border-radius-m);
|
background-color: var(--spectrum-global-color-gray-50);
|
||||||
border-bottom-right-radius: var(--border-radius-m);
|
border-top-right-radius: var(--spectrum-alias-border-radius-regular);
|
||||||
|
border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
|
||||||
color: var(--grey-7);
|
color: var(--grey-7);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div>
|
<div>
|
||||||
<Toggle thin text="Dark theme" bind:checked={$themeStore.darkMode} />
|
<Toggle text="Dark theme" bind:value={$themeStore.darkMode} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue