Resolve #3304650 "Theme stylesheet documentation"
Closes #3304650
Merge request reports
Activity
18 18 * - name: The machine name of the theme. 19 19 * - status: 1 for installed, 0 for uninstalled themes. 20 20 * - info: The contents of the .info.yml file. 21 * - stylesheets: A two dimensional array, using the first key for the 22 * media attribute (e.g. 'all'), the second for the name of the file 23 * (e.g. style.css). The value is a complete filepath (e.g. 24 * themes/olivero/style.css). Not set if no stylesheets are defined in the 25 * .info.yml file. 26 * - scripts: An associative array of JavaScripts, using the filename as key 27 * and the complete filepath as value. Not set if no scripts are defined 28 * in the .info.yml file. 21 * - libraries: An associative array of libraries defined by the theme, -
We should not be referencing what something used to be unless it is a deprecation. The docs should describe how something currently works without the context of how it worked previously.
Also, the description itself is not accurate. Libraries are defined by the theme in the libraries.yml file. This setting does something more specific. I'm sure @yash.rode can figure it out.
changed this line in version 2 of the diff
43 43 * See node.info.yml for an example of a module .info.yml file. 44 44 * 45 45 * Information stored in a theme .info.yml file: 46 * - screenshot: Path to screenshot relative to the theme's .info.yml file. 47 * - engine: Theme engine; typically twig. 46 * - name: The name of the theme. 47 * - type: The type of the theme; typically 'theme'. -
This is not correct. I'd like @yash.rode to first attempt figuring this out before having a reviewer provide a correction. Grepping through Drupal's code should provide enough context clues to figure out what needs to be changed here.
33 33 * This ensures proper cascading of styles so themes can easily override 34 34 * module styles through CSS selectors. 35 35 * 36 * Themes may replace module-defined CSS files by adding a stylesheet with the 37 * same filename. For example, themes/olivero/system-menus.css would replace 38 * modules/system/system-menus.css. This allows themes to override complete 39 * CSS files, rather than specific selectors, when necessary. 36 * Modules and themes must declare their CSS and JS assets in library changed this line in version 2 of the diff
33 33 * This ensures proper cascading of styles so themes can easily override 34 34 * module styles through CSS selectors. 35 35 * 36 * Themes may replace module-defined CSS files by adding a stylesheet with the 37 * same filename. For example, themes/olivero/system-menus.css would replace 38 * modules/system/system-menus.css. This allows themes to override complete 39 * CSS files, rather than specific selectors, when necessary. 36 * Modules and themes must declare their CSS and JS assets in library 37 * definitions. Themes can override module-defined libraries by using the 38 * `libraries-override` feature in their theme's .info.yml file. This allows 39 * themes to override entire CSS or JS files, rather than specific selectors 40 * or functions, when necessary. 41 * 42 * For example, to override the 'system' module's system-menus library, you changed this line in version 2 of the diff
45 * Example: 46 * In your theme's mytheme.info.yml file: 47 * 48 * name: 'My Theme' 49 * type: theme 50 * base theme: olivero 51 * description: 'A custom theme' 52 * package: Custom 53 * version: '1.0' 54 * core_version_requirement: ^8 || ^9 55 * 56 * libraries-override: 57 * system/misc: 58 * css: 59 * theme: 60 * css/system-menus.css: css/overridden-system-menus.css - Comment on lines +43 to +60
Several of the lines here are not needed to perform a library override. Lets keep things smaller if possible and only include the necessary lines to achieve the functionality being covered. I also recommend that if
versionis in an example, choose versions that are not already EOL. While this doc might continue to exist in future versions of Drupal, lets at least start with current versions changed this line in version 2 of the diff
47 * - engine: Theme engine; typically twig. 46 * - name: The name of the theme. 47 * - type: The type of the theme; typically 'theme'. 48 * - description: A description of the theme. 49 * - package: The package name to group themes in the admin UI. 50 * - version: The version of the theme. 51 * - core_version_requirement: The required core version. 52 * - screenshot: Path to a screenshot relative to the theme's .info.yml file. 48 53 * - base theme: Name of a base theme, if applicable. 49 * - regions: Listed regions. 50 * - features: Features available. 51 * - stylesheets: Theme stylesheets. 52 * - scripts: Theme scripts. 54 * - engine: Theme engine; typically 'twig'. 55 * - regions: Defined regions for the theme. 56 * - libraries: Libraries defined by the theme. -
"Libraries defined by the theme" are in
themename.libraries.yml. This does something different that I'm sure @yash.rode can figure out with a little bit of sleuthing. changed this line in version 2 of the diff
18 18 * - name: The machine name of the theme. 19 19 * - status: 1 for installed, 0 for uninstalled themes. 20 20 * - info: The contents of the .info.yml file. 21 * - stylesheets: A two dimensional array, using the first key for the 22 * media attribute (e.g. 'all'), the second for the name of the file 23 * (e.g. style.css). The value is a complete filepath (e.g. 24 * themes/olivero/style.css). Not set if no stylesheets are defined in the 25 * .info.yml file. 26 * - scripts: An associative array of JavaScripts, using the filename as key 27 * and the complete filepath as value. Not set if no scripts are defined 28 * in the .info.yml file. 21 * - libraries: An associative array of libraries defined by the theme, 22 * replacing the older 'stylesheets' and 'scripts' properties. 29 23 * - prefix: The base theme engine prefix. 30 24 * - engine: The machine name of the theme engine. 31 25 * - base_theme: If this is a sub-theme, the machine name of the base theme changed this line in version 2 of the diff
added 2 commits
33 33 * This ensures proper cascading of styles so themes can easily override 34 34 * module styles through CSS selectors. 35 35 * 36 * Themes may replace module-defined CSS files by adding a stylesheet with the 37 * same filename. For example, themes/olivero/system-menus.css would replace 38 * modules/system/system-menus.css. This allows themes to override complete 39 * CSS files, rather than specific selectors, when necessary. 36 * Modules and themes must declare their CSS and JS assets in library 37 * definitions. Themes can override module-defined libraries by using the
