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
Related
Looking for some help to change the page theme to one color instead of waves.
home: genPageTheme({colors: ['#FFFFFF', '#FFF'], shape: shapes.wave}),
Any one ran into this issue ?
Hej! 👋 Answered this question in Discord as well. You can customise your theme following this example (https://backstage.io/docs/getting-started/app-custom-theme#example-of-a-custom-theme). In your theme you want to have smth. like the following:
const myTheme = createTheme({
...lightTheme,
defaultPageTheme: 'home',
pageTheme: {
home: genPageTheme({ colors: ['#8c4351', '#343b58'], shape: 'none' }),
},
});
This way you would only have the linear gradient between the 2 colours. You can also just have one single colour in the colors array.
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.
Is there a way to get only the CSS value of a Tailwind CSS class? For example, if I have translate-x-4 tailwind class I want only the 1rem CSS value (since class translate-x-4 is --tw-translate-x: 1rem;). This would be pretty useful with Framer Motion, because framer motion animation object can accept a wide variety of CSS values like 1rem, #ff3322. Is there some kind of way to do something like this <motion.div animate={{ x: getValue('translate-x-4') }} initial={false} />.
I know there exists twin.macro but it "returns" entire Tailwind CSS class. Is there a similar utility for getting only the value?
I think xwind is what you are looking for.
import xw from "xwind";
const styles = xw`text-red-100 hover:text-green-100 hover:bg-blue-200`;
// OR (with custom array syntax)
const styles = xw`text-red-100 hover[text-green-100 bg-blue-200]`;
Xwind converts your tailwind classes into Postcss-js / JSS compatible syntax.
Something like this:
const styles = {
"--text-opacity": "1",
color: ["#fde8e8", "rgba(253, 232, 232, var(--text-opacity))"],
"&:hover": {
"--text-opacity": "1",
"--bg-opacity": "1",
color: ["#def7ec", "rgba(222, 247, 236, var(--text-opacity))"],
backgroundColor: ["#c3ddfd", "rgba(195, 221, 253, var(--bg-opacity))"],
},
};
I prefer to use vscode and enable extension Tailwind CSS IntelliSense. This way, when you hover over any tailwind classes you can see the complete CSS.
TailwindCSS has a function called resolveConfig that returns an object of the generated values. The theme attribute stores the css values. I used this in my React app as follows (at the top of my file):
import resolveConfig from "tailwindcss/resolveConfig";
const styleConfig = resolveConfig().theme;
styleConfig then is an object with things like backgroundColor, gap, etc.
I can't seem to find in any of the Material-UI documentation where the "light", "dark" and "contrastText" properties of a PaletteIntention are applied or what they are used for? I know I can access them with hooks or HOC directly, but I am wondering if those variants are used in any of the built-in components automatically? This is probably obvious, so thanks in advance.
Yes, those theme values are used in MUI components.
The keyword PaletteIntention has only appeared in the document theme/palette/customization for explanation.
What it wants to say is that we can customize the theme default settings.
If we take a close look at the built-in component source like the most common one Button
Refer: the source of MUI Button
You can find that the default styles are using the theme
export const styles = (theme) => ({
/* Styles applied to the root element. */
root: {
...theme.typography.button,
boxSizing: 'border-box',
minWidth: 64,
padding: '6px 16px',
borderRadius: theme.shape.borderRadius,
color: theme.palette.text.primary,
transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
duration: theme.transitions.duration.short,
}),
Which is quite common. I mean, why not they use the style solution inside their own package?
The document may not list all the default style one component is using, still, we can see it inside the source, and we can always customize them via the CSS API document, or override them using the MUI nesting selector or other style solution provided by MUI with theme.
Refer: document of
MUI style solutions
MUI theming
customizing-components
advanced/#theming