Site settings
Change the appearance of the site to suit your preferences
Using color tokens and mode
A guide to managing color mode in your application and using Spor tokens for consistent theming.
🎨 Using Design Tokens in Spor
Spor provides design tokens that automatically adapt to light and dark mode. When using tokens like brand.surface or text.inverted, the colors will automatically switch based on the active theme.
🟢 Example: Background and Text Tokens
<Box backgroundColor="brand.surface" padding={4} borderRadius="sm"> <Text color="text.inverted"> Some text </Text> </Box>
Using these tokens ensures your UI remains consistent across themes without requiring manual color adjustments.
📌 Pro Tip: Avoid hardcoding colors. Instead, always use Spor’s design tokens for automatic theme adjustments.
🌗 Changing Color Mode
To manage color mode in your app, Spor exports Chakra UI’s useColorMode and useColorModeValue hooks.
🔄 useColorMode
Use useColorMode to retrieve the current color mode and toggle between modes.
() => { const { colorMode, toggleColorMode } = useColorMode() return ( <Box> <Button onClick={toggleColorMode}> Change to {colorMode === 'light' ? 'dark' : 'light'} </Button> </Box> ) }
🎨 useColorModeValue
useColorModeValue returns different values based on the active color mode. However, you should primarily use design tokens instead of useColorModeValue.
📌 Use useColorModeValue only if there is no available design token for the color you need.
import { useColorModeValue } from "@vygruppen/spor-react";const colorValues = useColorModeValue(lightValue, darkValue);
Example: When to Use useColorModeValue
If there’s no specific token for a color (e.g., a custom alias), you can use useColorModeValue:
() => { const { toggleColorMode } = useColorMode() const bg = useColorModeValue('darkTeal', 'mint') const color = useColorModeValue('white', 'darkTeal') return ( <> <Box marginBottom={4} padding={3} borderRadius="md" bg={bg} color={color}> This Box and text will change style based on the color mode. </Box> <Box> <Button onClick={toggleColorMode}> Toggle Color Mode </Button> </Box> </> ) }
📌 Whenever possible, use design tokens instead of useColorModeValue for better maintainability and consistency.
🚫 Forcing a Specific Color Mode
In some cases, you may want a component to always stay in light or dark mode, regardless of the app’s color mode. Use className light or dark to accomplish this.
<Stack gap={3}> <Box className="light"> <Button variant="primary">This is always light mode</Button> </Box> <Box className="dark"> <Button variant="primary">This is always dark mode</Button> </Box> </Stack>
📌 Use this approach sparingly—only when you need a component to be color mode-independent.
By following these guidelines, you can efficiently manage color modes while ensuring accessibility, performance, and future compatibility! 🚀