How to handle Global style sheet for my custom theme?

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.

Answer 1

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