Problem Description
I have changed the theme color by using <ConfigProvider prefixCls="custom">
ConfigProvider.config({
prefixCls: 'custom',
theme: {
primaryColor: '#1d2958',
},
});
However, antd will help me automatically generat a kind of "secondary color" like shown below.
I want to change this color because it is really not approprarite for my use case.
Many other components will also use this auto generated "secondary color" , you can find all here.
Related
I am implementing this chart using antd chart:
https://charts.ant.design/en/examples/column/percent#basic.
I need to change the colors. How do I change each of the 3 colors within the bar?
It's very easy, just add a color configuration -
color: ['#d62728', '#2ca02c', '#000000'],
You can add as many colors. Order is preserved from top to bottom. A single color would mean all stacks would have the same color. You can also return a function with additional logic -
color: ({ type }) => {
if(type === 'some condition'){
return '#2ca02c';
}
return '#d62728';
}
Hi, I used an external json file to set the theme.
Now I wanted to use a linear-gradient as background but probably not being a real palette >but a background image doesn't set it correctly.
Do you have any solution?
"palette": {
"mode": "light",
"background": {
"default": "linear-gradient(to right, #cc2b5e , #753a88)"
}
}
Strongly recommend you on checking this solution: https://stackoverflow.com/a/72888543/10161096
create a component inside your theme and put your linear-gradient inside backgroundImage. This solution works well to me
I have the following configuration in the antd.customize.less file:
#btn-primary-bg: #ffe900;
#btn-primary-color: #primary-color;
#btn-default-color: #primary-color;
#btn-default-bg: #ffffff;
On hovering a primary button everything is ok, but on hovering a default button the text color in the button changes to #btn-primary-bg, which I want to override, but I couldn't find any property like "#btn-default-hover-color" here. How can this be overridden, if at all?
I faced the same issue but I'm still looking for a better solution. However, for the moment, I can suggest that you add something like this to your global style file:
.ant-btn-default:hover, .ant-btn-default:focus {
border-color: #bee2e5;
color: #fff;
}
UPDATE
After antd has been updated to version 5.0.0 there is a prettier way to do it using ConfigProvider.
Let's suppose we have wrapped our App and assigned to the theme an object with parameters.
<ConfigProvider theme={{
components: {
Button: {
colorPrimaryBorderHover: 'red',
colorPrimaryHover: 'lightgray',
colorPrimary: 'red',
colorPrimaryActive: 'lightgray',
colorPrimaryTextHover: 'lightgray',
}
}
}}>
<App />
</ConfigProvider>
Acctually there are a lot of parameters to customize the appereance of your app which you can find in your
node_modules/antd/es/config-provider/context.d.ts file
However your config might be huge but to keep your code readable you might pass this object with interface of ThemeConfig as an exported value from another .ts file.
<ConfigProvider theme={myCustomTheme}>
...
Working with reassigning less variables. Thied to edit everything that connected with #primary-color, nothing changed color generated by Antd for hover/active state. Looks like there is no way to do this with less variables.
I'm trying to change SpeedDial color in material-ui. But I can only change three color "default", "primary", and "secondary" using FabProps.
<SpeedDial
ariaLabel="SpeedDial openIcon example"
className={st.speedDial}
FabProps={{
color: "secondary",
}}
></SpeedDial>
How can I change SpeedDial color using by Hex-color(like "#F19920")??
You can do this in several ways.
You can add custom classes to the component using classes={{}} prop.
Here are the classes you can pass to the component. And here is an example of those classes being used to change your color, on line 26 I add the className, and on line 64 I use it.
Another way is you can overwrite the pallet in your theme object, docs. This way you can use color="primary" and it will use the color that you specified in the pallet.
I'm working with react-native and I have created an Alert element.
Alert.alert(
'Warning',
'bla bla bla',
[
{text: 'OK', onPress: () => console.log('OK Pressed')},
]
)
Now I'd like to apply some style to it. Let's say I want to apply to it a red background color and white color for the text.
How can I achieve this? Is it possible?
There actually is a way to customize the text on the buttons but you're limited to what is provided... Below is the type definition from react native. Then a simple example showing a red button. Basically the "default" is blue, "cancel" is bold but still blue and "destructive" is red.
**
* An Alert button style
*/
export type AlertButtonStyle = $Enum<{
/**
* Default button style
*/
'default': string,
/**
* Cancel button style
*/
'cancel': string,
/**
* Destructive button style
*/
'destructive': string,
}>;
Alert.alert("Look out!",
"Hitting reset will wipe all the app's data on your phone. This cannot be undone!",
[
{text: 'Reset', onPress: this._doSomethingSerious, style: 'destructive'},
{text: 'Cancel'},
],
{cancelable: false}
)
You can use a custom library like react-native-modalbox.
You'll be able to style the modal as you like:
<Modal style={{background: 'red'}} ref={"modal1"}>
<Text style={{color: 'white'}}>Basic modal</Text>
<Button onPress={this.toggleSwipeToClose} style={styles.btn}>Disable swipeToClose({this.state.swipeToClose ? "true" : "false"})</Button>
</Modal>
You can open the modal using
openModal1(id) {
this.refs.modal1.open();
}
Check out the example to see more options.
Bonus: If you want to find a good library for react-native, try js.coach
I don't think this is possible, because the Alert component of react-native is something included in Android and iOS and cannot be modified :/
I recommend this kind of similar probleme here !
See ya !
I've been looking for this in android/rn sources.
Looking at the implementation code, it instantiates an AlertDialog.Builder, and looking at the android original source code for the AlertDialog.Builder, the constructor with only context uses a resolveDialogTheme with themeResId=0. Anyway, the important part about this method is this:
} else {
final TypedValue outValue = new TypedValue();
context.getTheme().resolveAttribute(R.attr.alertDialogTheme, outValue, true);
return outValue.resourceId;
}
The fallback style/theme is alertDialogTheme, so you can override the alert dialog default theme with android:alertDialogTheme like this:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:alertDialogTheme">#style/ThemeAlert</item>
</style>
<style name="ThemeAlert" parent="Theme.AppCompat.Light.Dialog.Alert">
<!-- This one changes buttons text color -->
<item name="colorAccent">#152849</item>
</style>
</resources>
I needed to change the text for default buttons, so this worked for me (at least on RN 0.61.5), but I'm not sure about which props could be changed.
Of course, this doesn't solve changing colors at runtime... if that's really needed you probably should use a lib or write a native module yourself.