diff --git a/modules/theming_example/css/theming_example.css b/modules/theming_example/css/theming_example.css
new file mode 100644
index 0000000..a24c698
--- /dev/null
+++ b/modules/theming_example/css/theming_example.css
@@ -0,0 +1,11 @@
+/*
+ * style the list
+ * for OL you can have
+ * decimal | lower-roman | upper-roman | lower-alpha | upper-alpha
+ * for UL you can have
+ * disc | circle | square or an image eg url(x.png)
+ * you can also have 'none'
+ */
+ol.theming-example-list {
+  list-style-type: upper-alpha;
+}
diff --git a/modules/theming_example/src/Controller/ThemingPageController.php b/modules/theming_example/src/Controller/ThemingPageController.php
new file mode 100644
index 0000000..3824f94
--- /dev/null
+++ b/modules/theming_example/src/Controller/ThemingPageController.php
@@ -0,0 +1,98 @@
+<?php
+
+/**
+ * @file
+ */
+
+namespace Drupal\theming_example\Controller;
+
+use Drupal\Core\StringTranslation\StringTranslationTrait;
+use Drupal\Core\Url;
+
+class ThemingPageController {
+
+  use StringTranslationTrait;
+
+  /**
+   * Initial landing page explaining the use of the module.
+   *
+   * We create a render array and specify the theme to be used through the use
+   * of #theme_wrappers. With all output, we aim to leave the content as a
+   * render array just as long as possible, so that other modules (or the theme)
+   * can alter it.
+   *
+   * @see render_example.module
+   * @see form_example_elements.inc
+   */
+  public function entryPage() {
+    $links = [];
+    $links[] = [
+      '#type' => 'link',
+      '#url' => Url::fromRoute('theming_example.list'),
+      '#title' => t('Simple page with a list'),
+    ];
+    $links[] = [
+      '#type' => 'link',
+      '#url' => Url::fromRoute('theming_example.form_select'),
+      '#title' => t('Simple form 1'),
+    ];
+    $links[] = [
+      '#type' => 'link',
+      '#url' => Url::fromRoute('theming_example.form_text'),
+      '#title' => t('Simple form 2'),
+    ];
+    $content = [
+      '#theme' => 'item_list',
+      '#theme_wrappers' => ['theming_example_content_array'],
+      '#items' => $links,
+      '#title' => t('Some examples of pages and forms that are run through theme functions.'),
+    ];
+
+    return $content;
+  }
+
+  /**
+   * The list page callback.
+   *
+   * An example page where the output is supplied as an array which is themed
+   * into a list and styled with css.
+   *
+   * In this case we'll use the core-provided theme_item_list as a #theme_wrapper.
+   * Any theme need only override theme_item_list to change the behavior.
+   */
+  public function list() {
+    $items = [
+      $this->t('First item'),
+      $this->t('Second item'),
+      $this->t('Third item'),
+      $this->t('Fourth item'),
+    ];
+
+    // First we'll create a render array that simply uses theme_item_list.
+    $title = $this->t("A list returned to be rendered using theme('item_list')");
+    $build['render_version'] = [
+      // We use #theme here instead of #theme_wrappers because theme_item_list()
+      // is the classic type of theme function that does not just assume a
+      // render array, but instead has its own properties (#type, #title, #items).
+      '#theme' => 'item_list',
+      // '#type' => 'ul',  // The default type is 'ul'
+      // We can easily make sure that a css or js file is present using #attached.
+      '#attached' => ['library' => ['theming_example/list']],
+      '#title' => $title,
+      '#items' => $items,
+      '#attributes' => ['class' => ['render-version-list']],
+    ];
+
+    // Now we'll create a render array which uses our own list formatter,
+    // theme('theming_example_list').
+    $title = $this->t("The same list rendered by theme('theming_example_list')");
+    $build['our_theme_function'] = array(
+      '#theme' => 'theming_example_list',
+      '#attached' => ['library' => ['theming_example/list']],
+      '#title' => $title,
+      '#items' => $items,
+    );
+    return $build;
+  }
+
+}
diff --git a/modules/theming_example/src/Form/SelectForm.php b/modules/theming_example/src/Form/SelectForm.php
new file mode 100644
index 0000000..d8198bf
--- /dev/null
+++ b/modules/theming_example/src/Form/SelectForm.php
@@ -0,0 +1,56 @@
+<?php
+
+
+namespace Drupal\theming_example\Form;
+
+
+use Drupal\Core\Form\FormBase;
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * A simple form that displays a select box and submit button.
+ *
+ * This form will be be themed by the 'theming_example_select_form' theme
+ * handler.
+ */
+class SelectForm extends FormBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getFormId() {
+    return 'theming_example_form_select';
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildForm(array $form, FormStateInterface $form_state) {
+    $options = [
+      'newest_first' => $this->t('Newest first'),
+      'newest_last' => $this->t('Newest last'),
+      'edited_first' => $this->t('Edited first'),
+      'edited_last' => $this->t('Edited last'),
+      'by_name' => $this->t('By name'),
+    ];
+    $form['choice'] = [
+      '#type' => 'select',
+      '#options' => $options,
+      '#title' => $this->t('Choose which ordering you want'),
+    ];
+    $form['submit'] = [
+      '#type' => 'submit',
+      '#value' => $this->t('Go'),
+    ];
+    return $form;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function submitForm(array &$form, FormStateInterface $form_state) {
+    $this->messenger()->addMessage($this->t('You chose %input',
+      ['%input' => $form_state->getValue('choice')]));
+  }
+
+}
diff --git a/modules/theming_example/src/Form/TextForm.php b/modules/theming_example/src/Form/TextForm.php
new file mode 100644
index 0000000..ae8f6dd
--- /dev/null
+++ b/modules/theming_example/src/Form/TextForm.php
@@ -0,0 +1,49 @@
+<?php
+
+
+namespace Drupal\theming_example\Form;
+
+
+use Drupal\Core\Form\FormBase;
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * A simple form that displays a textfield and submit button.
+ *
+ * This form will be rendered by theme('form') (theme_form() by default)
+ * because we do not provide a theme function for it here.
+ */
+class TextForm extends FormBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getFormId() {
+    return 'theming_example_form_text';
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildForm(array $form, FormStateInterface $form_state) {
+    $form['text'] = [
+      '#type' => 'textfield',
+      '#title' => t('Please input something!'),
+      '#required' => TRUE,
+    ];
+    $form['submit'] = [
+      '#type' => 'submit',
+      '#value' => $this->t('Go'),
+    ];
+    return $form;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function submitForm(array &$form, FormStateInterface $form_state) {
+    $this->messenger()->addMessage($this->t('You chose %input',
+      ['%input' => $form_state->getValue('text')]));
+  }
+
+}
diff --git a/modules/theming_example/templates/theming-example-content-array.html.twig b/modules/theming_example/templates/theming-example-content-array.html.twig
new file mode 100644
index 0000000..372c8b4
--- /dev/null
+++ b/modules/theming_example/templates/theming-example-content-array.html.twig
@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Theme a simple content array.
+ *
+ * This template uses the newer recommended format where a single
+ * render array is provided to the theme function.
+*/
+#}
+{% for item in element['#items'] %}
+  {% if not loop.index %}
+  {# The first paragraph is bolded. #}
+    <p><strong>{{ item }}</strong></p>
+  {% else %}
+  {# Following paragraphs are just output as routine paragraphs. #}
+    <p>{{ item }}</p>
+  {% endif %}
+{% endfor %}
diff --git a/modules/theming_example/templates/theming-example-list.html.twig b/modules/theming_example/templates/theming-example-list.html.twig
new file mode 100644
index 0000000..cddd070
--- /dev/null
+++ b/modules/theming_example/templates/theming-example-list.html.twig
@@ -0,0 +1 @@
+{{ content }}
diff --git a/modules/theming_example/templates/theming-example-text-form.html.twig b/modules/theming_example/templates/theming-example-text-form.html.twig
new file mode 100644
index 0000000..2162aec
--- /dev/null
+++ b/modules/theming_example/templates/theming-example-text-form.html.twig
@@ -0,0 +1,29 @@
+{#
+/**
+ * @file
+ * Template file for the theming example text form.
+ *
+ * Available custom variables:
+ * - $text_form: A string containing the pre-rendered form.
+ * - $text_form_content: An array of form elements keyed by the element name.
+ *
+ * The default example below renders the entire form and its form elements in
+ * a default order provided by Drupal.
+ *
+ * Alternatively, you may print each form element in the order you desire,
+ * adding any extra html markup you wish to decorate the form like this:
+ *
+ * <?php print $text_form_content['element_name']; ?>
+ *
+ * The following snippet will print the contents of the $text_form_content
+ * array, hidden in the source of the page, for you to discover the individual
+ * element names.
+ *
+ * <?php print '<!--' . print_r($text_form_content, TRUE) . '-->'; ?>
+ */
+#}
+<!-- theming-example-text-form template -->
+<div class="container-inline">
+{{ text_form }}
+</div>
+<!-- /theming-example-text-form template -->
diff --git a/modules/theming_example/tests/src/Functional/ThemingExampleTest.php b/modules/theming_example/tests/src/Functional/ThemingExampleTest.php
new file mode 100644
index 0000000..98a290d
--- /dev/null
+++ b/modules/theming_example/tests/src/Functional/ThemingExampleTest.php
@@ -0,0 +1,72 @@
+<?php
+
+namespace Drupal\Tests\theming_example\Functional;
+
+use Drupal\Tests\examples\Functional\ExamplesBrowserTestBase;
+
+/**
+ * Verify the tablesort functionality.
+ *
+ * @group tablesort_example
+ * @group examples
+ *
+ * @ingroup tablesort_example
+ */
+class ThemingExampleTest extends ExamplesBrowserTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * {@inheritdoc}
+   */
+  public static $modules = ['theming_example'];
+
+  /**
+   * The installation profile to use with this test.
+   *
+   * We need the 'minimal' profile in order to make sure the Tool block is
+   * available.
+   *
+   * @var string
+   */
+  protected $profile = 'minimal';
+  /**
+   * Verify the functionality of the example module.
+   */
+  public function testThemingPage() {
+    // No need to login for this test.
+    // Check that the main page has been themed (first line with <b>) and has
+    // content.
+    $this->drupalGet('/examples/theming_example');
+    $this->assertRaw('Some examples of pages and forms that are run through theme functions.</h1>');
+    $this->assertRaw('examples/theming_example/form_select">Simple form 1</a>');
+    $this->assertRaw('examples/theming_example/form_text">Simple form 2</a>');
+
+    // Visit the list demonstration page and check that css gets loaded
+    // and do some spot checks on how the two lists were themed.
+    $this->drupalGet('/examples/theming_example/theming_example_list_page');
+    // CSS should be always injected, because preprocess is set to false in *.libraries.yml
+    $this->assertPattern('/<link rel="stylesheet".*theming_example.css/');
+    $first_ul = $this->xpath('//ul[contains(@class,"render-version-list")]');
+    $this->assertTrue($first_ul[0]->li[0] == 'First item');
+    $second_ul = $this->xpath('//ol[contains(@class,"theming-example-list")]');
+    $this->assertTrue($second_ul[0]->li[1] == 'Second item');
+
+    // Visit the select form page to do spot checks.
+    $this->drupalGet('/examples/theming_example/form_select');
+    // We did explicit theming to accomplish the below...
+    $this->assertRaw('<strong>Choose which ordering you want</strong>');
+    $this->assertRaw('<div class="container-inline"><div class="form-item form-type-select form-item-choice">');
+    $this->assertNoPattern('/<link rel="stylesheet".*theming_example.css/');
+
+    // Visit the text form page and do spot checks.
+    $this->drupalGet('/examples/theming_example/form_text');
+    $this->assertText('Please input something!');
+    // If it were themed normally there would be a div wrapper in our pattern.
+    $this->assertPattern('%</div>\s*<input +type="submit"%');
+  }
+
+}
diff --git a/modules/theming_example/theming_example.info.yml b/modules/theming_example/theming_example.info.yml
new file mode 100644
index 0000000..d5fba1c
--- /dev/null
+++ b/modules/theming_example/theming_example.info.yml
@@ -0,0 +1,5 @@
+name: Theming example
+type: module
+description: An example module showing how to use theming.
+package: Example modules
+core_version_requirement: ^8.8 || ^9
diff --git a/modules/theming_example/theming_example.libraries.yml b/modules/theming_example/theming_example.libraries.yml
new file mode 100644
index 0000000..420eb2e
--- /dev/null
+++ b/modules/theming_example/theming_example.libraries.yml
@@ -0,0 +1,4 @@
+list:
+  css:
+    theme:
+      css/theming_example.css: {preprocess: false}
diff --git a/modules/theming_example/theming_example.module b/modules/theming_example/theming_example.module
new file mode 100644
index 0000000..e9acce7
--- /dev/null
+++ b/modules/theming_example/theming_example.module
@@ -0,0 +1,211 @@
+<?php
+
+/**
+ * @file
+ * Explains how a module declares theme functions, preprocess functions, and
+ * templates.
+ *
+ * The underlying approach is that a module should allow themes to do all
+ * rendering, but provide default implementations where appropriate.
+ *
+ * Modules are also expected to leave data as render arrays as long as possible,
+ * leaving rendering to theme functions and templates.
+ */
+
+/**
+ * @defgroup theming_example Example: Theming
+ * @ingroup examples
+ * @{
+ * Example of Drupal theming.
+ *
+ * The theming_example module attempts to show how module developers can add
+ * theme functions to their projects so that themes can modify output.
+ *
+ * Module developers should to strive to avoid hard-wiring any HTML into the
+ * output of their code, this should all be done in theme functions.
+ *
+ * Starting with the first example, function 'theming_example_page()':
+ * the output is put into an array $content which is then fed to a theming
+ * function 'theme_theming_example_content_array()' which loops over the
+ * content, wrapping it in html in the process.
+ *
+ * In order to get function 'theme_theming_example_content_array()' recognized
+ * it needs to be registered with the module theme register function of the type
+ * 'hook_theme'.
+ *
+ * function 'theming_example_theme()' does this for this module.
+ * for details of what can be done in this hook see the link to api.drupal.org
+ *
+ * The functions 'theming_example_list_page()' and theming_example_order_form()
+ * work in the same way.
+ *
+ * In 'theme_theming_example_list_page()' the content is themed as an
+ * ordered list and given a class attribute 'theming_example_mylist' which
+ * is defined in theming_example.css
+ *
+ * In function 'theme_theming_example_order_form()' the title is loaded into a
+ * temporary variable '$title', deleted from the $form array and output
+ * wrapped in html. The rest of the form is wrapped in a div using '#prefix'
+ * and '#suffix'
+ *
+ * The theming functions can be copied to a theme's template.php, renaming
+ * appropriately, so if your theme is called 'mytheme' you would copy function
+ * 'theme_theming_example_content_array()' to function
+ * 'mytheme_theming_example_page()' in template.php and it will be used instead
+ * of the original.
+ *
+ * The fourth example shows the use of a template file
+ * 'theming_example_text_form.tpl.php'
+ * This file can be copied to a theme's folder and it will be used instead.
+ *
+ * This example also shows what can be done using Drupal's
+ * template_preprocess_HOOK method. In this case it modifies the output so
+ * that a themer can output the whole form or gain control over some of its
+ * parts in the template file.
+ */
+
+/**
+ * Implements hook_menu().
+ *
+ * The @link menu_example.module Menu Example @endlink provides extensive
+ * examples for hook_menu().
+ */
+function theming_example_menu() {
+  $items['examples/theming_example'] = array(
+    'title' => 'Theming Example',
+    'description' => 'Some theming examples.',
+    'page callback' => 'theming_example_page',
+    'access callback' => TRUE,
+    'access arguments' => array('access content'),
+  );
+  $items['examples/theming_example/theming_example_list_page'] = array(
+    'title' => 'Theming a list',
+    'page callback' => 'theming_example_list_page',
+    'access arguments' => array('access content'),
+    'weight' => 1,
+  );
+  $items['examples/theming_example/theming_example_select_form'] = array(
+    'title' => 'Theming a form (select form)',
+    'page callback'    => 'drupal_get_form',
+    'page arguments'   => array('theming_example_select_form'),
+    'access arguments' => array('access content'),
+    'weight' => 2,
+  );
+  $items['examples/theming_example/theming_example_text_form'] = array(
+    'title' => 'Theming a form (text form)',
+    'page callback'    => 'drupal_get_form',
+    'page arguments'   => array('theming_example_text_form'),
+    'access arguments' => array('access content'),
+    'weight' => 3,
+  );
+
+  return $items;
+
+}
+
+/**
+ * Implements hook_theme().
+ *
+ * Defines the theming capabilities provided by this module.
+ */
+function theming_example_theme($existing, $type, $theme, $path) {
+  return array(
+    'theming_example_content_array' => array(
+      // We use 'render element' when the item to be passed is a self-describing
+      // render array (it will have #theme_wrappers)
+      'render element' => 'element',
+    ),
+    'theming_example_list' => array(
+      // We use 'variables' when the item to be passed is an array whose
+      // structure must be described here.
+      'variables' => array(
+        'title' => NULL,
+        'items' => NULL,
+      ),
+    ),
+    'theming_example_select_form'  => array(
+      'render element' => 'form',
+    ),
+    'theming_example_text_form'  => array(
+      'render element' => 'form',
+      // In this one the rendering will be done by a template file
+      // (theming-example-text-form.tpl.php) instead of being rendered by a
+      // function. Note the use of dashes to separate words in place of
+      // underscores. The template file's extension is also left out so that
+      // it may be determined automatically depending on the template engine
+      // the site is using.
+      'template' => 'theming-example-text-form',
+    ),
+  );
+}
+function theming_example_page() {
+  $content[]['#markup']  = t('Some examples of pages and forms that are run through theme functions.');
+  $content[]['#markup']  = l(t('Simple page with a list'), 'examples/theming_example/theming_example_list_page');
+  $content[]['#markup']  = l(t('Simple form 1'), 'examples/theming_example/theming_example_select_form');
+  $content[]['#markup']  = l(t('Simple form 2'), 'examples/theming_example/theming_example_text_form');
+  $content['#theme_wrappers'] = array('theming_example_content_array');
+  return $content;
+}
+
+/**
+ * Theming a simple form.
+ *
+ * Since our form is named theming_example_select_form(), the default
+ * #theme function applied to is will be 'theming_example_select_form'
+ * if it exists. The form could also have specified a different
+ * #theme.
+ *
+ * Here we collect the title, theme it manually and
+ * empty the form title. We also wrap the form in a div.
+ */
+function theme_theming_example_select_form($variables) {
+  $form = $variables['form'];
+  $title = $form['choice']['#title'];
+  $form['choice']['#title'] = '';
+  $output = '<strong>' . $title . '</strong>';
+  $form['choice']['#prefix'] = '<div class="container-inline">';
+  $form['submit']['#suffix'] = '</div>';
+  $output .= drupal_render_children($form);
+  return $output;
+}
+
+/**
+ * Implements template_preprocess().
+ *
+ * We prepare variables for use inside the theming-example-text-form.tpl.php
+ * template file.
+ *
+ * In this example, we create a couple new variables, 'text_form' and
+ * 'text_form_content', that clean up the form output.  Drupal will turn the
+ * array keys in the $variables array into variables for use in the template.
+ *
+ * So $variables['text_form'] becomes available as $text_form in the template.
+ *
+ * @see theming-example-text-form.tpl.php
+ */
+function template_preprocess_theming_example_text_form(&$variables) {
+  $variables['text_form_content'] = array();
+  $text_form_hidden = array();
+
+  // Each form element is rendered and saved as a key in $text_form_content, to
+  // give the themer the power to print each element independently in the
+  // template file.  Hidden form elements have no value in the theme, so they
+  // are grouped into a single element.
+  foreach (element_children($variables['form']) as $key) {
+    $type = $variables['form'][$key]['#type'];
+    if ($type == 'hidden' || $type == 'token') {
+      $text_form_hidden[] = drupal_render($variables['form'][$key]);
+    }
+    else {
+      $variables['text_form_content'][$key] = drupal_render($variables['form'][$key]);
+    }
+  }
+  $variables['text_form_content']['hidden'] = implode($text_form_hidden);
+
+  // The entire form is then saved in the $text_form variable, to make it easy
+  // for the themer to print the whole form.
+  $variables['text_form'] = implode($variables['text_form_content']);
+}
+/**
+ * @} End of "defgroup theming_example".
+ */
diff --git a/modules/theming_example/theming_example.routing.yml b/modules/theming_example/theming_example.routing.yml
new file mode 100644
index 0000000..9c407be
--- /dev/null
+++ b/modules/theming_example/theming_example.routing.yml
@@ -0,0 +1,32 @@
+# Main page of the theming example.
+theming_example.entry:
+  path: '/examples/theming_example'
+  defaults:
+    _controller: '\Drupal\theming_example\Controller\ThemingPageController::entryPage'
+    _title: 'Theming example'
+  requirements:
+    _permission: 'access content'
+
+theming_example.list:
+  path: '/examples/theming_example/list'
+  defaults:
+    _controller: '\Drupal\theming_example\Controller\ThemingPageController::list'
+    _title: 'Theming a list'
+  requirements:
+    _permission: 'access content'
+
+theming_example.form_select:
+  path: '/examples/theming_example/form_select'
+  defaults:
+    _form: '\Drupal\theming_example\Form\SelectForm'
+    _title: 'Theming a form (select form)'
+  requirements:
+    _permission: 'access content'
+
+theming_example.form_text:
+  path: '/examples/theming_example/form_text'
+  defaults:
+    _form: '\Drupal\theming_example\Form\TextForm'
+    _title: 'Theming a form (text form)'
+  requirements:
+    _permission: 'access content'