Best practice for adding CSS to admin core theme?

As far as I know a library override would do. But are you looking for a permanent change to core?

"As far as I know" means what it says ;-). What other solution did you have in mind?

Seven is internal (subject to change) so not recommended to subtheme it. What I would recommend for cases like this is creating a module that loads the CSS you want in the right scenario. This would likely be done via a hook like a form alter or in this case something more specific like a widget alter. Once you get the right hook you can add other assets (libraries) via #attached in a render array.

Just to understand some things better, because I am trying to achieve this as well.

Are definitions of library-extend in mytheme.info.yml and mytheme.libraries.yml only assigned to the frontend or my custom theme or is it possible to extend core and core theme libraries (i.e. of Seven) from there as well?

Does the following quote from the link in #2 mean that the overrides need to happen inside this base- and subtheme relation?

Sub-themes inherit the libraries-override and libraries-extend specified in base themes.

I tried the following, but unfortunately the script is not loaded on the node edit form. Overriding the core files of Seven worked.

mytheme.info.yml

libraries-extend:
  seven/node-form:
    - mytheme/seven_custom

mytheme.libraries.yml

seven_custom:
  js:
    scripts/mytheme.seven.js: {}
  dependencies:
    - core/jquery

I followed the advice in #5 and did the following in a custom module:

function MYMODULE_form_alter(&$form, &$form_state, $form_id) {

  if ($form_id == 'node_article_form' || 'node_article_edit_form') {
    $form['#attached']['library'][] = 'MYTHEME/custom_library';
  }
  
}

First, the code in #7 is along the lines of what I was thinking :)

@toni4i to answer #6, libraries-override in a mytheme.info.yml only works within the active theme or more accurately the stack of active themes (base- and subtheme relation as you described it). So it would only work if you subthemed Seven which as I mentioned is not recommended. However if you're just subtheming to do a libraries-override/extend it's less risky IMO. In the end just doing that should be roughly equivalent to using hook_library_info_alter() in a custom module which would be the more "recommended" way of overriding/extending libraries from a core internal theme (Bartik or Seven). Either way you may need to update your overrides/extends if you update core.

Good to know! Thanks for your quick reply.

Here's a quick fix: Create a new block, in the body field enter in source view your styles along with opening/closing style tags, then assign the block to a region in Seven theme only (the Help region worked perfect for me).

@Beezer75, great idea! Works like a charm.

I agree that for a quick fix / minimum amount of styles overrides, #10 solution works great!

@Beezer75, thank you! so quick and elegant :)

#10 works great for me on a D7 Site,

But on a 8.8.1 this

<style type="text/css">/* grey out disabled menu entries */
  tr.menu-disabled > td:first-child {
    filter: grayscale(100%) opacity(0.3);
  }
</style>

gets output as

<style type="text/css">
<!--/*--><![CDATA[/* ><!--*/
/* grey out disabled menu entries */
  tr.menu-disabled > td:first-child {
    filter: grayscale(100%) opacity(0.3);
  }

/*--><!]]>*/
</style>

Seems like some new escaping has been introduced?

[edit] Solved:
The filter Correct faulty and chopped off HTML is set by default for the full HTML text Format. It was disabled on my D7 install, so nothing new here.

@sirtet #14

Please check your text format. I am using this on drupal site 8.8.1 and i have the following without a problem:

<style type="text/css">.requests .form-item-webform-submission-value,
.complaints .form-item-webform-submission-value,
.reports .form-item-webform-submission-value {
    display: none;
}
</style>

I am using Full HTML format. Maybe create a new format and remove any of the filters on it.

Will check.
This was on a vanilla 8.8.1 on simplytest.me also using full Html Format.

So i guess you have modified your Full HTML format?
Because what i see is:
Started 8.8.1 on simplytest.me, added a block with fullHTML with your CSS to the content area, and the css gets escaped.
After turning off the input filter "Correct faulty and chopped off HTML" the CSS is output correctly.

Looks to me like a bug of that filter, as i can see no fault in the CSS...

i think i have modified it to allow css outputing. i am glad its working for you now as well

If you want to add styles, which would apply for the main theme and admin theme (e.g. to target admin toolbar), this way worked for me:

1. Define library in your custom module (not theme) e.g. mymodule.libraries.yml:

mylib:
  css:
    theme:
      css/mystyles.css: {}

2. In your module file (mymodule.module) use hook_preprocess_page() to load the library:

function mymodule_preprocess_page(&$variables) {
   $variables['#attached']['library'][] = 'mymodule/mylib';
}

3. Clear caches. Now mystyles.css will load in both themes: main and admin.

I can confirm #19 works perfectly! Thank you @vbalsys!

If you want best practice for adding CSS to admin core theme try this, This is the best way to add css.

Thanks!

global-styling:
  version: VERSION
  css:
    base:
      css/base/elements.css: {}
      css/base/typography.css: {}
      css/base/print.css: {}
    component:
      css/components/accordion.css: {}
      css/components/action-link.css: {}
      css/components/content-header.css: {}
      css/components/container-inline.css: {}
      css/components/container-inline.module.css: {}
      css/components/breadcrumb.css: {}
      css/components/button.css: {}
      css/components/details.css: {}
      css/components/divider.css: {}
      css/components/messages.css: {}
      css/components/entity-meta.css: {}
      css/components/fieldset.css: {}
      css/components/form.css: {}
      css/components/form--checkbox-radio.css: {}
      css/components/form--checkbox-radio--ie.css: {}
      css/components/form--field-multiple.css: {}
      css/components/form--managed-file.css: {}
      css/components/form--text.css: {}
      css/components/form--select.css: {}
      css/components/help.css: {}
      css/components/image-preview.css: {}
      css/components/menus-and-lists.css: {}
      css/components/modules-page.css: {}
      css/components/node.css: {}
      css/components/page-title.css: {}
      css/components/pager.css: {}
      css/components/skip-link.css: {}
      css/components/tables.css: {}
      css/components/table--file-multiple-widget.css: {}
      css/components/search-admin-settings.css: {}
      css/components/tablesort-indicator.css: {}
      css/components/system-status-report-general-info.css: {}
      css/components/system-status-report.css: {}
      css/components/system-status-report-counters.css: {}
      css/components/system-status-counter.css: {}
      css/components/tabs.css: {}
      css/components/views-ui.css: {}
    theme:
      css/theme/colors.css: {}
    layout:
      css/layout/breadcrumb.css: {}
      css/layout/local-actions.css: {}
      css/layout/layout.css: {}
  dependencies:
    - system/admin
    - core/jquery
    - core/drupal

#23 doesn't really solve the issue. #19 does. Thanks!

Use this one it's helpful.

function mymodule_page_attachments(array &$attachments) {
    $attachments['#attached']['library'][] = 'mymodule/mylib'';
}

Use in custom form.
$form['#attached']['library'][] = 'mymodule/mylib';

This code will be helpful

Define the function in .module file ------

function mymodule_page_attachments(&$variables) {
$variables['#attached']['library'][] = 'mymodule/custom_css';
}

Define the libraries in mymodule.libraries.yml

custom_css:
css:
theme:
css/custom.css: {}

Clear cache now u can check your css file with view page source

Another possible way to add CSS to admin theme files from module.

/**
 * Implements hook_library_info_alter().
 */
function HOOK_library_info_alter(array &$libraries, string $extension): void {
  if ($extension == 'claro') {
    $module_path = \Drupal::service('module_handler')->getModule(basename(__FILE__, '.module'))->getPath();
    $libraries['global-styling']['css']['theme']["/$module_path/css/admin.css"] = [];
  }
}

#10 works great and simple, D9.

1. Added Block Type "Code Block"
2. Created block "Admin CSS"
3. Added css including open and close <style> ..css.. </style>
4. Added block to Help section in Seven theme (using as admin theme)

Make sure to choose a text format where "Limit allowed HTML tags and correct faulty HTML" is not checked in CKEditor.

I just made a copy of entire seven directory from web/core/themes/seven to web/themes/custom/seven and it worked good.
Also for code sniffer: Add line core_version_requirement: ^8 || ^9 and remove version: VERSION from web/themes/custom/seven/seven.info.yml

If you want Best practice for adding CSS to admin core theme,use this method,this way worked for me:

Create/update "yourtheme_name.libraries.yml" file in your theme.
add css files in it.

global-styling:
  version: VERSION
  css:    
    theme:           
      css/bootstrap.min.css: {}      
      css/font-awesome.min.css: {}        
      css/owl.carousel.min.css: {}
      css/navbar.css: {}
      css/hover.css: {}      
      css/aos.css: {}
      css/animate.css: {}
      css/style.css: {}	
      css/responsive.css: {}

  dependencies:
    - core/jquery.once
    - core/drupal
    - core/drupalSettings

The best way I found is using Admin CSS Module
The module has the configuration page to add your custom css
https://www.drupal.org/project/admincss.
It will add admin-style.css

Admin CSS Editor setting path
/admin/config/development/admincss

Create/update the "mytheme.libraries.yml" file in your theme.
add CSS files in it.
Best practice for adding CSS to admin core theme
global-styling:
version: 1.x
css:
theme:
css/layout.css: {}
css/style.css: {}
css/colors.css: {}
css/print.css: { media: print }

Thanks everyone for respond. Since there was nothing to review and original poster hasn't asked for additional help in 7 years think this is good to close.

Again thanks!

You can also use the Asset Injector module to add css to your admin theme: https://www.drupal.org/project/asset_injector

Or with this short custom module: https://gorannikolovski.com/snippet/add-css-and-js-admin-pages