Daisy UI has buttons: https://daisyui.com/components/button/
However, I'd like to override the colors for a specific button, without having to go through the effort of creating an entire theme.
I can just use bg-green-500 on a button, but that will just change the background color, when I also need to change all of the associated colors.
Is there a good way to do this?
AFAIK, to do this you override the current theme in the tailwind.config.js file.
Note that you import the theme's base:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./app/**/*.{ts,tsx,jsx,js}"],
daisyui: {
themes: [
{
light: {
...require("daisyui/src/colors/themes")["[data-theme=light]"],
primary: "#7cb3dd",
},
},
],
},
plugins: [require("#tailwindcss/typography"), require("daisyui")],
};
Here, we're overriding the primary color to #7cb3dd for the' light' theme.
Adjust as needed!
Here's more info:
https://daisyui.com/docs/themes/
Related
How can I change Vuetify's default font color for light and dark theme?
I already have custom themes (see below), but can't find in the documentation how to change the default css for text.
I see code is generated in variables/settings/_light.scss, but not sure how to modify it.
I want to avoid adding CSS like this with !important:
.theme--light.v-application {
color: #4a4a4a !important;
}
theme: {
options: {
customProperties: true,
variations: false,
},
themes: {
light: {
primary: colors.blue.base,
secondary: colors.grey.base,
anchor: color.blue.base,
},
dark: {
primary: colors.blue.base,
secondary: colors.grey.base,
anchor: color.blue.base,
},
},
},
Vuetify does not set the default font color, the theme colors it does provide are optional and must be applied to elements using specific classnames, e.g.
<p class="primary--text">text</p>
The above will apply the primary color code to that one paragraph element.
One thing you can try is creating your own theme variable but you'd still have to apply it at your application's root component level
// src/sass/variables.scss
// Globals
$material-light: (
'text': (
'default': #4a4a4a
)
);
// App.vue
<style lang="scss">
#import "#/scss/variables.scss";
#app {
color: map-get($material-light, "text", "default");
}
</style>
I have been using tailwindcss for my react project and would now like to use daisy-ui in addition. I installed it as instructed and added the plugin to my tailwind.config. After doing this some of the designs in the page look off. In particular the ones styled with border-neutral-500, bg-neutral-500 - for these colors I also no longer see the little color indicator in vscode.
I am not using a custom theme but when looking at it it seems daisyUI is specifying its own version of the neutral color. https://daisyui.com/theme-generator/ vs https://tailwindcss.com/docs/customizing-colors - is this the source of the problem? How can I avoid this?
I guess there is really conflict with utilities. DaisyUI extending theme colors with its own
You may reassign neutral color palette again with default Tailwind values like
const colors = require('tailwindcss/colors');
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {
colors: {
neutral: colors.neutral,
}
}
},
plugins: [
require("daisyui")
],
}
This way both Tailwind bg-neutral-500 and Daisy btn-neutral (for example) will work
DaisyUI has default themes and you can change them with the data-theme attribute e.g. <html data-theme="cupcake">. It seems as though the default is the light theme.
The problem is that I want to be able to use the #apply directive with DaisyUI so that I can have BEM class names in the template and DaisyUI utility classes in the style block. It seems that I can't set a default that will be picked up at compile time.
In my tailwind.config I've tried using the light theme to see if I could overwrite it, e.g.:
plugins: [require('daisyui')],
daisyui: {
themes: [
{
light: {
primary: '#EF3054',
secondary: '#C67F43',
accent: '#43AA8B',
neutral: '#FBF5F3',
base100: '#FFFFFF',
info: '#3ABFF8',
success: '#36D399',
warning: '#FBBD23',
error: '#F87272',
},
},
],
}
But this doesn't work. I've tried looking into the library itself for clues into how I could overwrite the default theme at compile time but I can't see how.
Although some people consider BEM with Tailwind an anti-pattern, I had long held this view myself as well, I have since changed my mind and feel that the extra effort does help disambiguate your template with the added benefit of allowing bespoke CSS whenever you need to drop into it so please don't suggest just using the inline utility classes as I know this works.
I'm not sure what is your issue exactly.
But once you changed tailwind config, then it should work.
If you want to change your default theme with another one, it requires some code.
But now you changed your light theme, so it will directly work.
Please check your content property again. I'm working on Next JS.
And I think base100 property should be base-100.
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
...
daisyui: {
themes: [
{
light: {
...require("daisyui/src/colors/themes")["[data-theme=light]"],
primary: '#EF3054',
secondary: '#C67F43',
accent: '#43AA8B',
neutral: '#FBF5F3',
"base-100": '#FFFFFF',
info: '#3ABFF8',
success: '#36D399',
warning: '#FBBD23',
error: '#F87272',
},
},
],
}
...
Is it possible to make the color dynamic in tailwind config.
I want to received the desired color for (primary , accent) from backend via api.
So the user can change the color from the admin panel.
i want to get this hex value from api
Yes this is possible but instead of only primary, you need to return the complete string like bg-primary(as tailwind only recognises the string) where your primary color should be defined in tailwind.config.js file.
For an example you can refer to my answer for this question.
You can try fetching the CSS variables to change you color palette without changing tailwind.config.js
config file:
module.exports = {
theme: {
extend: {
colors: {
"primary": {
100:"var(--primary-color-100)",
200:"var(--primary-color-200)",
},
"accent": "var(--accent-color)"
},
},
},
};
css file:
:root {
--primary-color-100: #fff;
--primary-color-200: #fff00;
--accent-color: #000;
}
How can I override default material-ui theme with customised global css? Also, how can we use HEX value of colours for setting up primary and secondary colour while theming?
App.js
I have root file App.js in which I have created custom theme and I need to apply external css say custom-style.css in my custom theme, to override the default styling of Material-UI. ( Struggling to get styling for form element colours for various state and button state colours, to be
specific! )
Here is the code:
App.js
const theme = createMuiTheme({
palette: {
primary: '#2765af',
secondary: '#f56428',
},
status: {
danger: 'orange',
},
});
function App(){
<ThemeProvider theme={theme}>
...
<ThemeProvider>
}
The HEX code is not allowed and throws compilation error. Also the customised CSS file ( custom-styles.css ) styles are overridden by the default styling, if I don't use theme object and add that file in App.js to try my luck.
Please help me.
Example:
https://codesandbox.io/s/testing-material-ui-typography-w6et9
Demo with Button custom color.
Theme color override by hex color in theme of App: index.js.
const theme = createMuiTheme({
palette: {
primary: { main: "#d41252" },
secondary: { main: "#F1B929" },
type: "dark"
}
});