Drupal theming is all about adding a personal touch to your website or online application. It's the process of designing and personalizing the layout and appearance of everything.

There are various ways to add themes to your website. You could either use default themes, contributed themes, third-party paid themes, or create custom themes. Developing your own theme will be helpful and convenient for easier customization of ​​your website’s layout and appearance, as well as enhancing customer journeys, aiming at business growth.

To create your own custom Drupal theme, you must follow a step-by-step process that includes working with specific theme files and library directories.

Let’s get started with creating a Drupal 10 theme for our Drupal website by following these steps.

Create UX Design

The first step in developing custom themes is to create an effective UX and UI design. Any well-designed website features that provide a seamless and organized user experience. The flow is intuitive, and all of the interactions a user requires are immediately available.

Choose a Base Theme

After a UX design is ready, choosing a base theme is a very important thing to do as it serves as a starting point for your custom theme. The base theme for the front end of your design depends on the underlying HTML/CSS framework you choose. It makes the theme development process easier as it will include most templates that need to be overridden in your custom theme

There are several base themes in Drupal 10 to choose from. Classy, Stable, or Bartik are a few base themes you can begin with. You could also opt to choose a contributed base theme from Drupal.org, such as Bootstrap or Zen.

Create a custom theme folder

Make a new directory for your own theme under the ‘web/themes/custom’ folder. Choose a name for your theme that is unique and does not clash with any other theme names.

Add the necessary files

Create the necessary files for your custom theme inside the created folder: 

  1.  custom_theme.info.yml - we need to specify basic information about your theme in this file, such as the name, description, and core version. 
    1. Make sure to inherit the Base Theme 
    2.  Define the regions of your theme where you want to place content, such as the header, footer, sidebar, or main content area.
  2. custom_theme.theme - Here, we can add custom PHP code to modify the behavior of your theme.
  3. custom_theme.ibraries.yml - In this file, we specify all the libraries we need for the theme (CSS AND JS)
  4. CSS files - Create CSS files as well where you add the styles for your theme. All these files can be inside a ‘css’ folder for better organizing.
  5. JS files - Lastly, add the JS files for your theme. All these files can be inside a ‘js’ folder for better organizing.
  6. Template files -  You can add as many template (twig) files as you want. This is used to override the theming of a certain page and control the output of Drupal's core and contributed modules. All these files should be added inside the ‘templates/[region-name]’ folder. It is also important to use the correct naming convention for it to work properly.

Finally, Test your theme

Now, it’s time to test your theme! Go ahead install and enable it on a Drupal 10 site, and make sure it looks and behaves as intended.

These are just general steps to create a Drupal 10 custom theme. Remember that developing a theme can be a complex process that requires knowledge of HTML, CSS, PHP, and Drupal's theming system. It is also critical to adhere to Drupal's best practices and code standards to ensure compatibility and maintenance.