How to handle Global style sheet for my custom theme?
-
15-04-2021 - |
Question
I have created custom theme then creating _extend.less file under
app\design\frontend\My_vendor\mytheme\web\css\source_extend.less
and did some customization.
Where can I declare global style sheet (Common Components) like primary color, secondary color, primary button color, h1 tag,
tag, for all the repeated design for whole pages.
Solution
You can use following way.
Theme Vendor Name : V4U
Theme Name : Samplelesstheme
Theme xml file : app/design/frontend/V4U/Samplelesstheme/theme.xml
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>V4U Sample Less Theme</title>
<parent>Magento/luma</parent>
</theme>
app/design/frontend/V4U/Samplelesstheme/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/V4U/Samplelesstheme',
__DIR__
);
?>
app/design/frontend/V4U/Samplelesstheme/web/css/source/_extend.less
@import 'components/_variables.less';
@import 'components/samplelesstheme.less';
app/design/frontend/V4U/Samplelesstheme/web/css/source/components/_variables.les
@main-color: green;
app/design/frontend/V4U/Samplelesstheme/web/css/source/components/samplelesstheme.less
@import '_variables.less';
h1
{
color : @main-color;
}
p
{
color : blue;
}
You can download from here