Magento – How to override default CSS properties in the theme

Neither your directory setup nor your code is wrong, the thing is there is no possibility to extend this configuration <page layout="..." on the theme level for now, this possibility may be added in upcoming releases.

So if you want to set 2columns-left layout you need to set it for all pages seperately, what I meant to say is: For Homepage you need to dive into your admin and select the CMS page which is being displayed on the homepage and open Design tab and select your desired layout.Screenshot will be attached

For Category page you have two options to set your desired layout, one is either you dive into admin and set layout from Design tab, but in that case you need to manually set design for each and every category and the other quicker way is that you create a new catalog_category_view.xml file at below path:

\Metal \bronze \Magento_Catalog \layout catalog_category_view.xml

with the code:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body/> </page>

Remember to flush your cache, if your cache is enabled from the admin panel. And you will be getting expected output.

Similarly, you can set your desired layout for any page by targeting the xml file, for ex: catalog_product_view.xml in case of product detail page.

And if you are in dilemma, that for setting your desired layout for CMS homepage why we preferred to set up the layout from the admin panel rather then doing changes in the xml file, like we did for category and product then do let me know. Will clearify it for you.

Hope this helps you. If it does, then kindly upvote it. Thanks

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.