How to use theme-ui - 10 common examples
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 default props => {
const context = useThemeUI()
const [status, setStatus] = useState()
const save = async e => {
e.preventDefault()
setStatus('saving')
const theme = JSON.stringify(context.theme, null, 2)
const res = await ky.post('/___theme', {
json: {
theme,
},
})
if (!res.ok) setStatus('error')
else setStatus(null)
// const text = await res.text()
}/** @jsx jsx */
import { jsx, Global } from '@emotion/core'
import { css } from 'theme-ui'
import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button'
// css prop doesn't work with reach ui
// styles must be global due to how portals are used
const styles = css({
':root': {
'--reach-menu-button': 1
},
'[data-reach-menu]': {
display: 'block',
position: 'absolute'
},
'[data-reach-menu-list]': {
display: 'block',
position: 'relative',
whiteSpace: 'nowrap',
border: '1px solid lightgray',
backgroundColor: 'white',
outline: 'none',
zIndex: 101
},/** @jsx jsx */
import 'babel-polyfill';
import ReactDOM from 'react-dom';
import {jsx, Styled} from 'theme-ui';
import {Link as RouterLink} from 'react-router-dom';
/* MDX */
export const H1 = Styled.h1;
export const H2 = Styled.h2;
export const H3 = Styled.h3;
export const H4 = Styled.h4;
export const P = Styled.p;
export const Li = Styled.li;
export const Ol = Styled.ol;
/* Layout/Variant */
export const Main = ({children}) => <main>{children}</main>;
export const Section = ({children}) => <section>{children}</section>;
export const Header = ({children}) => <header>{children}</header>;
export const Nav = ({children}) => <nav>{children}</nav>;
export const Footer = ({children}) => <footer>{children}</footer>;
export const Link = ({a, children}) => (/** @jsx jsx */
import 'babel-polyfill';
import ReactDOM from 'react-dom';
import {jsx, Styled} from 'theme-ui';
import {Link as RouterLink} from 'react-router-dom';
/* MDX */
export const H1 = Styled.h1;
export const H2 = Styled.h2;
export const H3 = Styled.h3;
export const H4 = Styled.h4;
export const P = Styled.p;
export const Li = Styled.li;
export const Ol = Styled.ol;
/* Layout/Variant */
export const Main = ({children}) => <main>{children}</main>;
export const Section = ({children}) => <section>{children}</section>;
export const Header = ({children}) => <header>{children}</header>;
export const Nav = ({children}) => <nav>{children}</nav>;
export const Footer = ({children}) => <footer>{children}</footer>;
export const Link = ({a, children}) => (
{children}/** @jsx jsx */
import 'babel-polyfill';
import ReactDOM from 'react-dom';
import {jsx, Styled} from 'theme-ui';
import {Link as RouterLink} from 'react-router-dom';
/* MDX */
export const H1 = Styled.h1;
export const H2 = Styled.h2;
export const H3 = Styled.h3;
export const H4 = Styled.h4;
export const P = Styled.p;
export const Li = Styled.li;
export const Ol = Styled.ol;
/* Layout/Variant */
export const Main = ({children}) => <main>{children}</main>;
export const Section = ({children}) => <section>{children}</section>;
export const Header = ({children}) => <header>{children}</header>;
export const Nav = ({children}) => <nav>{children}</nav>;
export const Footer = ({children}) => <footer>{children}</footer>;
export const Link = ({a, children}) => (
{children}/** @jsx jsx */
import 'babel-polyfill';
import ReactDOM from 'react-dom';
import {jsx, Styled} from 'theme-ui';
import {Link as RouterLink} from 'react-router-dom';
/* MDX */
export const H1 = Styled.h1;
export const H2 = Styled.h2;
export const H3 = Styled.h3;
export const H4 = Styled.h4;
export const P = Styled.p;
export const Li = Styled.li;
export const Ol = Styled.ol;
/* Layout/Variant */
export const Main = ({children}) => <main>{children}</main>;
export const Section = ({children}) => <section>{children}</section>;
export const Header = ({children}) => <header>{children}</header>;
export const Nav = ({children}) => <nav>{children}</nav>;
export const Footer = ({children}) => <footer>{children}</footer>;
export const Link = ({a, children}) => (
{children}
);/** @jsx jsx */
import 'babel-polyfill';
import ReactDOM from 'react-dom';
import {jsx, Styled} from 'theme-ui';
import {Link as RouterLink} from 'react-router-dom';
/* MDX */
export const H1 = Styled.h1;
export const H2 = Styled.h2;
export const H3 = Styled.h3;
export const H4 = Styled.h4;
export const P = Styled.p;
export const Li = Styled.li;
export const Ol = Styled.ol;
/* Layout/Variant */
export const Main = ({children}) => <main>{children}</main>;
export const Section = ({children}) => <section>{children}</section>;
export const Header = ({children}) => <header>{children}</header>;
export const Nav = ({children}) => <nav>{children}</nav>;
export const Footer = ({children}) => <footer>{children}</footer>;
export const Link = ({a, children}) => (
{children}
);
/*
/** @jsx jsx */
import 'babel-polyfill';
import ReactDOM from 'react-dom';
import {jsx, Styled} from 'theme-ui';
import {Link as RouterLink} from 'react-router-dom';
/* MDX */
export const H1 = Styled.h1;
export const H2 = Styled.h2;
export const H3 = Styled.h3;
export const H4 = Styled.h4;
export const P = Styled.p;
export const Li = Styled.li;
export const Ol = Styled.ol;
/* Layout/Variant */
export const Main = ({children}) => <main>{children}</main>;
export const Section = ({children}) => <section>{children}</section>;
export const Header = ({children}) => <header>{children}</header>;
export const Nav = ({children}) => <nav>{children}</nav>;
export const Footer = ({children}) => <footer>{children}</footer>;
export const Link = ({a, children}) => (
{children}
);
/*
MDX elements that can be rendered outside of markdown/** @jsx jsx */
import 'babel-polyfill';
import ReactDOM from 'react-dom';
import {jsx, Styled} from 'theme-ui';
import {Link as RouterLink} from 'react-router-dom';
/* MDX */
export const H1 = Styled.h1;
export const H2 = Styled.h2;
export const H3 = Styled.h3;
export const H4 = Styled.h4;
export const P = Styled.p;
export const Li = Styled.li;
export const Ol = Styled.ol;
/* Layout/Variant */
export const Main = ({children}) => <main>{children}</main>;
export const Section = ({children}) => <section>{children}</section>;
export const Header = ({children}) => <header>{children}</header>;
export const Nav = ({children}) => <nav>{children}</nav>;
export const Footer = ({children}) => <footer>{children}</footer>;
export const Link = ({a, children}) => (
{children}
);
/* 
