themed-jss

Framework agnostic CSS in JS with themes & automatic Dark Mode

1link$npm i themed-jss

Themed JSS is a wrapper around JSS which provides theming support. You define your styles as functions of a theme, and then plug the theme to get scoped CSS classes.

linkFeatures

• Power of JSS: nested rules, media queries, etc.
• Integration with React & Callbag JSX
• Can be used with other frameworks or without any frameworks
• Automatic Dark Mode support
• Programmatic Dark Mode override
• Type Safe Theming

linkOverview

👉 Create your theme-based styles (e.g. for each component):

styles.ts
1linkimport { style, when } from 'themed-jss'

2link

3linkexport const BtnStyle = style(theme => ({

4link  background: theme.primaryColor,

5link  color: theme.backgroundColor,

6link  // ...

7link

8link  [when(':hover')]: {

9link    background: 'transparent',

10link    color: `${theme.primaryColor} !darkmode`,

11link    // ...

12link  }

13link}))

👉 Define your theme (application wide):

theme.ts
1linkimport { theme } from 'themed-jss'

2link

3linkexport const myTheme = theme(

4link  // light mode properties:

5link  {

6link    primaryColor: '#00917c',

7link    backgroundColor: '#fde8cd',

8link    textColor: '#424242',

9link  },

10link  // dark mode overrides:

11link  {

12link    backgroundColor: '#0f3057',

13link    textColor: 'white',

14link  }

15link)

👉 Apply your themed classes to elements:

index.ts
1linkimport { BtnStyle } from './styles'

2linkimport { myTheme } from './theme'

3link

4linkconst btn = document.getElementById('btn')

5linkbtn.classList.add(myTheme.class(BtnStyle))

linkReact

👉 Use useThemedStyle() hook to consume themed styles in your components:

1linkimport { useThemedStyle } from 'themed-jss/react'

2linkimport { BtnStyle } from './styles'

3link

4linkexport default () => {

5link  const buttonClass = useThemedStyle(BtnStyle)

6link  return (

7link    <button className={buttonClass}>Click Me!</button>

8link  )

9link}

👉 Use <Themed/> component for applying a theme in your app:

1linkimport { Themed } from 'themed-jss/react'

2linkimport { myTheme } from './theme'

3link

4link

5linkexport function App() {

6link  return (

7link    <Themed theme={myTheme}>

8link      ...

9link    </Themed>

10link  )

11link}

linkCallbag JSX

👉 Use themePlug() to plug a theme into your renderer:

1linkimport { makeRenderer } from 'callbag-jsx'

2linkimport { themePlug } from 'themed-jss/jsx'

3link

4linkimport { myTheme } from './theme'

5link

6linkconst renderer = makeRenderer().plug(themePlug(myTheme))

👉 Now access the theme in your components:

1linkimport { BtnStyle } from './tyles'

2link

3linkfunction MyBtn(_, renderer) {

4link  const buttonClass = this.theme.class(BtnStyle)

5link  return <button class={buttonClass}>Click Me!</button>

6link}

linkDark Mode

Dark mode styles are automatically added when you specify dark mode overrides in your theme. This theme won't have dark mode support:

1linkexport const myTheme = theme(       // --> this theme does not support dark mode

2link  {~

3link    primaryColor~~~~~~~~~~~~~~~~:~ ~'#00917c'~~~~~~~~~,~

4link    backgroundColor~~~~~~~~~~~~~~~~~~~:~ ~'#fde8cd'~~~~~~~~~,~

5link    textColor~~~~~~~~~~~~~:~ ~'#424242'~~~~~~~~~,~

6link  ~~}~

7link)

But this theme will automatically get all additional CSS rules for dark mode support:

1linkexport const myTheme = theme(

2link  // light mode properties:

3link  {

4link    primaryColor: '#00917c',

5link    backgroundColor: '#fde8cd',

6link    textColor: '#424242',

7link  },

8link  // dark mode overrides:

9link  {

10link    backgroundColor: '#0f3057',

11link    textColor: 'white',

12link  }

13link)

👉 Dark mode is by default read from system settings. You can manually override dark mode preferences using manual dark mode control:

1linkimport { DarkMode } from 'themed-jss/dark-mode'

2link

3linkDarkMode.initialize()   // --> run this at the start of your app for manual dark mode control

4link

5linkDarkMode.toggle()       // --> toggles dark mode preference