templates/backend/base/_theme_switcher.html.twig line 1

Open in your IDE?
  1. <button class="btn btn-grd btn-grd-primary position-fixed bottom-0 end-0 m-3 d-flex align-items-center gap-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop">
  2.     <i class="material-icons-outlined">tune</i>Customize
  3. </button>
  5. <div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="staticBackdrop">
  6.     <div class="offcanvas-header border-bottom h-70">
  7.         <div class="">
  8.             <h5 class="mb-0">Theme Customizer</h5>
  9.             <p class="mb-0">Customize your theme</p>
  10.         </div>
  11.         <a href="javascript:;" class="primaery-menu-close" data-bs-dismiss="offcanvas">
  12.             <i class="material-icons-outlined">close</i>
  13.         </a>
  14.     </div>
  15.     <div class="offcanvas-body">
  16.         <div>
  17.             <p>Theme variation</p>
  18.             <div class="row g-3">
  19.                 <div class="col-12 col-xl-6">
  20.                     <input type="radio" class="btn-check" name="theme-options" id="BlueTheme" checked>
  21.                     <label class="btn btn-outline-secondary d-flex flex-column gap-1 align-items-center justify-content-center p-4" for="BlueTheme">
  22.                         <span class="material-icons-outlined">contactless</span>
  23.                         <span>Blue</span>
  24.                     </label>
  25.                 </div>
  26.                 <div class="col-12 col-xl-6">
  27.                     <input type="radio" class="btn-check" name="theme-options" id="LightTheme">
  28.                     <label class="btn btn-outline-secondary d-flex flex-column gap-1 align-items-center justify-content-center p-4" for="LightTheme">
  29.                         <span class="material-icons-outlined">light_mode</span>
  30.                         <span>Light</span>
  31.                     </label>
  32.                 </div>
  33.                 <div class="col-12 col-xl-6">
  34.                     <input type="radio" class="btn-check" name="theme-options" id="DarkTheme">
  35.                     <label class="btn btn-outline-secondary d-flex flex-column gap-1 align-items-center justify-content-center p-4" for="DarkTheme">
  36.                         <span class="material-icons-outlined">dark_mode</span>
  37.                         <span>Dark</span>
  38.                     </label>
  39.                 </div>
  40.                 <div class="col-12 col-xl-6">
  41.                     <input type="radio" class="btn-check" name="theme-options" id="SemiDarkTheme">
  42.                     <label class="btn btn-outline-secondary d-flex flex-column gap-1 align-items-center justify-content-center p-4" for="SemiDarkTheme">
  43.                         <span class="material-icons-outlined">contrast</span>
  44.                         <span>Semi Dark</span>
  45.                     </label>
  46.                 </div>
  47.                 <div class="col-12 col-xl-6">
  48.                     <input type="radio" class="btn-check" name="theme-options" id="BoderedTheme">
  49.                     <label class="btn btn-outline-secondary d-flex flex-column gap-1 align-items-center justify-content-center p-4" for="BoderedTheme">
  50.                         <span class="material-icons-outlined">border_style</span>
  51.                         <span>Bordered</span>
  52.                     </label>
  53.                 </div>
  54.             </div>
  55.             <!--end row-->
  56.         </div>
  57.     </div>
  58. </div>