reddit-tweaks-ffe/popup/popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="popup-container">
    <h1>Reddit Tweaks</h1>

    <div class="section">
      <label class="toggle-row">
        <span>Enabled</span>
        <input type="checkbox" id="enabled">
      </label>
    </div>

    <div class="section">
      <label for="darkMode">Dark Mode</label>
      <select id="darkMode">
        <option value="auto">Auto (detect RES)</option>
        <option value="light">Force Light</option>
        <option value="dark">Force Dark</option>
      </select>
    </div>

    <div class="section">
      <h2>Light Mode Colors</h2>
      <fieldset>
        <legend>Subreddit Badge</legend>
        <label>Background <input type="color" id="light.subredditBgColor"></label>
        <label>Border <input type="color" id="light.subredditBorderColor"></label>
        <label>Text <input type="color" id="light.subredditTextColor"></label>
      </fieldset>
      <fieldset>
        <legend>Comments Badge</legend>
        <label>Background <input type="color" id="light.commentsBgColor"></label>
        <label>Border <input type="color" id="light.commentsBorderColor"></label>
        <label>Text <input type="color" id="light.commentsTextColor"></label>
      </fieldset>
      <button id="resetLight" class="btn-secondary">Reset Light Defaults</button>
    </div>

    <div class="section">
      <h2>Dark Mode Colors</h2>
      <fieldset>
        <legend>Subreddit Badge</legend>
        <label>Background <input type="color" id="dark.subredditBgColor"></label>
        <label>Border <input type="color" id="dark.subredditBorderColor"></label>
        <label>Text <input type="color" id="dark.subredditTextColor"></label>
      </fieldset>
      <fieldset>
        <legend>Comments Badge</legend>
        <label>Background <input type="color" id="dark.commentsBgColor"></label>
        <label>Border <input type="color" id="dark.commentsBorderColor"></label>
        <label>Text <input type="color" id="dark.commentsTextColor"></label>
      </fieldset>
      <button id="resetDark" class="btn-secondary">Reset Dark Defaults</button>
    </div>

    <div class="section">
      <h2>Per-Subreddit Overrides</h2>
      <p class="section-hint">Set custom subreddit badge colors per mode.</p>
      <div id="subredditList"></div>
      <button id="addSubreddit" class="btn-secondary">+ Add Subreddit</button>
    </div>

    <div class="section">
      <button id="resetAll" class="btn-danger">Reset All Settings</button>
    </div>
  </div>
  <script src="../lib/settings.js"></script>
  <script src="popup.js"></script>
</body>
</html>