index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <title>Simplesign</title>
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png" />
    <link rel="manifest" href="/assets/favicon/site.webmanifest" />
    <link rel="mask-icon" href="/assets/favicon/safari-pinned-tab.svg" color="#5bbad5" />
    <meta name="msapplication-TileColor" content="#da532c" />
    <meta name="theme-color" content="#ffffff" />
  </head>
  <style>
    .bg-dark {
      background: #151d32 !important;
    }
    .bg-light {
      background: #f0f2f5 !important;
    }
  </style>
  <body>
    <div id="app"></div>
    <script type="module" src="./src/main.js"></script>
    <noscript>
      <h1>Simplesign</h1>
      <p>This site requires JavaScript to work.</p>
    </noscript>
  </body>
</html>

<script>
  const themeStore = localStorage.getItem('global-application')
  const htmlElement = document.documentElement

  if (themeStore) {
    const theme = JSON.parse(themeStore).currentTheme
    htmlElement.classList.add(theme === 'light' ? 'bg-light' : 'bg-dark')
  }

  // Fallback
  htmlElement.classList.add('bg-dark')
</script>