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>
Related
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;
}
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/
Tailwind provides good option to get value from config inside another config object
module.exports = {
theme: {
colors: {
primary: 'red'
},
extend: {
colors: theme => ({
secondary: theme('colors.primary') // will be red
})
}
}
}
But this doesn't work when I want to create classes using RGBA. I want to create something like
module.exports = {
theme: {
colors: {
primary: 'red'
},
extend: {
boxShadow: theme => ({
extra: "0 0 999px rgba(theme('colors.primary'), .25))"
}),
}
}
}
This will render 0 0 999px rgba(red, .25) which is not correct CSS value - you need to pass red as 255, 0, 0. But I want to use colors.primary as it was defined in my config
I know Tailwind has it's own build utils for converting colors like asRgba, withAlphaVariable. For example, when you use text-white Tailwind renders it as color: rgba(255,255,255,var(--tw-text-opacity));. But how can I use it?
So basically how can I achieve this - pass color key from my config into another property and get rendered it as RGB/RGBA?
Update: I want third square (TW) to work as others
DEMO
I think your idea was wrong, because tailwind colors is defined with HEX number, but you trying to use it into RGBA type, so I think you need to convert firstly if you want to make your way.
Anyway let us know your success :)
check this doc
I have defined custom colors in Nuxt+Vuetify:
vuetify: {
theme: {
options: {customProperties: true},
themes: {
light: {
primary: {
lighten1: '#AFB5D1' //inactive icons
}
}
}
}
}
Also added file elements.scss in nuxt config css: ~assets/style/elements.scss
where I want to use color primary-lighten.
.separator {
color: var(--v-primary-lighten1);
}
I expect to see color #AFB5D1 on my page for element marked with class separator. In chrome inspector class looks correct but color has not parsed and color is not applied.
What I' am doing wrong?
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"
}
});