templates/partials/header.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title>{{ title }} | Fortified</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
  9.     <meta content="Coderthemes" name="author" />
  10.     <!-- App favicon -->
  11.     <link rel="shortcut icon" href="{{ asset('assets/images/favicon.ico') }}">
  12.     {{ pageCss|raw }}
  13.     <script>
  14.         function setTheme(themeName) {
  15.             localStorage.setItem('theme', themeName);
  16.             console.log(document.querySelector('body'));
  17.             document.querySelector('body').setAttribute('data-layout-color', themeName);
  18.         }
  19.         // function to toggle between light and dark theme
  20.         function toggleTheme() {
  21.             if (localStorage.getItem('theme') === 'dark'){
  22.                 setTheme('light');
  23.             } else {
  24.                 setTheme('dark');
  25.             }
  26.         }
  28.         function initTheme() {
  29.             if (localStorage.getItem('theme') === 'light') {
  30.                 setTheme('light');
  31.             } else {
  32.                 setTheme('dark');
  33.             }
  34.             document.querySelector(".theme-icon").addEventListener("click", () => {
  35.                 toggleTheme();
  36.             });
  37.         }
  39.         // Immediately invoked function to set the theme on initial load
  40.         (function () {
  41.             window.onload = (event) => {
  42.                 initTheme();
  43.             };
  44.         })();
  45.     </script>
  46.     <style>
  47.         .theme-icon i {
  48.             font-size: 32px;
  49.             vertical-align: middle;
  50.             line-height: 70px;
  51.         }
  53.         body:not([data-layout-color=light]) .theme-icon .fa-sun {
  54.             display: none;
  55.         }
  57.         body:not([data-layout-color=light]) .theme-icon .fa-moon {
  58.             display: inline-block;
  59.             color: var(--ct-body-color);
  60.         }
  62.         body[data-layout-color=light] .theme-icon .fa-sun {
  63.             display: inline-block;
  64.         }
  66.         body[data-layout-color=light] .theme-icon .fa-moon {
  67.             display: none;
  68.         }
  70.     </style>
  71. </head>