Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import moraga from 'typography-theme-moraga'
import { toTheme } from '@theme-ui/typography'
import { merge } from 'lodash/fp'
import * as modes from './modes'
import prism from './prism'
import styles from './styles'
moraga.headerWeight = 700
const typography = toTheme(moraga)
export default merge(typography, {
initialColorMode: 'light',
// Show errors above playground editor
showLiveError: true,
// Show preview of the code inside playground
showLivePreview: true,
// Show editor when a playground is rendered
showPlaygroundEditor: true,
// Show dark/light mode switch toggle in header
showDarkModeSwitch: true,
// Display edit this page button on every page
showMarkdownEditButton: true,
// Wrap the playground editor and preview in iframes to avoid style/script collisions
useScopingInPlayground: false,
colors: {
//@ts-ignore
import moraga from 'typography-theme-moraga';
//@ts-ignore
import { toTheme } from '@theme-ui/typography';
import { merge, get } from 'lodash';
import * as modes from './modes';
import prism from './prism';
import { Theme } from '../types';
moraga.headerWeight = 700;
const typography = toTheme(moraga);
const getTheme = (theme?: Theme): Theme =>
merge(theme, typography, {
prism,
initialColorMode: 'light',
colors: {
...modes.light,
modes: {
dark: modes.dark,
},
},
fonts: {
monospace: 'Inconsolata',
},
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64],
fontWeights: {
export default props => {
const [themeName, setTheme] = useState(themeNames[0])
const typographyTheme = typographyThemes[themeName]
const theme = toTheme(typographyTheme)
theme.styles.h1 = {
fontSize: [5, 5],
}
return (
<div>
{
setTheme(e.target.value)</div>
import "typeface-montserrat"
import "typeface-merriweather"
import { toTheme } from "@theme-ui/typography"
import wordpress2016 from "typography-theme-wordpress-2016"
export default toTheme(wordpress2016)
import "typeface-montserrat"
import "typeface-merriweather"
import { toTheme } from "@theme-ui/typography"
import typography from "typography-theme-wordpress-2016"
import merge from "deepmerge"
const typographyTheme = toTheme(typography)
const innerMargin = 85
const content = 420
const darkerBlue = "#0f8f5e"
const lightBlue = "#aaf6d9"
const lighterBlue = "#ebfcf6"
const theme = merge.all([
typographyTheme,
{
colors: {
background: "#FAF9F5",
text: "rgb(51,51,51)",
darkBackground: "#202226",
lightText: "#DFDDD9",