Update your Daily Prebuilt with different themes!

ashley
Member, Daily Alumni
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:
3