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 {FAB, useTheme} from 'react-native-paper'
|
||||||
import {CombinedDarkTheme, CombinedDefaultTheme} from './App'
|
import {CombinedDarkTheme, CombinedDefaultTheme} from './App'
|
||||||
import {lightColors} from './colors'
|
import {lightColors} from './colors'
|
||||||
|
@ -6,9 +6,13 @@ import {lightColors} from './colors'
|
||||||
export default function MassiveFab(props: Partial<ComponentProps<typeof FAB>>) {
|
export default function MassiveFab(props: Partial<ComponentProps<typeof FAB>>) {
|
||||||
const {colors} = useTheme()
|
const {colors} = useTheme()
|
||||||
|
|
||||||
const fabColor = lightColors.includes(colors.primary)
|
const fabColor = useMemo(
|
||||||
? CombinedDarkTheme.colors.background
|
() =>
|
||||||
: CombinedDefaultTheme.colors.background
|
lightColors.map(color => color.hex).includes(colors.primary)
|
||||||
|
? CombinedDarkTheme.colors.background
|
||||||
|
: CombinedDefaultTheme.colors.background,
|
||||||
|
[colors.primary],
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FAB
|
<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()) && (
|
{'color'.includes(term.toLowerCase()) && (
|
||||||
<Select
|
<Select
|
||||||
value={darkColor}
|
value={darkColor}
|
||||||
onChange={changeDarkColor}
|
onChange={changeDarkColor}
|
||||||
items={lightColors.map(colorOption => ({
|
items={lightColors.map(color => ({
|
||||||
label: 'Dark color',
|
label: `Dark color: ${color.name}`,
|
||||||
value: colorOption,
|
value: color.hex,
|
||||||
color: colorOption,
|
color: color.hex,
|
||||||
}))}
|
}))}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
@ -266,10 +256,20 @@ export default function SettingsPage() {
|
||||||
<Select
|
<Select
|
||||||
value={lightColor}
|
value={lightColor}
|
||||||
onChange={changeLightColor}
|
onChange={changeLightColor}
|
||||||
items={darkColors.map(colorOption => ({
|
items={darkColors.map(color => ({
|
||||||
label: 'Light color',
|
label: `Light color: ${color.name}`,
|
||||||
value: colorOption,
|
value: color.hex,
|
||||||
color: colorOption,
|
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'
|
import {DarkTheme, DefaultTheme} from 'react-native-paper'
|
||||||
|
|
||||||
export const lightColors = [
|
export const lightColors = [
|
||||||
DarkTheme.colors.primary,
|
{hex: DarkTheme.colors.primary, name: 'Purple'},
|
||||||
'#B3E5FC',
|
{hex: '#B3E5FC', name: 'Blue'},
|
||||||
'#FA8072',
|
{hex: '#FA8072', name: 'Salmon'},
|
||||||
'#FFC0CB',
|
{hex: '#FFC0CB', name: 'Pink'},
|
||||||
'#E9DCC9',
|
{hex: '#E9DCC9', name: 'Linen'},
|
||||||
'#BBA1CE',
|
{hex: '#BBA1CE', name: 'Light purple'},
|
||||||
]
|
]
|
||||||
|
|
||||||
export const darkColors = [
|
export const darkColors = [
|
||||||
DefaultTheme.colors.primary,
|
{hex: DefaultTheme.colors.primary, name: 'Purple'},
|
||||||
'#007AFF',
|
{hex: '#007AFF', name: 'Blue'},
|
||||||
'#000000',
|
{hex: '#000000', name: 'Black'},
|
||||||
'#CD5C5C',
|
{hex: '#CD5C5C', name: 'Red'},
|
||||||
]
|
]
|
||||||
|
|
||||||
export const colorShade = (color: any, amount: number) => {
|
export const colorShade = (color: any, amount: number) => {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user