Closed Yusseiin closed 1 year ago
Hi @Yusseiin
You need to pass theme in this way:
const theme = {
rainbow: {
palette: {
brand: "#ff0000",
success: "",
mainBackground: "",
..
},
},
};
Here there is doc about how to use it: https://react-rainbow.io/#/Customization
Hi @Yusseiin
You need to pass theme in this way:
const theme = { rainbow: { palette: { brand: "#ff0000", success: "", mainBackground: "", .. }, }, };
Here there is doc about how to use it: https://react-rainbow.io/#/Customization
There is that part in my code:
const theme = {
rainbow: {
palette: {
main: "#ff0000",
dark: "#ff0000",
light: "#ff0000",
},
background: {
main: "#000000",
highlight: "#000000",
secondary: "#000000",
disabled: "#000000",
}
},
};
And then i recall it here:
<RainbowThemeContainer theme={theme}>
<Picklist
value={selection}
placeholder={selection}
onChange={handlePicklistChange}
style={containerStyles}
//variant="inverse"
>
<Option name="Custom" label="Custom" />
<Option name="Today" label="Today" value = {Today} />
<Option name="Yesterday" label="Yesterday" value = {Yesterday}/>
<Option name="This Week" label="This Week" value = {Week}/>
</Picklist>
<DatePickerModal
title='Select a Date'
isOpen={isOpen}
variant="double"
value={dates}
selectionType="range"
onChange={handleDatePickerChange}
onRequestClose={() => {setOpen(false); handleDatePickerChange(dates)}}
/>
</RainbowThemeContainer>
but is not changing the color
@LeandroTorresSicilia i think i have found the problem.
in the wiki "https://react-rainbow.io/#/Customization" it says to use background: {
, but the correct one is mainBackground:
.
For changing the text color what is the correct one? is says text
but is not working. I have tryed with
titleText: theme.palette.secondary[200],
mainText: theme.palette.secondary[200],
titleText: theme.palette.secondary[200],
headerText: theme.palette.secondary[200],
labelText: theme.palette.secondary[200],
disabledText: theme.palette.secondary[200],
but no one is working
@Yusseiin Right now we don't support changing the text color, you can only change these ones:
Using the code as I said above. Here is a code sandbox: https://codesandbox.io/s/quirky-dew-rzxj7t?file=/src/App.js
Hi all, (sorry for bad English) I am trying to change the color of a PickList and DatePickerModal. Referring to the guides, it says to use "RainbowThemeContainer" to change the appearance, but in my case, it is not working. I cannot use "Application" to change the theme because it will change the entire page, and I only want to style these two components. If I use variant="inverse", it changes every color, but I am not able to change it as I prefer. This is my code:
This is the result
Can someone help me?