Can you change the theme color?

[fprackwieser]

Is there a way to change the purple 600 to a blue or some other color?

[danhab99]

I created PR #64. I needed this feature too.

[akshayp660]

@sauer-stoff @danhab99 you can use bg-blue-xxx in tailwindCSS version "tailwindcss": "^2.2.4".

[youssefld]

Hello @akshayp660 i'm unable to change the color, I have updated taildwindcss to 2.2.4, should i modify config file or something?

[akshayp660]

@youssefld try
postcss.config

module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),

],
}

[youssefld]

@youssefld try postcss.config

module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer'),

], }

I have changed it and added bg-red-300 to button class and it still showing purple. Should I change something?

[akshayp660]

@youssefld the issue is that you are applying style to the pre-styled component and it already has its own default style and somehow your style is not overwriting default style so you can create your custom style as follow
myStyle.zip

You can create your custom styling for the default component in a single file then import it in index,js and apply of the project as follow

import myStyle from './myStyle'

ReactDOM.render( <SidebarProvider> <Suspense fallback={<ThemedSuspense />}> <Windmill usePreferences theme={myStyle}> <App /> </Windmill> </Suspense> </SidebarProvider>, document.getElementById("root") );

you can find the default style at https://github.com/estevanmaito/windmill-react-ui/blob/master/src/themes/default.ts js.

or just create your own button component if you don't need a custom theme

[youssefld]

@akshayp660 it's working!! thank you for your help
didn't know how to apply the theme.

[akshayp660]

@youssefld you are welcome!

[estevanmaito]

Everything should be documented here: https://windmillui.com/react-ui/customization

Let me know if there's still any issue.

Hello, i am unable to add secondary button theme, I have created it on my style js like that

button: {
secondary: {
      base: "text-red-700 bg-red-100 border border-transparent",
      active:
        "active:bg-red-100 hover:bg-red-200 focus:ring focus:ring-red-200",
      disabled: "opacity-50 cursor-not-allowed",
    }
}

And then applied it like that but it still shows primary color:
<Button layout="secondary">Create Announcement</Button>

[estevanmaito]

These are all the options: https://github.com/estevanmaito/windmill-react-ui/blob/master/src/themes/default.ts
There's no way to add styles, only modify existing ones.

[akshayp660]

@youssefld @estevanmaito @youssef-lakouifat Tailwind has come up with !important CSS utility now you can change button color or other predefined class of windmill components without having to change theme or default classes.
follow these steps:

Requirement: Tailwind version 2.x.x

1. add jit mode in tailwind.config.js as follow

module.exports = {
 mode: 'jit',
  purge: [
    // ...
  ],
  theme: {
    // ...
  }
  // ...
}

2. add your tailwind class with ! as prefix eg. <Button className="!bg-red-500"/> likewise or create custom react component if you are using the same button across all project as in case on eg. <SecondaryButton/>

import { Button } from '@windmill/react-ui'

function SecondaryButton() {
    return (
        <Button className="!bg-red-500" />
    )
}
export default SecondaryButton

3. only catch here is that you have to build a tailwind if you add !important CSS class don't expect it to reflect in realtime.
   after applying all classes you need just to re-run your script npm run start or build and It will rebuild the tailwind.

Conclusion: Now you don't have to edit the default theme style. Enjoy :)