forked from mirrors/thatmattlove-hyperglass
34 lines
891 B
TypeScript
34 lines
891 B
TypeScript
import {
|
|
useBreakpointValue,
|
|
useTheme as useChakraTheme,
|
|
useColorModeValue,
|
|
useToken,
|
|
} from '@chakra-ui/react';
|
|
import type { Theme } from '~/types';
|
|
|
|
export {
|
|
useBreakpointValue,
|
|
useColorMode,
|
|
useColorModeValue as useColorValue,
|
|
useToken,
|
|
} from '@chakra-ui/react';
|
|
|
|
/**
|
|
* Determine if device is mobile or desktop based on Chakra UI theme breakpoints.
|
|
*/
|
|
export const useMobile = (): boolean =>
|
|
useBreakpointValue<boolean>({ base: true, md: true, lg: false, xl: false }) ?? true;
|
|
|
|
/**
|
|
* Get the current theme object.
|
|
*/
|
|
export const useTheme = (): Theme.Full => useChakraTheme();
|
|
|
|
/**
|
|
* Convenience function to combine Chakra UI's useToken & useColorModeValue.
|
|
*/
|
|
export const useColorToken = <L extends string, D extends string>(
|
|
token: keyof Theme.Full,
|
|
light: L,
|
|
dark: D,
|
|
): L | D => useColorModeValue<L, D>(useToken(token, light), useToken(token, dark));
|