Show theme switcher widget at the bottom of your AppGini app, similar to the demo at https://demos.appgini.com/northwind/

README.md

Steps to add a theme switcher to your AppGini app

1. Place the code below in the generated hooks/footer-extras.php file.
2. Open the folder where AppGini is installed, typically C:\program files\appgini and navigate to the add-ons\themes folder.
3. Copy all the CSS files in that folder to the resources\initializr\css folder inside your AppGini app.

If you follow the above steps, you should be able to switch your app themes like this:

footer-extras.php

<?php if(!$_REQUEST['Embedded']) { ?>
  <div id="demo-tools" class="hidden text-center">
    <div class="btn-group" style="width: 98%; max-width: 32em;">
      <button type="button" class="btn btn-default" id="prev-theme" title="Previous theme" style="width: 3em;"><i class="glyphicon glyphicon-triangle-left"></i></button>
      <button type="button" class="btn btn-default active" id="demo-options" style="width: 20em;">
        <span class="hidden-xs hidden-sm">Active theme</span>
        <span class="badge" id="demo-theme-name">Bootstrap</span>
      </button>
      <button type="button" class="btn btn-default" id="next-theme" title="Next theme" style="width: 3em;"><i class="glyphicon glyphicon-triangle-right"></i></button>

      <button type="button" class="btn btn-default" id="compact-toggle" title="Compact/Large" style="width: 3em;"><i class="glyphicon glyphicon-resize-full"></i></button>
      
      <button type="button" class="btn btn-default" id="hide-demo-tools" title="Hide me!" style="width: 3em;">
        <i class="glyphicon glyphicon-remove"></i>
      </button>
    </div>
  </div>

  <div id="restore-demo-tools" class="hidden text-left">
    <button type="button" class="btn btn-default" title="Change theme"><i class="glyphicon glyphicon-cog"></i></button>
  </div>
  
  <style>
    #demo-tools, #restore-demo-tools {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1030;
      padding: 5px;
    }
    #restore-demo-tools {
      width: 100px;
    }
    #restore-demo-tools button {
      box-shadow: 0px 0px 10px 1px #000;
    }
    #demo-tools .btn{
      white-space: normal;
    }
    @media (max-width: 991px){
      #demo-tools .btn { max-width: 32%; }
    }
  </style>
  
  <script>
    var notEmbedded = true;

    const themes = [
      'bootstrap.css',
      'cerulean.css',
      'cosmo.css',
      'cyborg.css',
      'darkly.css',
      'flatly.css',
      'journal.css',
      'paper.css',
      'readable.css',
      'sandstone.css',
      'simplex.css',
      'slate.css',
      'spacelab.css',
      'superhero.css',
      'united.css',
      'yeti.css'
    ];

    const demoToolsSameHeight = () => {
      if(notEmbedded === undefined) return;
      var maxHeight = 30;
      $j('#demo-tools .btn').each(function(){
        var bh = $j(this).height();
        if(bh > maxHeight) maxHeight = bh;
      });
      $j('#demo-tools .btn').height(maxHeight);
    };

    const cookie = (name, val) => {
      if(val !== undefined) localStorage.setItem(name, val);
      return localStorage.getItem(name);
    }

    const applyDemoToolsVisibility = (viz) => {
      if(notEmbedded === undefined) return;
      if(viz === undefined) viz = cookie('displayDemoTools');
      if(viz === 'null') viz = 'on';

      $j('#restore-demo-tools').toggleClass('hidden', viz == 'on');
      $j('#demo-tools').toggleClass('hidden', viz != 'on');
      if(viz === 'on') demoToolsSameHeight();

      cookie('displayDemoTools', viz);
    }

    const applyTheme = (newTheme) => {
      /* get configured theme */
      var theme = newTheme;
      var prePath = <?php echo json_encode(PREPEND_PATH); ?>;
      theme = theme || cookie('theme');
      theme = theme || 'bootstrap.css'; // default theme if no cookie and no theme passed
      
      if(!theme.match(/.*?\.css$/)) return;

      /* remove current theme */
      $j('link[rel=stylesheet][href*="initializr/css/"]').remove();
      $j('link[rel=stylesheet][href="dynamic.css"]').remove();
      $j('body > div.users-area')
        .toggleClass('theme-3d', theme == 'bootstrap.css')
        .removeClass(themes.map((theme) => 'theme-' + theme.replace(/\.css$/, '')).join(' '))
        .addClass(`theme-${theme.replace(/\.css$/, '')}`);

      /* apply configured theme */
      $j('head')
        .append(`<link rel="stylesheet" href="${prePath}resources/initializr/css/${theme}">`);
      if(theme == 'bootstrap.css')
        $j('head')
          .append(`<link rel="stylesheet" href="${prePath}resources/initializr/css/bootstrap-theme.css">`);

      $j('head').append(`<link rel="stylesheet" href="${prePath}dynamic.css">`);
      
      /* update displayed theme name */
      $j('#demo-theme-name').html(ucfirst(theme.replace(/\.css$/, '')));
    
      /* Apply navbar color, bgcolor and border styles to #demo-tools */
      $j('#demo-tools').css({
        'border': $j('.navbar').css('border'),
        'background-color': $j('.navbar').css('background-color')
      });
    }

    const compact = (turnOn) => {
      // on by default
      if(turnOn === undefined)
        turnOn = (cookie('compactMode') != 'false');

      if(notEmbedded !== undefined)
        $j('#compact-toggle > .glyphicon')
          .toggleClass('glyphicon-resize-small', !turnOn)
          .toggleClass('glyphicon-resize-full', turnOn);

      $j('body > div.users-area').toggleClass('theme-compact', turnOn);
      cookie('compactMode', turnOn ? 'true' : 'false');
    }

    const ucfirst = (str) => {
      str += '';
      var f = str.charAt(0).toUpperCase();
      return f + str.substr(1);
    }

    $j(() => {
      /* Remove the bottom nav */
      $j('.navbar-fixed-bottom').remove();
      
      /* Apply navbar color, bgcolor and border styles to #demo-tools */
      $j('#demo-tools').css({
        'border': $j('.navbar').css('border'),
        'background-color': $j('.navbar').css('background-color')
      });

      /* initially, based on stored settings: */
      /* toggle theme switcher */
      applyDemoToolsVisibility();
      /* toggle theme compactness */
      compact();
      /* apply theme */
      applyTheme();
      
      /* Same height for all #demo-tools buttons */
      setTimeout(demoToolsSameHeight, 2500);
      
      $j('#next-theme, #prev-theme').on('click', function() {
        var next = ($j(this).attr('id') == 'next-theme'),
          themeIndex = themes.indexOf(cookie('theme'));

        if(themeIndex == -1) themeIndex = 0;

        if(next) {
          themeIndex++;
          if(themeIndex >= themes.length) themeIndex = 0;
        } else {
          themeIndex--;
          if(themeIndex < 0) themeIndex = themes.length - 1;
        }

        cookie('theme', themes[themeIndex]);
        applyTheme(themes[themeIndex]);
        demoToolsSameHeight();
      });

      $j('#compact-toggle').click(function() {
        compact(
          $j(this).children('.glyphicon').hasClass('glyphicon-resize-small')
        );
      })
      
      $j('#hide-demo-tools').click(function() {
        applyDemoToolsVisibility('off');
      });

      $j('#restore-demo-tools').on('click', 'button', function() {
        applyDemoToolsVisibility('on');
      })
    });
  </script>
<?php } ?>