Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Theme cleanup, expose extra reader themes

Browse Source 
This also removes synced reader preferences so everything is
per device now.
This commit is contained in:
Jackson Harper
2023-03-09 16:44:45 +08:00
parent bf0a7d2865
commit 23efda667d
16 changed files with 172 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
packages/web/components/templates/article/ReaderSettingsControl.tsx
View File

@ -520,10 +520,7 @@ function LayoutControls(props: LayoutControlsProps): JSX.Element {
function ThemeSelector(props: ReaderSettingsProps): JSX.Element {
const [currentTheme, setCurrentTheme] = useState(currentThemeName())
const isDark = useMemo(() => {
return currentTheme === 'Dark' || currentTheme === 'Darker'
}, [currentTheme])
console.log('currentTheme: ', currentTheme)
return (
<VStack
@ -563,13 +560,15 @@ function ThemeSelector(props: ReaderSettingsProps): JSX.Element {
border: '2px solid #6A6968',
},
}}
data-state={isDark ? 'unselected' : 'selected'}
data-state={currentTheme == ThemeId.Light ? 'unselected' : 'selected'}
onClick={() => {
updateTheme(ThemeId.Light)
setCurrentTheme(currentThemeName())
}}
>
{!isDark && <Check color="#6A6968" size={15} weight="bold" />}
{currentTheme == ThemeId.Light && (
<Check color="#6A6968" size={15} weight="bold" />
)}
</Button>
<Button
style="themeSwitch"
@ -591,13 +590,73 @@ function ThemeSelector(props: ReaderSettingsProps): JSX.Element {
border: '2px solid #6A6968',
},
}}
data-state={isDark ? 'selected' : 'unselected'}
data-state={currentTheme == ThemeId.Dark ? 'selected' : 'unselected'}
onClick={() => {
updateTheme(ThemeId.Dark)
setCurrentTheme(currentThemeName())
}}
>
{isDark && <Check color="#F9D354" size={20} />}
{currentTheme == ThemeId.Dark && <Check color="#F9D354" size={20} />}
</Button>
<Button
style="themeSwitch"
css={{
display: 'flex',
alignItems: 'center',
alignContent: 'center',
justifyContent: 'center',
width: '30px',
height: '30px',
background: '#FBF0D9',
borderRadius: '50%',
border: 'unset',
'&:hover': {
transform: 'scale(1.1)',
border: '2px solid #6A6968',
},
'&[data-state="selected"]': {
border: '2px solid #6A6968',
},
}}
data-state={currentTheme == ThemeId.Sepia ? 'selected' : 'unselected'}
onClick={() => {
updateTheme(ThemeId.Sepia)
setCurrentTheme(currentThemeName())
}}
>
{currentTheme == ThemeId.Sepia && <Check color="#F9D354" size={20} />}
</Button>
<Button
style="themeSwitch"
css={{
display: 'flex',
alignItems: 'center',
alignContent: 'center',
justifyContent: 'center',
width: '30px',
height: '30px',
background: '#F3F3F3',
borderRadius: '50%',
border: 'unset',
'&:hover': {
transform: 'scale(1.1)',
border: '2px solid #6A6968',
},
'&[data-state="selected"]': {
border: '2px solid #6A6968',
},
}}
data-state={
currentTheme == ThemeId.Apollo ? 'selected' : 'unselected'
}
onClick={() => {
updateTheme(ThemeId.Apollo)
setCurrentTheme(currentThemeName())
}}
>
{currentTheme == ThemeId.Apollo && (
<Check color="#F9D354" size={20} />
)}
</Button>
</HStack>
</VStack>