0

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.

1 Answer 1

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

11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.