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
Related
If I use #tailwindcss/forms it will be styled like Unstyled on the following site.
chackbox should look like Simple on the following site.
Currently, when you press down on the checkbox like Unstyled on the site, a border is displayed. I want to eliminate it.
enter link description here
//taiwind.config.js
plugins: [
require('#tailwindcss/custom-forms'),
]
You will have to override the the style for box-shadow which is applied on checkbox and radio:
[type='checkbox']:focus, [type='radio']:focus {
box-shadow: none;
}
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.
I want all users see scrollbars as its in dark mode of chrome;
But some users dont use dark theme in chrome so I set colorSchema:"dark" of parent div style and it looks like pic below;
Why its diffirent from origin dark style? how to use the schema with strong dark?(first pic)
I know there is custom css solution to change scrollbar css. its ok, but I am using reactjs, is it possible to style scroll bar in react component file?
const PARENTDIV: React.CSSProperties = {
backgroundColor: color.quizBackground,
flex: 1,
colorScheme: 'dark',
}
I'd like to use custom themes in Tailwind config to set primary/secondary colors for light and dark mode. The Tailwind docs only go over using classes in an html/jsx element like so:
<div class="bg-white dark:bg-slate-900...
Instead of declaring this on every element in my app, I'd like to do the following:
<div class="bg-primary text-secondary" />
and then in config, define something like:
colors: {
light: {
primary: "white",
secondary: "black",
}
dark: {
primary: "black",
secondary: "white",
}
}
Does anyone know of a way to do this? I am using Tailwind with React.
You can use #apply:
.bg-primary {
#apply bg-white dark:bg-slate-900
}
/* ... */
You can even go so far as to write a script to generate this CSS.
https://tailwindcss.com/docs/functions-and-directives
To anyone looking for answers in the future:
I was also looking for the same thing, and the best I think we can do at this point is:
Define colors in your tailwind config use css vars
in root/body have 2 sets of css vars. One default, and other for dark class
More information about setting tailwind config using css vars:
https://tailwindcss.com/docs/customizing-colors#using-css-variables
I actually found two solutions for this:
Daisy UI has a pretty good solution for this built in. However if you don't want to get stuck with using the entire component library, you can do what daisy is doing under the hood with:
Tailwind theme switcher
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.