1 files changed, 31 insertions, 0 deletions
diff --git a/templates/partials/theme_switcher.html b/templates/partials/theme_switcher.html
new file mode 100644
index 0000000..2e30f90
--- /dev/null
+++ b/templates/partials/theme_switcher.html
@@ -0,0 +1,31 @@
+<li class="theme-switcher-wrapper js">
+    {#- Create the localised strings for the title and aria-label attributes -#}
+    {%- set toggle_str = macros_translate::translate(key='toggle_mode', default='Toggle $MODE mode', language_strings=language_strings) -%}
+    {%- set dark_str = macros_translate::translate(key='dark', default='dark', language_strings=language_strings) -%}
+    {%- set light_str = macros_translate::translate(key='light', default='light', language_strings=language_strings) -%}
+
+    {%- set combined_mode_str = dark_str ~ "/" ~ light_str -%}
+    {%- set title_label = toggle_str | replace(from="$MODE", to=combined_mode_str) -%}
+    {%- set aria_label = toggle_str | replace(from="$MODE", to=dark_str) -%}
+
+    <div
+        title="{{ title_label }}"
+        class="theme-switcher"
+        tabindex="0"
+        role="button"
+        aria-label="{{ aria_label }}"
+        aria-pressed="false">
+    </div>
+
+    {%- set reset_str = macros_translate::translate(key='reset_mode', default='Reset mode to default', language_strings=language_strings) -%}
+
+    <div
+        title="{{ reset_str }}"
+        class="theme-resetter arrow"
+        tabindex="0"
+        role="button"
+        aria-hidden="true"
+        aria-label="{{ reset_str }}">
+    </div>
+
+</li>