prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Work on dark mode

Browse source
This commit is contained in:
Jackson Harper 2023-03-03 12:15:02 +08:00
parent e09aaf0347
commit 3eb74251da
11 changed files with 86 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/web/components/elements/LabelChip.tsx
View file

@ -42,7 +42,7 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
display: 'inline-table',
margin: '2px',
borderRadius: '4px',
color: isDarkMode ? darkThemeTextColor : lightThemeTextColor,
color: lightThemeTextColor,
fontSize: '13px',
fontWeight: '500',
padding: '3px 6px',

2
packages/web/components/elements/StyledText.tsx
View file

@ -184,7 +184,7 @@ const textVariants = {
fontWeight: '500',
fontSize: '12px',
lineHeight: '20px',
color: '#6A6968',
color: '$thTextSubtle2',
},
error: {
color: '$error',

12
packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
View file

@ -95,7 +95,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
borderRadius: '5px',
borderWidth: '1px',
borderStyle: 'solid',
borderColor: '#E1E1E1',
borderColor: '$thBorderColor',
cursor: 'pointer',
}}
alignment="start"
@ -118,7 +118,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
<HStack
css={{
width: '100%',
color: '#6A6968',
color: '$thTextSubtle2',
fontSize: '13px',
fontWeight: '400',
fontFamily: 'SF Pro',
@ -172,7 +172,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
>
<Box
css={{
color: 'rgba(61, 61, 61, 1)',
color: '$thTextContrast2',
fontSize: '20px',
fontWeight: '700',
lineHeight: '1.25',
@ -190,7 +190,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
</Box>
<Box
css={{
color: '#3D3D3D',
color: '$thTextSubtle',
pt: '10px',
fontSize: '13px',
fontWeight: '400',
@ -210,7 +210,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
<HStack
css={{
pt: '10px',
color: '#898989',
color: '$thTextSubtle3',
fontSize: '13px',
fontWeight: '400',
fontFamily: 'SF Pro',
@ -246,7 +246,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
<ProgressBar
fillPercentage={props.item.readingProgressPercent}
fillColor="#FFD234"
backgroundColor="#EEEEEE"
backgroundColor="$thBorderSubtle"
borderRadius="5px"
/>
</SpanBox>

6
packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
View file

@ -101,7 +101,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
<HStack
css={{
width: '100%',
color: '#6A6968',
color: '$thTextSubtle2',
fontSize: '10px',
fontWeight: '500',
fontFamily: 'SF Pro',
@ -162,7 +162,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
>
<Box
css={{
color: 'rgba(61, 61, 61, 1)',
color: '$thTextContrast2',
fontSize: '16px',
fontWeight: '700',
lineHeight: '1.25',
@ -180,7 +180,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
</Box>
<HStack
css={{
color: '#898989',
color: '$thTextSubtle3',
fontSize: '11px',
fontWeight: '400',
fontFamily: 'SF Pro',

4
packages/web/components/templates/PrimaryLayout.tsx
View file

@ -86,7 +86,7 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
height: '100vh',
bg: 'transparent',
'@smDown': {
bg: '$grayBase',
bg: '$thBackground2',
},
}}
>
@ -94,7 +94,7 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
css={{
height: '100%',
width: '100vw',
bg: '$grayBase',
bg: '$thBackground2',
}}
>
{props.children}

2
packages/web/components/templates/article/ReaderSettingsControl.tsx
View file

@ -94,7 +94,7 @@ function FontControls(props: FontControlsProps): JSX.Element {
alignItems: 'center',
fontSize: '12px',
background: '#FFFFFF',
border: '1px sold #E1E1E1',
border: '1px sold $thBorderColor',
fontFamily: props.readerSettings.fontFamily,
textTransform: 'capitalize',
borderRadius: '4px',

20
packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
View file

@ -770,24 +770,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
<Toaster />
{props.isValidating && props.items.length == 0 && <TopBarProgress />}
{/*
<SpanBox
css={{
width: '100%',
'@md': {
display: 'none',
},
}}
>
<LegacyMobileTopNav
viewer={viewerData?.me}
searchTerm={props.searchTerm}
applySearchQuery={props.applySearchQuery}
layout={layout}
updateLayout={updateLayout}
setShowAddLinkModal={props.setShowAddLinkModal}
/>
</SpanBox> */}
<Dropzone
onDrop={handleDrop}
@ -921,7 +903,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
css={{
width: '100%',
'&> div': {
bg: '$grayBg',
bg: '$thBackground3',
},
'&:focus': {
'> div': {

36
packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
View file

@ -7,6 +7,8 @@ import { CaretRight, Circle, DotsThree, Plus } from 'phosphor-react'
import { useGetSubscriptionsQuery } from '../../../lib/networking/queries/useGetSubscriptionsQuery'
import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
import { Label } from '../../../lib/networking/fragments/labelFragment'
import { theme } from '../../tokens/stitches.config'
import { currentThemeName } from '../../../lib/themeUpdater'
export const LIBRARY_LEFT_MENU_WIDTH = '300px'
@ -28,10 +30,10 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
left: '0px',
top: '105px',
position: 'fixed',
bg: 'white',
bg: '$thBackground',
height: '100%',
width: LIBRARY_LEFT_MENU_WIDTH,
borderRight: '1px solid #E1E1E1',
borderRight: '1px solid $thBorderColor',
overflowY: 'auto',
overflowX: 'hidden',
'&::-webkit-scrollbar': {
@ -75,7 +77,7 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
css={{
minWidth: LIBRARY_LEFT_MENU_WIDTH,
height: '100%',
bg: '$grayBase',
bg: '$thBackground',
'@mdDown': {
display: 'none',
},
@ -163,7 +165,7 @@ function MenuPanel(props: MenuPanelProps): JSX.Element {
css={{
m: '0px',
width: '100%',
borderBottom: '1px solid #E1E1E1',
borderBottom: '1px solid $thBorderColor',
px: '15px',
}}
alignment="start"
@ -176,7 +178,7 @@ function MenuPanel(props: MenuPanelProps): JSX.Element {
fontWeight: '600',
fontSize: '16px',
lineHeight: '125%',
color: '#1E1E1E',
color: '$thTextContrast',
pl: '10px',
my: '20px',
}}
@ -207,7 +209,11 @@ function MenuPanel(props: MenuPanelProps): JSX.Element {
},
}}
>
<DotsThree size={25} weight="bold" color="#BEBEBE" />
<DotsThree
size={25}
weight="bold"
color={theme.colors.thTextSubtle.toString()}
/>
</Box>
}
>
@ -258,11 +264,11 @@ function FilterButton(props: FilterButtonProps): JSX.Element {
width: '100%',
maxWidth: '100%',
height: '32px',
backgroundColor: selected ? '#FFEA9F' : 'unset',
backgroundColor: selected ? '$thBackground2' : 'unset',
fontSize: '14px',
fontWeight: 'regular',
fontFamily: 'SF Pro Text',
color: '#3D3D3D',
color: '$thTextSubtle',
verticalAlign: 'middle',
borderRadius: '3px',
cursor: 'pointer',
@ -314,7 +320,7 @@ function LabelButton(props: LabelButtonProps): JSX.Element {
height: '30px',
fontSize: '16px',
fontWeight: 'regular',
color: '#3D3D3D',
color: '$thTextSubtle',
verticalAlign: 'middle',
borderRadius: '3px',
m: '0px',
@ -358,6 +364,10 @@ type AddLinkButtonProps = {
}
function AddLinkButton(props: AddLinkButtonProps): JSX.Element {
const currentTheme = currentThemeName()
const isDark = currentTheme == 'Dark'
console.log('current theme: ', isDark)
return (
<>
<VStack
@ -376,10 +386,16 @@ function AddLinkButton(props: AddLinkButtonProps): JSX.Element {
pr: '20px',
fontSize: '14px',
verticalAlign: 'center',
color: '#3D3D3D',
color: isDark
? theme.colors.thHighContrast.toString()
: theme.colors.thTextContrast2.toString(),
display: 'flex',
alignItems: 'center',
fontWeight: '600',
bg: isDark ? 'transparent' : theme.colors.thBackground2.toString(),
border: `1px solid ${
isDark ? theme.colors.thHighContrast.toString() : 'transparent'
}`,
}}
onClick={(e) => {
props.showAddLinkModal()

10
packages/web/components/templates/homeFeed/LibraryHeader.tsx
View file

@ -43,9 +43,9 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
position: 'fixed',
width: '100%',
height: HEADER_HEIGHT,
bg: 'white',
bg: '$thBackground',
pt: '35px',
borderBottom: '1px solid #E1E1E1',
borderBottom: '1px solid $thBorderColor',
'@mdDown': {
height: MOBILE_HEIGHT,
pt: '0px',
@ -178,9 +178,11 @@ export function SearchBox(props: SearchBoxProps): JSX.Element {
width: '100%',
maxWidth: '521px',
mr: '15px',
bg: '#F3F3F3',
bg: '$thBackground2',
borderRadius: '6px',
border: focused ? '1px solid $omnivoreCtaYellow' : '1px solid #D9D9D9',
border: focused
? '1px solid $omnivoreCtaYellow'
: '1px solid $thBorderColor',
}}
>
<HStack

4
packages/web/components/templates/reader/ReaderHeader.tsx
View file

@ -33,8 +33,8 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
'@lgDown': {
height: MOBILE_HEIGHT,
pt: '0px',
bg: '$grayBg',
borderBottom: '1px solid #E1E1E1',
bg: '$thBackground',
borderBottom: '1px solid $thBorderColor',
},
}}
>

38
packages/web/components/tokens/stitches.config.ts
View file

@ -169,6 +169,24 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
//utility
textNonEssential: 'rgba(10, 8, 6, 0.4)',
overlay: 'rgba(63, 62, 60, 0.2)',
// New theme, special naming to keep things straigh
// once all switch over, we will rename
thBackground: '#FFFFFF',
thBackground2: '#F3F3F3',
thBackground3: '#FFFFFF',
thTextContrast: '#1E1E1E',
thTextContrast2: '#3D3D3D',
thTextSubtle: '#1E1E1E',
thTextSubtle2: '#6A6968',
thTextSubtle3: '#ADADAD',
thBorderColor: '#E1E1E1',
thBorderSubtle: '#EEEEEE',
thHighContrast: '#D9D9D9',
},
},
media: {
@ -232,6 +250,24 @@ const darkThemeSpec = {
overlay: 'rgba(10, 8, 6, 0.65)',
labelButtonsBg: '#5F5E58',
// New theme, special naming to keep things straigh
// once all switch over, we will rename
// DARK
thBackground: '#2A2A2A',
thBackground2: '#3D3D3D',
thBackground3: '#242424',
thTextContrast: '#FFFFFF',
thTextContrast2: '#EBEBEB',
thTextSubtle: '#D9D9D9',
thTextSubtle2: '#D9D9D9',
thTextSubtle3: '#ADADAD',
thBorderColor: '#4F4F4F',
thBorderSubtle: '#6A6968',
thHighContrast: '#D9D9D9',
},
shadows: {
cardBoxShadow:
@ -281,7 +317,7 @@ export const lighterTheme = createTheme(ThemeId.Lighter, {})
// Apply global styles in here
export const globalStyles = globalCss({
body: {
backgroundColor: '$grayBase',
backgroundColor: '$thBackground2',
},
'*': {
'&:focus': {