Styled-JSX Theming Library
An opinionated theming library for your Styled-JSX projects to develop stylesheets faster.
This can be easily used for other React styling libraries as well, but it was designed for Styled-JSX which I primarily use.
Getting Started
First, install the package:
npm i styled-jsx-theming
Alternatively, if you use Yarn:
yarn add styled-jsx-theming
Next, wrap your React app with ThemingProvider
:
Next.js example
pages/_app.js
import App from 'next/app'import ThemingProvider from 'styled-jsx-theming' { const Component pageProps = thisprops return <ThemingProvider => <Component /> </ThemingProvider/> }
Gatsby example
gatsby-browser.js
import React from 'react'import ThemingProvider from 'styled-jsx-theming' const wrapRootElement = element return <ThemingProvider => element </ThemingProvider> ;
Generic example
import React Component from 'react'import ThemingProvider from 'styled-jsx-theming'// Import `App` or something { return <ThemingProvider => <App /> </ThemingProvider/> }
Using the Theme
Of course, the next step is actually using the theme in a component. There are two methods to this.
useTheme
React Hook
import useTheme from 'styled-jsx-theming' props const theme = <div> propschildren <style >` div { background: ; color: ; } `</style> </div>
withTheme
HOC
import Component from 'react'import withTheme from 'styled-jsx-theming' { <div> thispropschildren <style >` div { background: ; color: ; } `</style> </div> })
Multiple Themes
So far all the examples have involved just one theme that can be accessed, but sometimes you'll want to be able to switch between multiple.
First, modify the theming provider:
<ThemingProvider = ='dark'> <App /></ThemingProvider>
As you can see, we replaced the theme
property with themes
, that specifies multiple themes and their names, as well as default
that chooses the defaultly selected theme.
To set the theme with the useTheme
hook:
const theme setTheme =
Or if you're using the HOC:
thisprops
Development
Styled-JSX Theming Library is open to contributions! I'll review pull requests anyone makes, so feel free to submit one.
Run yarn
to install all dependencies.
I've written this library with TypeScript, so run yarn dev
to automatically run a build when you change a file.