cottongin/reddit-tweaks-ffe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: settings popup with color pickers, dark mode, and subreddit overrides

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
cottongin
2026-08-26 15:02:46 -04:00
parent 6cedae7a2c
commit 46d008d339
3 changed files with 424 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
popup/popup.html Normal file
View File

@@ -0,0 +1,74 @@
<!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="text" 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="text" 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>
<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>