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

Added code to lighten up the labels in dark mode

Browse source
This commit is contained in:
Rupin Khandelwal 2022-07-12 21:52:51 +00:00
parent 8637651be9
commit ef31cb7199
1 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,9 @@
import { getLuminance } from 'color2k'
import { getLuminance, lighten, toHsla } from 'color2k'
import { useRouter } from 'next/router'
import { Button } from './Button'
import { SpanBox } from './LayoutPrimitives'
import { isDarkTheme } from '../../lib/themeUpdater'
type LabelChipProps = {
text: string
color: string // expected to be a RGB hex color string
@ -21,7 +22,13 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
}
const isDarkMode = isDarkTheme()
const luminance = getLuminance(props.color)
const lightenColor = lighten(props.color, 0.5)
const color = hexToRgb(props.color)
const darkThemeTextColor =
luminance > 0.4
? `rgba(${color[0]}, ${color[1]}, ${color[2]}, 1)`
: lightenColor
const lightThemeTextColor = luminance > 0.5 ? '#000000' : '#ffffff'
return (
<Button
style="plainIcon"
@ -35,11 +42,7 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
display: 'inline-table',
margin: '4px',
borderRadius: '32px',
color: isDarkMode
? `rgba(${color[0]}, ${color[1]}, ${color[2]}, 1)`
: luminance > 0.5
? '#000000'
: '#ffffff',
color: isDarkMode ? darkThemeTextColor : lightThemeTextColor,
fontSize: '12px',
fontWeight: 'bold',
padding: '2px 5px 2px 5px',