• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>Theme Switcher</title>
      <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
      <style>
        body {
          background: #e2e2e2;
        }
    
        /* RANDOM
    ----------------------------------------------------- */
    
        .caption-row {
          display: flex;
          align-items: center;
        }
    
        .caption-row [random] {
          margin-left: auto;
        }
    
        .caption-row [theme] {
          margin-left: 15px;
        }
    
        @keyframes bodyGradient {
          0% {
            background-position: 52% 0;
          }
          50% {
            background-position: 49% 100%;
          }
          100% {
            background-position: 52% 0;
          }
        }
    
        /* RANDOM BUTTON */
    
        @keyframes RANDOM {
          0% {
            color: red;
          }
          16.667% {
            color: orange;
          }
          33.334% {
            color: yellow;
          }
          50% {
            color: green;
          }
          66.667% {
            color: blue;
          }
          83.334% {
            color: purple;
          }
        }
    
        [random] {
          background: #fff;
          border: 1px solid #e6e6e6;
          border-radius: 4px;
          cursor: pointer;
          height: 50px;
          font-size: 1rem;
          outline: none;
        }
    
        [random]>* {
          padding: 0 1px;
        }
    
        .r {
          color: red;
          animation: RANDOM 5s infinite linear;
        }
    
        .a {
          color: orange;
          animation: RANDOM 4s .6s infinite linear;
        }
    
        .n {
          color: yellow;
          animation: RANDOM 5s .3s infinite linear;
        }
    
        .d {
          color: green;
          animation: RANDOM 3s .8s infinite linear;
        }
    
        .o {
          color: blue;
          animation: RANDOM 6s .6s infinite linear;
        }
    
        .m {
          color: purple;
          animation: RANDOM 5s 1.5s infinite linear;
        }
      </style>
    </head>
    
    <body>
    
      <zing-grid id="randomGrid" sort filter pager page-size="5" src="https://jsdocs-9d00d.firebaseio.com/browsers">
        <zg-caption>
          <div class="caption-row">
            <span>Theme Switcher</span>
            <select theme>
                <option	value="default">Default</option>
                <option	value="dark">Dark</option>
                <option	value="android">Android</option>
                <option	value="ios">iOS</option>
                <option	value="random">Random</option>
              </select>
            <button random>
                <span class="r">R</span>
                <span class="a">A</span>
                <span class="n">N</span>
                <span class="d">D</span>
                <span class="o">O</span>
                <span class="m">M</span>
              </button>
          </div>
        </zg-caption>
      </zing-grid>
    
      <script>
        // Get grid style element
        let zgRef, zgStyle, zgStyleText, themeRandom = 'random';
        setTimeout(() => {
          zgRef = document.querySelector('zing-grid');
          zgStyle = zgRef.shadowRoot.querySelector('style');
          zgStyleText = zgStyle.textContent;
    
          // Theme <select> change
          const $themeSel = document.querySelector('select[theme]');
          $themeSel.addEventListener('change', setTheme, {
            passive: true
          });
    
          // `Random` button click event
          document.querySelector('[random]').addEventListener('click', e => randomize(data => {
            // Set 'theme' dropdown to 'random'
            $themeSel.value = 'random';
          }), {
            passive: true
          });
        }, 0);
    
        // Randomize grid colors
        function randomize(cb) {
          // Set theme to 'random' to accept `newStyle` styles
          randomGrid.setAttribute('theme', themeRandom);
    
          // Set styles
          const newStyle = `
        :host([theme="${themeRandom}"]) {
          /* BACKGROUND */
          --theme-background-color: ${randRGBa(.2)};
    
          /* BORDER */
          --theme-border-color: ${randRGBa(.7)};
    
          /* COLOR */
          --theme-color-primary: ${randRGBa(1)};
          --theme-color-secondary: var(--theme-color-primary);
    
          /* FONT */
          --theme-color: ${randRGBa(1)};
          --theme-color_alt: ${randRGBa(1)};
          --theme-font-family: 'Roboto', verdana, sans-serif;
          --theme-font-size: ${rand(.7, 1.2)}rem;
          --theme-font-style: normal;
          --theme-font-weight: normal;
          --theme-line-height: 1rem;
    
          /* --------------------------------------- */
    
          /* ZG-CAPTION
          ------------------------------------------ */
          --zg-caption-background: ${randRGBa(1)};
    
          /* ZG-HEAD-CELL
          ------------------------------------------ */
          --zg-head-cell-background: ${randRGBa(.2)};
          --zg-head-cell-parent-background: ${randRGBa(.2)};
    
          /* ZG-INPUT
          ------------------------------------------ */
    			--zg-input-background: ${randRGBa(.2)};
    
          /* ZG-PAGER
          ------------------------------------------ */
          --zg-pager-background: ${randRGBa(1)};
    
          /* ZG-ROW
          ------------------------------------------ */
          --zg-row-body-background_even: ${randRGBa(.2)};
          --zg-row-body-background_odd: ${randRGBa(.2)};
    
          /* ZG-SELECT
          ------------------------------------------ */
    			--zg-select-text-background: ${randRGBa(.2)};
        }
      `;
    
          // Set <body> background
          const $body = document.querySelector('body');
          $body.style.animation = `bodyGradient 10s ease infinite`;
          $body.style.background = `linear-gradient(-45deg, ${randRGBa(.2)}, ${randRGBa(.6)}) 0% 0% / 200% 200%`;
    
          // Apply new styles to the grid
          zgStyle.innerHTML = '';
          zgStyle.insertAdjacentText('afterbegin', `${newStyle} ${zgStyleText}`);
    
          if (cb) cb();
        }
    
        // Set <zing-grid> [theme]
        function setTheme(e, manualType) {
          const $EL = e.nodeName ? e : e.srcElement;
          const VALUE = $EL.value;
          if (!VALUE) return;
          // If 'random' theme
          if (VALUE === 'random') randomize();
          // Otherwise, set internal theme
          else zgRef.setAttribute('theme', VALUE);
        }
    
        // Random fn
        function rand(min, max) {
          min = Math.ceil(min);
          max = Math.floor(max);
          return Math.floor(Math.random() * (max - min + 1)) + min;
        }
    
        // Set random rgba value
        function randRGBa(opacity) {
          return `rgba(${rand(1, 255)}, ${rand(1, 255)}, ${rand(1, 255)}, ${opacity})`;
        }
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>Theme Switcher</title>
      <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    </head>
    
    <body>
    
      <zing-grid id="randomGrid" sort filter pager page-size="5" src="https://jsdocs-9d00d.firebaseio.com/browsers">
        <zg-caption>
          <div class="caption-row">
            <span>Theme Switcher</span>
            <select theme>
                <option	value="default">Default</option>
                <option	value="dark">Dark</option>
                <option	value="android">Android</option>
                <option	value="ios">iOS</option>
                <option	value="random">Random</option>
              </select>
            <button random>
                <span class="r">R</span>
                <span class="a">A</span>
                <span class="n">N</span>
                <span class="d">D</span>
                <span class="o">O</span>
                <span class="m">M</span>
              </button>
          </div>
        </zg-caption>
      </zing-grid>
    
    </body>
    
    </html>
    body {
      background: #e2e2e2;
    }
    
    /* RANDOM
    ----------------------------------------------------- */
    
    .caption-row {
      display: flex;
      align-items: center;
    }
    
    .caption-row [random] {
      margin-left: auto;
    }
    
    .caption-row [theme] {
      margin-left: 15px;
    }
    
    @keyframes bodyGradient {
      0% {
        background-position: 52% 0;
      }
      50% {
        background-position: 49% 100%;
      }
      100% {
        background-position: 52% 0;
      }
    }
    
    /* RANDOM BUTTON */
    
    @keyframes RANDOM {
      0% {
        color: red;
      }
      16.667% {
        color: orange;
      }
      33.334% {
        color: yellow;
      }
      50% {
        color: green;
      }
      66.667% {
        color: blue;
      }
      83.334% {
        color: purple;
      }
    }
    
    [random] {
      background: #fff;
      border: 1px solid #e6e6e6;
      border-radius: 4px;
      cursor: pointer;
      height: 50px;
      font-size: 1rem;
      outline: none;
    }
    
    [random]>* {
      padding: 0 1px;
    }
    
    .r {
      color: red;
      animation: RANDOM 5s infinite linear;
    }
    
    .a {
      color: orange;
      animation: RANDOM 4s .6s infinite linear;
    }
    
    .n {
      color: yellow;
      animation: RANDOM 5s .3s infinite linear;
    }
    
    .d {
      color: green;
      animation: RANDOM 3s .8s infinite linear;
    }
    
    .o {
      color: blue;
      animation: RANDOM 6s .6s infinite linear;
    }
    
    .m {
      color: purple;
      animation: RANDOM 5s 1.5s infinite linear;
    }
    // Get grid style element
    let zgRef, zgStyle, zgStyleText, themeRandom = 'random';
    setTimeout(() => {
      zgRef = document.querySelector('zing-grid');
      zgStyle = zgRef.shadowRoot.querySelector('style');
      zgStyleText = zgStyle.textContent;
    
      // Theme <select> change
      const $themeSel = document.querySelector('select[theme]');
      $themeSel.addEventListener('change', setTheme, {
        passive: true
      });
    
      // `Random` button click event
      document.querySelector('[random]').addEventListener('click', e => randomize(data => {
        // Set 'theme' dropdown to 'random'
        $themeSel.value = 'random';
      }), {
        passive: true
      });
    }, 0);
    
    // Randomize grid colors
    function randomize(cb) {
      // Set theme to 'random' to accept `newStyle` styles
      randomGrid.setAttribute('theme', themeRandom);
    
      // Set styles
      const newStyle = `
        :host([theme="${themeRandom}"]) {
          /* BACKGROUND */
          --theme-background-color: ${randRGBa(.2)};
    
          /* BORDER */
          --theme-border-color: ${randRGBa(.7)};
    
          /* COLOR */
          --theme-color-primary: ${randRGBa(1)};
          --theme-color-secondary: var(--theme-color-primary);
    
          /* FONT */
          --theme-color: ${randRGBa(1)};
          --theme-color_alt: ${randRGBa(1)};
          --theme-font-family: 'Roboto', verdana, sans-serif;
          --theme-font-size: ${rand(.7, 1.2)}rem;
          --theme-font-style: normal;
          --theme-font-weight: normal;
          --theme-line-height: 1rem;
    
          /* --------------------------------------- */
    
          /* ZG-CAPTION
          ------------------------------------------ */
          --zg-caption-background: ${randRGBa(1)};
    
          /* ZG-HEAD-CELL
          ------------------------------------------ */
          --zg-head-cell-background: ${randRGBa(.2)};
          --zg-head-cell-parent-background: ${randRGBa(.2)};
    
          /* ZG-INPUT
          ------------------------------------------ */
    			--zg-input-background: ${randRGBa(.2)};
    
          /* ZG-PAGER
          ------------------------------------------ */
          --zg-pager-background: ${randRGBa(1)};
    
          /* ZG-ROW
          ------------------------------------------ */
          --zg-row-body-background_even: ${randRGBa(.2)};
          --zg-row-body-background_odd: ${randRGBa(.2)};
    
          /* ZG-SELECT
          ------------------------------------------ */
    			--zg-select-text-background: ${randRGBa(.2)};
        }
      `;
    
      // Set <body> background
      const $body = document.querySelector('body');
      $body.style.animation = `bodyGradient 10s ease infinite`;
      $body.style.background = `linear-gradient(-45deg, ${randRGBa(.2)}, ${randRGBa(.6)}) 0% 0% / 200% 200%`;
    
      // Apply new styles to the grid
      zgStyle.innerHTML = '';
      zgStyle.insertAdjacentText('afterbegin', `${newStyle} ${zgStyleText}`);
    
      if (cb) cb();
    }
    
    // Set <zing-grid> [theme]
    function setTheme(e, manualType) {
      const $EL = e.nodeName ? e : e.srcElement;
      const VALUE = $EL.value;
      if (!VALUE) return;
      // If 'random' theme
      if (VALUE === 'random') randomize();
      // Otherwise, set internal theme
      else zgRef.setAttribute('theme', VALUE);
    }
    
    // Random fn
    function rand(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    
    // Set random rgba value
    function randRGBa(opacity) {
      return `rgba(${rand(1, 255)}, ${rand(1, 255)}, ${rand(1, 255)}, ${opacity})`;
    }