https://github.com/wellguimaraes/xtheme

Experimental way to better deal with theming with React and styled components.
https://github.com/wellguimaraes/xtheme

Last synced: 12 days ago
JSON representation

Experimental way to better deal with theming with React and styled components.

• Host: GitHub
• URL: https://github.com/wellguimaraes/xtheme
• Owner: wellguimaraes
• License: mit
• Created: 2020-10-14T17:02:09.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-27T18:36:27.000Z (almost 2 years ago)
• Last Synced: 2024-04-13T04:57:52.162Z (7 months ago)
• Language: TypeScript
• Size: 93.8 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# X-Theme

**Experimental** way to better deal with theming with React and styled components.

## Install it

`yarn add xtheme`

## Use it

```typescript jsx

import { createVariableSet, createGlobalTheme } from 'xtheme'

// Create types for the variable sets

// that you might have on your theme

type IColors = 'primaryDark' | 'primary' | 'primaryLight'

type IFontFamilies = 'sansSerif' | 'serif'

type IFontSize = 'XS' | 'S' | 'M' | 'L' | 'XL'

// Create the shape or your theme

const globalTheme = {

  color: createVariableSet(),

  fontFamily: createVariableSet(),

  fontSize: createVariableSet(),

}

// Create a global theme component 

// by defining the values for the theme variables

const AppGlobalTheme = createGlobalTheme([

  // Colors

  [globalTheme.color.primaryLight, '#27a0ff'],

  [globalTheme.color.primary, '#0088ee'],

  [globalTheme.color.primaryDark, '#0061ac'],

  // Font families

  [globalTheme.fontFamily.sansSerif, 'helvetica, roboto, arial, sans-serif'],

  [globalTheme.fontFamily.serif, 'times new roman'],

  // Font sizes

  [globalTheme.fontSize.XS, units.px(11)],

  [globalTheme.fontSize.S, units.px(13)],

  [globalTheme.fontSize.M, units.px(16)],

  [globalTheme.fontSize.L, units.px(19)],

  [globalTheme.fontSize.XL, units.px(23)],

])

// Create a styled component and use the theme variables

const Title = styled.h1`

  font-family: ${globalTheme.fontFamily.serif};

  font-size: ${globalTheme.fontSize.XL};

`

const App = () => {

  return (

    


      

      ...

      


        Hello world!

        ...

      
      

    

  )

}

```


## License

MIT License