--- /dev/null
+{#
+/**
+ * @file
+ * Default theme implementation for the Appearance page.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the main container.
+ * - theme_groups: A list of theme groups. Each theme group contains:
+ * - attributes: HTML attributes specific to this theme group.
+ * - title: Title for the theme group.
+ * - state: State of the theme group, e.g. installed or uninstalled.
+ * - themes: A list of themes within the theme group. Each theme contains:
+ * - attributes: HTML attributes specific to this theme.
+ * - screenshot: A screenshot representing the theme.
+ * - description: Description of the theme.
+ * - name: Theme name.
+ * - version: The theme's version number.
+ * - is_default: Boolean indicating whether the theme is the default theme
+ * or not.
+ * - is_admin: Boolean indicating whether the theme is the admin theme or
+ * not.
+ * - notes: Identifies what context this theme is being used in, e.g.,
+ * default theme, admin theme.
+ * - incompatible: Text describing any compatibility issues.
+ * - operations: A list of operation links, e.g., Settings, Enable, Disable,
+ * etc. these links should only be displayed if the theme is compatible.
+ *
+ * @see template_preprocess_system_themes_page()
+ *
+ * @ingroup themeable
+ */
+#}
+<div{{ attributes }}>
+ {% for theme_group in theme_groups %}
+ {%
+ set theme_group_classes = [
+ 'system-themes-list',
+ 'system-themes-list-' ~ theme_group.state,
+ 'clearfix',
+ ]
+ %}
+ <div{{ theme_group.attributes.addClass(theme_group_classes) }}>
+ <h2 class="system-themes-list__header">{{ theme_group.title }}</h2>
+ {% for theme in theme_group.themes %}
+ {%
+ set theme_classes = [
+ theme.is_default ? 'theme-default',
+ theme.is_admin ? 'theme-admin',
+ 'theme-selector',
+ 'clearfix',
+ ]
+ %}
+ <div{{ theme.attributes.addClass(theme_classes) }}>
+ {% if theme.screenshot %}
+ {{ theme.screenshot }}
+ {% endif %}
+ <div class="theme-info">
+ <h3 class="theme-info__header">
+ {{- theme.name }} {{ theme.version -}}
+ {% if theme.notes %}
+ ({{ theme.notes|safe_join(', ') }})
+ {%- endif -%}
+ </h3>
+ <div class="theme-info__description">{{ theme.description }}</div>
+ {# Display operation links if the theme is compatible. #}
+ {% if theme.incompatible %}
+ <div class="incompatible">{{ theme.incompatible }}</div>
+ {% else %}
+ {{ theme.operations }}
+ {% endif %}
+ </div>
+ </div>
+ {% endfor %}
+ </div>
+ {% endfor %}
+</div>