Update binding icon styles and fix theme editor

This commit is contained in:
Andrew Kingston 2021-04-19 14:10:58 +01:00
parent 90bcd87d24
commit 7c52196c61
3 changed files with 10 additions and 20 deletions

View File

@ -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)

View File

@ -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;
} }

View File

@ -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>