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

feat: integrate tabbed color picker into extension popup

Browse Source 
Replace native color inputs with swatch divs wired to the shared
tabbed picker widget for global and per-subreddit color controls.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
cottongin
2026-08-26 17:16:00 -04:00
parent d26f133efb
commit 2abb71fbb8
3 changed files with 119 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
popup/popup.html
View File

@@ -28,15 +28,15 @@
<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>
<label>Background <div class="rt-color-swatch" id="light.subredditBgColor"></div></label>
<label>Border <div class="rt-color-swatch" id="light.subredditBorderColor"></div></label>
<label>Text <div class="rt-color-swatch" id="light.subredditTextColor"></div></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>
<label>Background <div class="rt-color-swatch" id="light.commentsBgColor"></div></label>
<label>Border <div class="rt-color-swatch" id="light.commentsBorderColor"></div></label>
<label>Text <div class="rt-color-swatch" id="light.commentsTextColor"></div></label>
</fieldset>
<button id="resetLight" class="btn-secondary">Reset Light Defaults</button>
</div>
@@ -45,15 +45,15 @@
<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>
<label>Background <div class="rt-color-swatch" id="dark.subredditBgColor"></div></label>
<label>Border <div class="rt-color-swatch" id="dark.subredditBorderColor"></div></label>
<label>Text <div class="rt-color-swatch" id="dark.subredditTextColor"></div></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>
<label>Background <div class="rt-color-swatch" id="dark.commentsBgColor"></div></label>
<label>Border <div class="rt-color-swatch" id="dark.commentsBorderColor"></div></label>
<label>Text <div class="rt-color-swatch" id="dark.commentsTextColor"></div></label>
</fieldset>
<button id="resetDark" class="btn-secondary">Reset Dark Defaults</button>
</div>
@@ -70,6 +70,7 @@
</div>
</div>
<script src="../lib/settings.js"></script>
<script src="../content/tweaks/color-picker.js"></script>
<script src="popup.js"></script>
</body>
</html>