Customisation using only CSS variables
Is overriding CSS variables in an additional stylesheet a suitable way to customise Metronic or do I need to modify SASS variables for a change to be applied to all components and 3rd party plugins? Any details you can provide about the limitations of modifying the CSS variables would be welcome.
Cheers
Mark
Replies (3)
Hi,
We would recommend you override the variables via SASS if you need global changes in the theme CSS. Could you please provide more info on which areas you like to customize?
Regards.
Hi Sean
Seems like SASS is the way then.
Overall I need to improve accessibility and adjust some colours. The accessibility issues I've seen so far are lack of focus styles (eg, main menu), no underline on links by default, insufficient colour contrast, root text size being fixed at 13px rather than using rem units (13px feels a bit small for general content so I want to increase it for the main content block, hopefully without having to use a utility for every paragraph).
Obviously all this couldn't be achieved with only CSS variables but if I could make them in a separate stylesheet of overrides and the colour changes with CSS variables I could avoid making changes to the Metronic SASS at all.
So I guess was trying to understand if a colour change with a one CSS variable would make the change across all necessary places or whether I would have make the same change to multiple CSS variables. Sorry, the query is a bit vague.
Hi,
In your case, you should use sass variables to globally customize the required styles.
If you are using Metronic v8.x Demo1 or Demo 22 demos
You can change the root size in src/sass/layout/_variables.custom.scss
$app-general-root-font-size-desktop: 13px;
$app-general-root-font-size-tablet: 12px;
$app-general-root-font-size-mobile: 12px;If you are using other demos please change the root size in
src/sass/layout/_variables.scss// Root font Sizes
$root-font-size: 13px; // Root font size for desktop mode
$root-font-size-lg: 13px; // Root font size for tablet mode
$root-font-size-md: 12px; // Root font size for mobile modeThe theme colors can be customized in the above variables files as well.
For more info about using Metronic please check the Theme Documentation
and Video Tutorials
Regards.
