Magento 2 – How to Override Adminhtml CSS?

adminhtmlmagento2theme

I would like to implement a CSS file that contains only the styles that I'd like to override for the default admin theme. For example, let's say I want to change the textarea font to Consolas and my overriding CSS file is called custom.css, then in this file I would have the following code:

textarea { font-family: Consolas, monospace; }

What is the best way to go about doing something like this in Magento 2?

I have looked into creating a new theme, but that seems to require you to copy over all the CSS files from the theme you're overriding, which I'd like to avoid since I just want to add a CSS file containing only the styles I'd like to override.

Best Answer

I eventually figured out how to do this through trial and error and inferring from various answers on here. Let's assume you're using Magento 2.0.x, your current theme is Luma, and your vendor name is "ABC"; here are the steps to override the admin theme:

1. To override the admin theme, you have to override the Theme module to specify that you're using a custom 'backend' theme. Create the files below (creating new directories as needed).

File: /app/code/ABC/Theme/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'ABC_Theme',
    __DIR__
);

File: /app/code/ABC/Theme/etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
  <type name="Magento\Theme\Model\View\Design">
    <arguments>
      <argument name="themes" xsi:type="array">
        <item name="frontend" xsi:type="string">Magento/luma</item><!-- or whatever theme you're currently using -->
        <item name="adminhtml" xsi:type="string">ABC/backend</item>
      </argument>
    </arguments>
  </type>
</config>

File: /app/code/ABC/Theme/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
  <module name="ABC_Theme" setup_version="2.0.0">
    <sequence>
      <module name="Magento_Store"/>
    </sequence>
  </module>
</config>

If you installed sample data, then change the code to this:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
  <module name="JP_Theme" setup_version="2.0.0">
    <sequence>
      <module name="Magento_Theme"/>
      <module name="Magento_Store"/>
      <module name="Magento_SampleData"/>
    </sequence>
  </module>
</config>

2. Add our custom admin (backend) theme. Create the files below to use a monospace font for textarea fields in Magento Admin.

File: /app/design/adminhtml/ABC/backend/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
  \Magento\Framework\Component\ComponentRegistrar::THEME,
  'adminhtml/ABC/backend',
  __DIR__
);

File: /app/design/adminhtml/ABC/backend/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
  <title>Admin</title><!-- your theme's name -->
  <parent>Magento/backend</parent><!-- the parent theme, in case your theme inherits from an existing theme -->
</theme>

File: /app/design/adminhtml/ABC/backend/Magento_Theme/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add adminhtml theme overrides -->
        <css src="css/custom.css"/>
    </head>
</page>

File: /app/design/adminhtml/ABC/backend/web/css/custom.css

textarea {
  font-family: Consolas, monospace;
}

3. Do a magento setup:static-content:deploy and your changes should be reflected once you reload an admin page.

Related Topic