How can an extension add some specific CSS/Less styles for a particular design package or theme?

dmitrii_fediuk · November 30, 2016, 6:41am

Step 1

Detect the current design package and theme with JavaScript.

mage2pro/core/blob/1.9.36/Core/view/base/web/main.js

// 2016-11-30
// «How to get the current design package and theme names programmatically
// on the browser side (with JavaScript)?» https://mage2.pro/t/2350
/** @type {String} */
var a = require.toUrl('').split('/').slice(-4);
// 2016-11-30
// The DOM Ready event is intentionally ignored, because we need only the root <html> tag.
// document.documentElement is the root <html> tag: http://stackoverflow.com/a/22873490
// A possible result class: « df-package-Magento df-theme-luma»
document.documentElement.className += ' df-package-' + a[0] + ' df-theme-' + a[1];

Step 2

Add specific styles for a design pavkage or theme:

github.com

mage2pro/core/blob/1.9.36/Sso/view/frontend/web/main.less?ts=4#L2-L14


	.df-theme-luma & {
		// 2016-11-29
		// Luma uses a big (40 px) margin-bottom for the <h1> tags: https://mage2.pro/t/2343
		// so we have too much vertical space between the
		// «Customer Login» or «Create New Customer Account» h1> tags
		// and the «customer.form.register.fields.before» container below
		// (where we place our «df.customer.sso» container):
		margin-top: -1em;
		// 2016-11-29
		// Increase the vertical margin between our single sign-on buttons
		// and the «Personal Information» (or «Registered Customers») form's title below:
		margin-bottom: 1em;
	}