Core Themes: Stark for Drupal 8, 9

Stark is one of the themes bundled with Drupal. It is intentionally bare bones and its purpose is to help Drupal theme and module developers get to the heart of Drupal's system templates. In this tutorial, we'll explore Stark and its primary features and discuss the various reasons for utilizing the Stark theme.

Goal

Recognize Stark theme and identify its primary features. Explain the use cases for Stark and what you can learn from it.

Prerequisites

• What Is a Theme?

Watch Core Theme: Stark

Why explore Stark?

• Examine the default markup and behavior provided by the Drupal system.
• Troubleshoot Drupal core behavior and output.
• Troubleshoot and isolate problems from other modules or themes.

According to Stark's README.txt, Stark is provided for demonstration purposes. As it applies no styling through CSS, what Stark demonstrates is Drupal's default markup, as defined in core system templates. Stark overrides nothing; it even sets the base theme to false so that you can truly get down to the bare bones default markup of Drupal's system templates and see the result.

Stark can help you learn and identify Drupal's system templates and markup. This demonstration theme will serve you best if you first set up your local environment for theme development. Once done, use browser tools to inspect elements or view source to see which of Drupal's system templates are in use for various elements. Part of truly mastering theming in Drupal is understanding what components you already have available to you, and this certainly includes Drupal's system templates.

Image

For troubleshooting, switching to Stark temporarily can help you determine whether problematic CSS or JavaScript coming from a module or complex theme is to blame.

Stark does include a few files that are there but don't actually do anything, except to show you that you could use them.

• Stark's css/layout.css exists, but is now blank (see Issue #2349711). It's blank so that Stark is truly "stark" now and truly allows you to see Drupal's default output with a browser's default styling.
• To the same purpose and in the same issue, (#2349711), Stark no longer removes normalize.css, a file is added by core. By keeping it, or rather by doing nothing to remove it as it did before, Stark remains a theme that can be used to examine and troubleshoot Drupal core's default behavior, which includes the addition of normalize.css.
• Stark's stark.libraries.yml exists to show you how to load a CSS library, and it does in fact add css/layout.css to the head of the HTML pages that use Stark, it just doesn't do anything to the layout, because layout.css is blank.
• Similarly, stark.breakpoints.yml does include some good examples of breakpoints, but since they don't correspond to any actual media queries in a CSS file in the Stark theme, this file doesn't really represent any real breakpoints or media queries in Stark. (See What Is a Breakpoint YAML File? to learn more about the purpose of a THEME-OR-MODULE.breakpoints.yml file).

Recap

In this tutorial, we explored Stark, a core Drupal theme. We learned what the purpose of Stark is and why it can be useful to enable and use Stark, especially when you want to learn about Drupal's system template files or need to troubleshoot certain problems with your Drupal site.

Further your understanding

• Explain two use cases for utilizing Stark to a colleague.
• What is the core system template for the main menu?
• Describe a troubleshooting situation in which enabling Stark might be useful.

Additional resources

• Configure Your Local Environment for Theme Development (Drupalize.Me)