Make light/dark theme work on index page

fab6f5ed2fd7766988c8c97ccbec21f4d0c41fe3

Tucker McKnight <tucker@pangolin.lan> | Sat Jan 03 2026

Make light/dark theme work on index page

Adds the light/dark/auto dropdown on the index page, along
with the JS file (top.js) that is needed to make it work.
js_templates/index.ts:10
Before
9
10
11

12
13

14













15
16
17
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Repositories</title>
          <link rel="stylesheet" href="/css/design-board.css">
⁣
        </head>
        <body>
⁣
          <div class="container my-4">
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
            <div class="row">
              <div class="col">
                <h1>${data.reposConfig.defaultTemplateConfiguration?.allRepositoriesPageTitle || "All Repositories"}</h1>
              </div>
After
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Repositories</title>
          <link rel="stylesheet" href="/css/design-board.css">
          <script src="${data.reposPath}/frontend/top.js"></script>
        </head>
        <body>
          <div class="container">
            <div class="row d-flex justify-content-end">
              <div class="col-auto pt-2">
                <div class="dropdown">
                  <button class="dropdown-toggle btn btn-bg" id="dark-mode-switch" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <span>&#xFE0F;</span>
                  </button>
                  <ul class="dropdown-menu">
                    <li><button class="btn shadow-none" data-theme-pref="light" onclick="toggleDarkMode(this)"><span class="me-1">&#x1F31E;</span>Light</button></li>
                    <li><button class="btn shadow-none" data-theme-pref="dark" onclick="toggleDarkMode(this)"><span class="me-1">&#x1F319;</span>Dark</button></li>
                    <li><button class="btn shadow-none" data-theme-pref="auto" onclick="toggleDarkMode(this)"><span class="me-1">&#x1F5A5;&#xFE0F;</span>Match OS</button></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="row my-3">
              <div class="col">
                <h1>${data.reposConfig.defaultTemplateConfiguration?.allRepositoriesPageTitle || "All Repositories"}</h1>
              </div>