Add labels to colors
This commit is contained in:
parent
4375a9c24e
commit
8e31dc2186
|
@ -1,4 +1,4 @@
|
|||
import {ComponentProps} from 'react'
|
||||
import {ComponentProps, useMemo} from 'react'
|
||||
import {FAB, useTheme} from 'react-native-paper'
|
||||
import {CombinedDarkTheme, CombinedDefaultTheme} from './App'
|
||||
import {lightColors} from './colors'
|
||||
|
@ -6,9 +6,13 @@ import {lightColors} from './colors'
|
|||
export default function MassiveFab(props: Partial<ComponentProps<typeof FAB>>) {
|
||||
const {colors} = useTheme()
|
||||
|
||||
const fabColor = lightColors.includes(colors.primary)
|
||||
? CombinedDarkTheme.colors.background
|
||||
: CombinedDefaultTheme.colors.background
|
||||
const fabColor = useMemo(
|
||||
() =>
|
||||
lightColors.map(color => color.hex).includes(colors.primary)
|
||||
? CombinedDarkTheme.colors.background
|
||||
: CombinedDefaultTheme.colors.background,
|
||||
[colors.primary],
|
||||
)
|
||||
|
||||
return (
|
||||
<FAB
|
||||
|
|
|
@ -241,24 +241,14 @@ export default function SettingsPage() {
|
|||
]}
|
||||
/>
|
||||
)}
|
||||
{'date format'.includes(term.toLowerCase()) && (
|
||||
<Select
|
||||
value={date}
|
||||
onChange={changeDate}
|
||||
items={formatOptions.map(option => ({
|
||||
label: `Date format: ${format(today, option)}`,
|
||||
value: option,
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
{'color'.includes(term.toLowerCase()) && (
|
||||
<Select
|
||||
value={darkColor}
|
||||
onChange={changeDarkColor}
|
||||
items={lightColors.map(colorOption => ({
|
||||
label: 'Dark color',
|
||||
value: colorOption,
|
||||
color: colorOption,
|
||||
items={lightColors.map(color => ({
|
||||
label: `Dark color: ${color.name}`,
|
||||
value: color.hex,
|
||||
color: color.hex,
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
|
@ -266,10 +256,20 @@ export default function SettingsPage() {
|
|||
<Select
|
||||
value={lightColor}
|
||||
onChange={changeLightColor}
|
||||
items={darkColors.map(colorOption => ({
|
||||
label: 'Light color',
|
||||
value: colorOption,
|
||||
color: colorOption,
|
||||
items={darkColors.map(color => ({
|
||||
label: `Light color: ${color.name}`,
|
||||
value: color.hex,
|
||||
color: color.hex,
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
{'date format'.includes(term.toLowerCase()) && (
|
||||
<Select
|
||||
value={date}
|
||||
onChange={changeDate}
|
||||
items={formatOptions.map(option => ({
|
||||
label: `Date format: ${format(today, option)}`,
|
||||
value: option,
|
||||
}))}
|
||||
/>
|
||||
)}
|
||||
|
|
20
colors.ts
20
colors.ts
|
@ -1,19 +1,19 @@
|
|||
import {DarkTheme, DefaultTheme} from 'react-native-paper'
|
||||
|
||||
export const lightColors = [
|
||||
DarkTheme.colors.primary,
|
||||
'#B3E5FC',
|
||||
'#FA8072',
|
||||
'#FFC0CB',
|
||||
'#E9DCC9',
|
||||
'#BBA1CE',
|
||||
{hex: DarkTheme.colors.primary, name: 'Purple'},
|
||||
{hex: '#B3E5FC', name: 'Blue'},
|
||||
{hex: '#FA8072', name: 'Salmon'},
|
||||
{hex: '#FFC0CB', name: 'Pink'},
|
||||
{hex: '#E9DCC9', name: 'Linen'},
|
||||
{hex: '#BBA1CE', name: 'Light purple'},
|
||||
]
|
||||
|
||||
export const darkColors = [
|
||||
DefaultTheme.colors.primary,
|
||||
'#007AFF',
|
||||
'#000000',
|
||||
'#CD5C5C',
|
||||
{hex: DefaultTheme.colors.primary, name: 'Purple'},
|
||||
{hex: '#007AFF', name: 'Blue'},
|
||||
{hex: '#000000', name: 'Black'},
|
||||
{hex: '#CD5C5C', name: 'Red'},
|
||||
]
|
||||
|
||||
export const colorShade = (color: any, amount: number) => {
|
||||
|
|
Loading…
Reference in New Issue
Block a user