Matching the branding

SAGL's own menus take the server's branding colours by themselves; your documents can too, from sagl.branding.

client/scripts/welcome.js

const { name, primary, logo } = sagl.branding;

const welcome = sagl.ui.open(`
  <rml>
  <head>
    <link type="text/rcss" href="/sagl/ui/theme/base.rcss"/>
    <style>
      body { width: 100%; height: 100%; background-color: #00000080; }
      .panel { position: absolute; left: 50%; top: 45%; width: 460dp; margin-left: -230dp;
               transform: translateY(-50%); }
      .head { display: flex; flex-direction: row; align-items: center; margin-bottom: 12dp; }
      #logo img { width: 64dp; height: 64dp; margin-right: 14dp; }
      #title { font-family: pricedown; font-size: 34dp; font-effect: outline(2dp #000000); }
    </style>
  </head>
  <body>
    <div class="panel">
      <div class="head"><span id="logo"></span><span id="title"></span></div>
      <span class="subtitle" id="tagline">Cops chase, robbers run. Press Play to start.</span>
      <button class="primary" id="play">Play</button>
    </div>
  </body>
  </rml>`);

welcome.setText("title", name);
if (logo) welcome.setHtml("logo", `<img src="${logo}"/>`);
if (primary) {
  welcome.setAttribute("title", "style", `color: ${primary}`);
  welcome.setAttribute("tagline", "style", `color: ${primary}`);
}
welcome.on("click", "play", () => welcome.close());

logo is only set once the logo has downloaded; on a first visit, scripts start after every client file is in, so it's there.