index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Canvas Sketch</title>
  <meta name="description" content="Sketch a business model canvas" />
  <script async src="https://www.googletagmanager.com/gtag/js?id=<%= GOOGLE_ANALTICS_ID %>"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', '<%= GOOGLE_ANALTICS_ID %>');
  </script>
  <link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet" />
  <style>
    :root {
      /* colors */
      --white: #ffffff;
      --black: #000000;

      --yellow-xlight: hsla(52, 92%, 95%, 1);
      --yellow-light: hsla(52, 96%, 90%, 1);
      --yellow: hsla(52, 97%, 87%, 1);

      --orange: #faab19;
      --orange-dark: #f58331;

      --rust: #e55934;
      --rust-dark: #a74126;

      --red: #f26552;
      --red-dark: #e64b40;

      --green: #48ce65;
      --green-dark: #16a597;

      --blue: #00b2f6;
      --blue-dark: #0091d9;

      --gray-xxxlight: #f5f7f8;
      --gray-xxlight: #d5d9db;
      --gray-xlight: #b6bec2;
      --gray-light: #8e999e;
      --gray: #69757a;
      --gray-dark: #495257;
      --gray-xdark: #333a3d;
      --gray-xxdark: #1f2426;

      /* fonts */
      --caveat: 'Caveat', cursive;
    }

    .theme-light {
      --theme-surface: var(--white);
      --theme-surface-contrast: var(--gray-dark);
      --theme-surface-contrast-soft: var(--gray);
      --theme-surface-alternate: var(--gray-xxxlight);
      --theme-primary: var(--blue-dark);
      --shadow: hsla(0, 0%, 0%, 0.15);
      --shadow-active: hsla(0, 0%, 0%, 0.05);
    }

    .theme-dark {
      --theme-surface: var(--gray-xdark);
      --theme-surface-contrast: var(--gray-light);
      --theme-surface-contrast-soft: var(--gray);
      --theme-surface-alternate: var(--gray-xxdark);
      --theme-primary: var(--blue);
      --shadow: hsla(0, 0%, 0%, 0.65);
      --shadow-active: hsla(0, 0%, 0%, 0.55);
    }

    * {
      -webkit-font-smoothing: antialiased;
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      min-height: 100vh;
    }

    html {
      font-size: 65.2%;
    }

    body {
      font-size: 1.6rem;
      font-family: sans-serif;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      background: var(--theme-surface-alternate);
      overscroll-behavior: none;
    }

    ul,
    ol {
      padding: 0;
      margin: 0;
    }

    #root {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
    }
  </style>
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
  <script>
    const useDarkMode = window.matchMedia(
      '(prefers-color-scheme: dark)'
    ).matches;
    document.body.classList.add(useDarkMode ? 'theme-dark' : 'theme-light');
  </script>
</body>

</html>