Try to create theme - But nothing apply

[sunilit42]

Hello,

I am trying to create new theme in magento 2.

I am trying to change background color.

So i copied web/css/source/_theme.less

And change @page__background-color: @Color-White; to @page__background-color: @color-gray19;

But nothing changed into frontend side.

Already removed static files.

Also If i want to add more color code then i need to edit below file?

lib\web\css\source\lib\variables_colors.less

[gotbahn]

Hello @sunilit42

Seems you are doing everything right, let's try to catch what is wrong, please verify next things:

• You created new theme with next structure:

app/design/frontend/
├── YourVendorName
│   │   ├──YourThemeName
│   │   │   ├── web
│   │   │   │   ├── css
│   │   │   │   │   ├── source
│   │   │   │   │   │   ├── _theme.less

• You applied this theme as main in admin Stores -> Configuration -> Design -> Design Theme
• Chosen your theme, saved configuration and flushed cache
• Theme is applied and styles for example going from pub/static/frontend/YourVendorName/YourThemeName/...

I suggest problem in of some steps above

Also If i want to add more color code then i need to edit below file?

lib\web\css\source\lib\variables_colors.less

No, you shouldn't work with lib, it would lead to incompatibility.
Instead you can create new styles or override existing.

Example of create new styles for new theme with blank theme parent:

Simple way

Just create source/_extend.less in your theme and add there everything that you need to add new for your theme.

app/design/frontend/
├── YourVendorName
│   │   ├──YourThemeName
│   │   │   ├── web
│   │   │   │   ├── css
│   │   │   │   │   ├── source
│   │   │   │   │   │   ├── _extend.less

Advanced way

Create new parent less files

app/design/frontend/
├── YourVendorName
│   │   ├──YourThemeName
│   │   │   ├── web
│   │   │   │   ├── css
│   │   │   │   │   ├── styles-l.less, styles-m.less

Inside your new parent styles (styles-l.less, styles-m.less) you can add any new styles or imports.

Example of override exisiting styles for new theme with blank theme parent:

Let's say you don't like something that included in Magento 2 lib or sources or predefined theme, as example buttons (why not?). You can simply override existing buttons implementation with create new _buttons.less file in your theme. If path are matched your theme will override default file.

app/design/frontend/
├── YourVendorName
│   │   ├──YourThemeName
│   │   │   ├── web
│   │   │   │   ├── css
│   │   │   │   │   ├── source
│   │   │   │   │   │   ├── _buttons.less

[sunilit42]

Hello,

Thanks for good explain but still same issue.

One more thing notice:
Just rename of theme name from pub/static/frontend/PackageName/Themename

When i refresh page all static content not able to create automatically, I already set Developer mode in htaccess.

So everytime i need to run below command:
magento setup:static-content:deploy

[gotbahn]

@sunilit42

Renaming directories seems bad practice, after creation and call theme stored in DB.

I can't reproduce your issue. Can you provide more info please? Add some screenshot with path of static files in debugger or/and created theme structure would be great.

[sunilit42]

Hello,

Create new theme and name of name demo theme.

Folder stucture of theme is

Frontend screenshot:-

Now i am trying to change color from @color-gray19 to #ff5501

Now refresh page at frontend side
no changes is apply.

So rename static folder or delete it

After rename, not able to create all files automatically

So everytime when i will change something in css, i need to run below command?
magento setup:static-content:deploy

look forward your reply

[gotbahn]

@sunilit42 ok, now I see that theme is created and applied and trying to reach by correct path to pub.

Please verify that this files are missed in pub/static/frontend/Test/mage2... Please delete all renamed folders and 'pub/static' and show what you have after page refresh.

So everytime when i will change something in css, i need to run below command?
magento setup:static-content:deploy

No, you don't need that. Deleting of pub/static/frontend/Test/mage2... enough to rerun all process that generates static files for your theme.

[sunilit42]

Already removed static folder

Only requirejs folder created after remove it.

[gotbahn]

@sunilit42 gotcha, thank you for detailed screenshots
seems problem is in deletion .htaccess inside pub/static, try to recover it and delete only files that need to be recreated pub/static/frontend/Test/mage2/...

[sunilit42]

Hello,

Thanks for that.

What i did, i copied that htaccess file from repository.

But still one css missing- first time load.

But second time when i refresh page it is working fine

[sunilit42]

Also

I changed background color from _theme.css file still not applied after refresh page.

Then i removed static files but still not showing changes.

Anything missing?

[gotbahn]

But still one css missing- first time load.
image

But second time when i refresh page it is working fine

@sunilit42
It's known issue. Less php processing is slow on some environments and catch timeout for second file, so it's generates only for second request. Which gonna be when you refresh page second time.

I believe we have internal ticket for that.

I changed background color from _theme.css file still not applied after refresh page.

Then i removed static files but still not showing changes.

Anything missing?

Doh. Well seems you did everything right, for me hard to say what's wrong. I created new themes couple times during last days and all was fine.

We need plan B. Can you upload your current repo to GitHub? Will try to debug fork directly.