Usage

Install: npm i -D @episclera/weaver-theme

With TS/JS

import React from 'react'
import { weaverTheme } from '@episclera/weaver-theme'

export default () => {
  // to see all vars
  console.log(weaverTheme())
  return (
    <div style={{ background: weaverTheme('primary-color') }}>Hello!</div>
  )
}

With less

Just import vars.less file and it will load the theme plugin and all available vars in weaverTheme for you

@import '~@episclera/weaver/styles/vars.less';

// By default weaverTheme convert all available properties as Less variables so you can get theirs values as simple less variables in your less files
.my-class {
  background: @primary-color;
}

How to customize

In order to customize 'weaverTheme' you need to create a weaver.config.json file for weaver in your project root. NOTE: Any variable from antd is posible to overide not just weaverTheme default variables. See default weaverThemeConfig for example (./src/weaverThemeConfig.ts)

{
  "colors": {
    "primary-color": "#ccc",
    ...
  },
}

After that weaverTheme will merge your custom config with the default one and also will apply the weaverTheme properties to your less variables and also will apply them in tailwind config so everything will be set up for you.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Or you can sponsor via Open Collective

Author

@episclera/weaver © Episclera, Released under the MIT License.
Authored and maintained by Episclera with help from contributors (list).

If you like this repository star⭐ and watch👀 on GitHub.