Add CSS to a custom Drupal 10 theme tutorial

This tutorial will guide you through the steps of adding CSS styling to a custom Drupal 10 theme.

  1. Start with a Drupal 10 base theme (you’ll need to rename the theme)
  2. Add a css folder to the theme’s folder
    
    # File Structure
    core
    modules
    profiles
    sites
    themes
    --contrib
    --custom
    ----d10_custom_theme_add_css
    ------css
    --------style.css
    ------d10_custom_theme_add_css.info.yml 
    ------d10_custom_theme_add_css.libraries.yml 
    
  3. Add a style.css file in the css folder
    
    /**
    * @file
    * D10 custom theme global style CSS file.
    *
    * Enter any custom CSS below this comment.
    */
    
    .custom-class {
        color: fff;
    }
    
  4. Add a d10_custom_theme_add_css.libraries.yml file to the theme’s folder
    
    # d10_custom_theme_add_css.libraries.yml 
    global-styling:
        css:
        theme:
            css/style.css: {}
    
  5. Add the libraries: mapping scalar and sequence to the d10_custom_theme_add_css.info.yml file
    
    # d10_custom_theme_add_css.info.yml
    name: D10 Custom Theme (add css)
    type: theme
    description: 'A Drupal 10 custom theme base with custom css.'
    core_version_requirement: '^10'
    base theme: 'false'
    libraries:
        - d10_custom_theme_add_css/global-styling
    regions:
        header: 'Header'
        content: 'Content'
        sidebar_first: 'Sidebar first'
        footer: 'Footer''
    
  6. Congratulations! You now have a custom theme with custom css.

More information