How to use the theme-ui.get function in theme-ui
To help you get started, weβve selected a few theme-ui examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
jxnblk / gatsby-theme-mdx-blog / example / src / @jxnblk / gatsby-theme-mdx-blog / colors.js View on Github 
// imports seem to be broken
// import { colors } from '@jxnblk/gatsby-theme-mdx-blog'
// console.log(colors)
import colors from '@jxnblk/gatsby-theme-mdx-blog/src/colors'
import { get } from 'theme-ui'
// Colors for the theme can be configured by shadowing this file
export default {
...colors,
modes: {
dark: get(colors, 'modes.dark'),
book: {
text: '#321',
background: '#fefdf6',
primary: '#a20',
secondary: '#810',
muted: '#f0f0e6',
}
}
}export const ColorSwatch = ({ color, name, size = 128, ...props }) => {
const { colors } = useTheme()
const value = get(colors, color)
return (
<div title="{`${toHex(value)}`}">
<div>
<div>
{name || color}
</div>
</div></div>row.map(({ x, y }) =>
)const handleClick = ({ type, x, y }) => e => {
const i = get(colors, `${y}.${x}.${type}`, 0)
const n = shift ? 0 : (i + 1) % colorNames.length
setColors(state => merge(state, {
[y]: {
[x]: {
[type]: n,
}
}
}))
}
