Skip to content

{% themer %}

Concept

{% themer %} is an overrideable theme switcher, i.e. a <button> surrounding two icons.

Usually placed in body
1
2
3
4
5
<script src="{% static 'doTheme.js' %}"></script>
<html>
  {% togl icon1_css='override1' icon2_css='override2' btn_kls='override3' %}
  ...
</html>
Highlighted overrides
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<script src="{% static 'doTheme.js' %}"></script>
<html>
  <button onclick="toggleTheme()" type="button" class="override3" aria-label="Toggle dark mode">
    <span class="icon1_svg">
      <span class="sr-only">Light mode</span>
      <svg class="override1" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </span>
    <span class="icon2_svg">
      <span class="sr-only">Dark mode</span>
      <svg class="override2" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" stroke-linecap="round" stroke-linejoin="round"></path></svg>
    </span>
  </button>
</html>

Execution

A wrapper over toggle_icons() but specific to a toggle for the common sun and moon pattern.

Each icon uses the same signature as {% icon %}. To apply a value to the first icon, use the prefix icon_1. To apply a value to the second icon, use the prefix icon_2. If none are supplied, icon_1 will contain defaults for 'sun', icon_2 will contain defaults for 'moon'.

So with tog(icon_1_name='sun', icon_2_Name='moon'), would implement the equivalent of 2 {% icon %} template tags surrounded by a button, e.g.:

Django/Jinja
<button>
    {% icon name='sun' %}
    {% icon name='moon' %}
</button>

This implies that the svgs for sun and moon are present in the designated template folder.

Parameters:

Name Type Description Default
btn_kls str | None

Will populate the button's class attribute.. Defaults to "theme-toggler".

 'theme-toggler'
aria_label str | None

Will populate the button's aria-label attribute. Defaults to "Toggle mode".

 'Toggle dark mode'
icon1_name str | None

Will be used to create first {% icon %}. Defaults to "sun".

 'sun'
icon1_css str | None

Will be used to create first {% icon %}. Defaults to "sun_css".

 'sun_css'
icon1_parent_class str | None

Will be used to create first {% icon %}. Defaults to "icon1_svg".

 'icon1_svg'
icon1_pre_text str | None

Will be used to create first {% icon %}. Defaults to "Light mode".

 'Light mode'
icon1_pre_class str | None

Will be used to create first {% icon %}. Defaults to "sr-only".

 'sr-only'
icon2_name str | None

Will be used to create second {% icon %}. Defaults to "moon".

 'moon'
icon2_css str | None

Will be used to create second {% icon %}. Defaults to "moon_css".

 'moon_css'
icon2_parent_class str | None

Will be used to create second {% icon %}. Defaults to "icon2_svg".

 'icon2_svg'
icon2_pre_text str | None

Will be used to create second {% icon %}. Defaults to "Dark mode".

 'Dark mode'
icon2_pre_class str | None

Will be used to create second {% icon %}. Defaults to "sr-only".

 'sr-only'

Returns:

Name Type Description
SafeText SafeText

HTML fragment button
Source code in django_fragments/templatetags/fragments.py
Python
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
@register.simple_tag
def themer(
    btn_kls: str | None = "theme-toggler",
    aria_label: str | None = "Toggle dark mode",
    icon1_name: str | None = "sun",
    icon1_css: str | None = "sun_css",
    icon1_parent_class: str | None = "icon1_svg",
    icon1_pre_text: str | None = "Light mode",
    icon1_pre_class: str | None = "sr-only",
    icon2_name: str | None = "moon",
    icon2_css: str | None = "moon_css",
    icon2_parent_class: str | None = "icon2_svg",
    icon2_pre_text: str | None = "Dark mode",
    icon2_pre_class: str | None = "sr-only",
    **kwargs,
) -> SafeText:
    """A wrapper over `toggle_icons()` but specific to a toggle for the common sun and moon
    pattern.

    Each icon uses the same signature as {% icon %}. To apply a value to the first icon,
    use the prefix `icon_1`. To apply a value to the second icon, use the prefix `icon_2`. If
    none are supplied, icon_1 will contain defaults for 'sun', icon_2 will contain defaults
    for 'moon'.

    So with `tog(icon_1_name='sun', icon_2_Name='moon')`, would implement the equivalent of
    2 {% icon %} template tags surrounded by a button, e.g.:

    ```jinja
    <button>
        {% icon name='sun' %}
        {% icon name='moon' %}
    </button>
    ```

    This implies that the svgs for `sun` and `moon` are present in the designated template folder.

    Args:
        btn_kls (str | None, optional): Will populate the button's `class` attribute.. Defaults to "theme-toggler".
        aria_label (str | None, optional): Will populate the button's `aria-label` attribute. Defaults to "Toggle mode".
        icon1_name (str | None, optional): Will be used to create first {% icon %}. Defaults to "sun".
        icon1_css (str | None, optional): Will be used to create first {% icon %}. Defaults to "sun_css".
        icon1_parent_class (str | None, optional): Will be used to create first {% icon %}. Defaults to "icon1_svg".
        icon1_pre_text (str | None, optional): Will be used to create first {% icon %}. Defaults to "Light mode".
        icon1_pre_class (str | None, optional): Will be used to create first {% icon %}. Defaults to "sr-only".
        icon2_name (str | None, optional): Will be used to create second {% icon %}. Defaults to "moon".
        icon2_css (str | None, optional): Will be used to create second {% icon %}. Defaults to "moon_css".
        icon2_parent_class (str | None, optional): Will be used to create second {% icon %}. Defaults to "icon2_svg".
        icon2_pre_text (str | None, optional): Will be used to create second {% icon %}. Defaults to "Dark mode".
        icon2_pre_class (str | None, optional): Will be used to create second {% icon %}. Defaults to "sr-only".

    Returns:
        SafeText: HTML fragment button
    """
    return toggle_icons(
        btn_kls=btn_kls,
        aria_label=aria_label,
        **(
            dict(
                icon1_name=icon1_name,
                icon1_css=icon1_css,
                icon1_parent_class=icon1_parent_class,
                icon1_pre_text=icon1_pre_text,
                icon1_pre_class=icon1_pre_class,
                icon2_name=icon2_name,
                icon2_css=icon2_css,
                icon2_parent_class=icon2_parent_class,
                icon2_pre_text=icon2_pre_text,
                icon2_pre_class=icon2_pre_class,
            )
            | kwargs
        ),
    )