Update your Daily Prebuilt with different themes!

ashley
ashley Member, Daily Alumni
edited June 2022 in Code Share

Here's a snippet that lets you add a few different popular text editor themes to your Daily call, updated on click.


<html>
<head>
  <title>Custom themed video chat</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>
  <style>
    body { font-family: "Arial", sans-serif; font-weight: 500; }
    h1 { color: #1f2d3d; }
    button {
      padding: 6px 16px 8px;
      border: 1px solid #1bebb9;
      border-radius: 8px;
      background-color: #1bebb9;
      -webkit-transition: border-color .2s;
      transition: border-color .2s;
      color: #1f2d3d;
      font-size: 12px;
      line-height: 16px;
      text-align: center;
      font-weight: 500;
      margin-top: 0.33em;
    }
    button:hover {
      cursor: pointer;
    }
    #join { 
      background-color: #1f2d3d; 
      color: white; 
      border: 1px solid #1f2d3d;
    }
  </style>
  </head>
<body>
  <header style="float:left;padding-bottom:1em;">
    <h1>
      Custom Daily room themes
    </h1>
    Your <a href="https://dashboard.daily.co/">Daily room URL</a>: 
    <input size="40" type="text" id="roomUrl" value="https://your-domain.daily.co/your-room">
    <br>
    <button id="join" onclick="start()">
      Join call
    </button>
    <aside>
      Choose a theme:
      <button id="fairyfloss">fairy floss</button>
      <button id="horizon">horizon</button>
      <button id="monokaiLight">monokai light</button>
      <button id="monokaiDark">monokai dark</button>
      <button id="synthwave">synthwave</button>
      <button id="darkness">total darkness</button>
    </aside>
  </header>
  <script>
  async function start() {
    if (typeof callFrame !== 'undefined') { 
      callFrame.destroy(); 
    }
    callFrame = DailyIframe.createFrame({
      url: document.getElementById("roomUrl").value,
      lang: "user",
      showLeaveButton: true,
      iframeStyle: {
        width: '90%',
        height: '90%',
      },
    });
    try {
      await callFrame.join();
    } catch (error) {
      // should let users know their URL is probably wrong here
      console.error(error);
    }
  };


  document.getElementById("fairyfloss").onclick = function setTheme() {
    callFrame.setTheme({
      colors: {
        accent: '#C2FFDF',
        accentText: '#716799',
        background: '#5A5475',
        backgroundAccent: '#FBFCFD',
        baseText: '#FF857F',
        border: '#E6C000',
        mainAreaBg: '#716799',
        mainAreaBgAccent: '#F8F8F2',
        mainAreaText: '#F8F8F0',
        supportiveText: '#F8F8F0'
      }
    });
  };


  document.getElementById("horizon").onclick = function setTheme() {
    callFrame.setTheme({
      colors: {
        accent: '#BB2B48',
        accentText: '#FFFFFF',
        background: '#F9EFED',
        backgroundAccent: '#FFFFFF',
        baseText: '#F56932',
        border: '#53878E',
        mainAreaBg: '#F5E5DF',
        mainAreaBgAccent: '#DF9359',
        mainAreaText: '#F9EFED',
        supportiveText: '#7B39B3'
      }
    });
  };


  document.getElementById("monokaiLight").onclick = function setTheme() {
    callFrame.setTheme({
      colors: {
        accent: '#D88727',
        accentText: '#FFFFFE',
        background: '#FFFFFE',
        backgroundAccent: '#F3F3F3',
        baseText: '#679C00',
        border: '#EBEFF4',
        mainAreaBg: '#F3F3F3',
        mainAreaBgAccent: '#9E8F2F',
        mainAreaText: '#FFFFFE',
        supportiveText: '#679C00',
      }
    });
  };


  document.getElementById("monokaiDark").onclick = function setTheme() {
    callFrame.setTheme({
      colors: {
        accent: '#D88727',
        accentText: '#272820',
        background: '#272820',
        backgroundAccent: '#272820',
        baseText: '#84B526',
        border: '#888981',
        mainAreaBg: '#272822',
        mainAreaBgAccent: '#272820',
        mainAreaText: '#FFFFFF',
        supportiveText: '#86E1E6',
      }
    });
  };
 
  document.getElementById("synthwave").onclick = function setTheme() {
    callFrame.setTheme({
      colors: {
        accent: '#F62FA6',
        accentText: '#171520',
        background: '#241B30',
        backgroundAccent: '#F4C075',
        baseText: '#86858B',
        border: '#171520',
        mainAreaBg: '#2B213A',
        mainAreaBgAccent: '#2F2442',
        mainAreaText: '#F4C075',
        supportiveText: '#F5FBFC'
      },
    });
  };
    
  document.getElementById("darkness").onclick = function setTheme() {
    callFrame.setTheme({
      light: {
        colors: {
          accent: '#000000',
          accentText: '#000000',
          background: '#000000',
          backgroundAccent: '#000000',
          baseText: '#000000',
          border: '#000000',
          mainAreaBg: '#000000',
          mainAreaBgAccent: '#000000',
          mainAreaText: '#000000',
          supportiveText: '#000000',
        },
      },
      dark: {
        colors: {
          accent: '#000000',
          accentText: '#000000',
          background: '#000000',
          backgroundAccent: '#000000',
          baseText: '#000000',
          border: '#000000',
          mainAreaBg: '#000000',
          mainAreaBgAccent: '#000000',
          mainAreaText: '#000000',
          supportiveText: '#000000',
        },
      }
    });
  };


  </script>
</body>
</html>
Tagged:

Categories