dsfr4drupal-1.x-dev/components/display-modal/display-modal.twig

{# This component needs access to the "dsfr_path" variable. It is therefore necessary to authorize the transmission of the context. #}
{% embed 'dsfr4drupal:modal' with {
  html_id: 'modal-display-settings',
  size: 'sm',
  title: title|default('Display settings'|t),
} %}
  {% block modal_content %}
    <div class="fr-display">
      <fieldset class="fr-fieldset">
        <legend class="fr-fieldset__legend--regular fr-fieldset__legend">
          {{ 'Choose a theme to customize the appearance of the site.'|t }}
        </legend>
        <div class="fr-fieldset__element">
          <div class="fr-radio-group fr-radio-rich">
            <input value="light" type="radio" id="fr-radios-theme-light" name="fr-radios-theme">
            <label class="fr-label" for="fr-radios-theme-light">{{ 'Light theme'|t }}</label>
            <div class="fr-radio-rich__img">
              <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="{{ dsfr_path }}artwork/pictograms/environment/sun.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="{{ dsfr_path }}artwork/pictograms/environment/sun.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="{{ dsfr_path }}artwork/pictograms/environment/sun.svg#artwork-major"></use>
              </svg>
            </div>
          </div>
        </div>
        <div class="fr-fieldset__element">
          <div class="fr-radio-group fr-radio-rich">
            <input value="dark" type="radio" id="fr-radios-theme-dark" name="fr-radios-theme">
            <label class="fr-label" for="fr-radios-theme-dark">{{ 'Dark theme'|t }}</label>
            <div class="fr-radio-rich__img">
              <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="{{ dsfr_path }}artwork/pictograms/environment/moon.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="{{ dsfr_path }}artwork/pictograms/environment/moon.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="{{ dsfr_path }}artwork/pictograms/environment/moon.svg#artwork-major"></use>
              </svg>
            </div>
          </div>
        </div>
        <div class="fr-fieldset__element">
          <div class="fr-radio-group fr-radio-rich">
            <input value="system" type="radio" id="fr-radios-theme-system" name="fr-radios-theme">
            <label class="fr-label" for="fr-radios-theme-system">
              {{ 'System'|t }}
              <span class="fr-hint-text">{{ 'Use system settings'|t }}</span>
            </label>
            <div class="fr-radio-rich__img">
              <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px">
                <use class="fr-artwork-decorative" href="{{ dsfr_path }}artwork/pictograms/system/system.svg#artwork-decorative"></use>
                <use class="fr-artwork-minor" href="{{ dsfr_path }}artwork/pictograms/system/system.svg#artwork-minor"></use>
                <use class="fr-artwork-major" href="{{ dsfr_path }}artwork/pictograms/system/system.svg#artwork-major"></use>
              </svg>
            </div>
          </div>
        </div>
      </fieldset>
    </div>
  {% endblock %}
{% endembed %}