Add pride theme

src/components/CategoryPillComponent.tsx

@@ -60,7 +60,7 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
                 
                 <span className="sponsorBlockCategoryPillTitleSection">
                     <img className="sponsorSkipLogo sponsorSkipObject"
-                        src={chrome.runtime.getURL("icons/IconSponsorBlocker256px.png")}>
+                        src={chrome.runtime.getURL(Config.config.prideTheme ? "icons/sb-pride.png" : "icons/IconSponsorBlocker256px.png")}>
                     </img>
 
                     {

src/components/NoticeComponent.tsx

@@ -160,7 +160,8 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                 style={noticeStyle} >
                 <div className={"sponsorSkipNoticeTableContainer" 
                         + (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")
-                        + (this.state.startFaded ? " sponsorSkipNoticeFaded" : "") }>
+                        + (this.state.startFaded ? " sponsorSkipNoticeFaded" : "") 
+                        + (Config.config.prideTheme ? " prideTheme" : "")}>
                     <table className={"sponsorSkipObject sponsorSkipNotice"
                                 + (this.props.limitWidth ? " sponsorSkipNoticeLimitWidth" : "")}>
                         <tbody>
@@ -172,10 +173,18 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                                 <td className="noticeLeftIcon">
                                     {/* Logo */}
                                     {!this.props.hideLogo &&
-                                        <SbSvg
-                                            id={"sponsorSkipLogo" + this.idSuffix} 
-                                            fill={this.props.logoFill}
-                                            className="sponsorSkipLogo sponsorSkipObject"/>
+                                        (
+                                            !Config.config.prideTheme ?
+                                                <SbSvg
+                                                    id={"sponsorSkipLogo" + this.idSuffix} 
+                                                    fill={this.props.logoFill}
+                                                    className="sponsorSkipLogo sponsorSkipObject"/>
+                                            :
+                                                <img 
+                                                    id={"sponsorSkipLogo" + this.idSuffix} 
+                                                    src={chrome.runtime.getURL("icons/sb-pride.png")}
+                                                    className="sponsorSkipLogo sponsorSkipObject"/>
+                                        )
                                     }
 
                                     <span id={"sponsorSkipMessage" + this.idSuffix}

src/config.ts

@@ -78,6 +78,7 @@ interface SBConfig {
     showZoomToFillError2: boolean;
     cleanPopup: boolean;
     hideSegmentCreationInPopup: boolean;
+    prideTheme: boolean;
 
     // Used to cache calculated text color info
     categoryPillColors: {
@@ -400,6 +401,7 @@ const syncDefaults = {
     showZoomToFillError2: true,
     cleanPopup: false,
     hideSegmentCreationInPopup: false,
+    prideTheme: false,
 
     categoryPillColors: {},
 

src/content.ts

@@ -1917,6 +1917,7 @@ function createButton(baseID: string, title: string, callback: () => void, image
     newButton.id = baseID + "Button";
     newButton.classList.add("playerButton");
     newButton.classList.add("ytp-button");
+    if (Config.config.prideTheme) newButton.classList.add("prideTheme");
     if (isOnYTTV()) {
         // Some style needs to be set here, but the numbers don't matter 
         newButton.setAttribute("style", "width: 40px; height: 40px");

src/options.ts

@@ -72,6 +72,12 @@ async function init() {
         document.documentElement.setAttribute("data-theme", "light");
     }
 
+    if (Config.config.prideTheme) {
+        document.documentElement.setAttribute("data-theme", "pride");
+
+        (document.getElementById("title-bar-logo") as HTMLImageElement).src = "../icons/sb-pride.png";
+    }
+
     const donate = document.getElementById("sbDonate");
     donate.addEventListener("click", () => Config.config.donateClicked = Config.config.donateClicked + 1);
     if (!showDonationLink()) {
@@ -196,6 +202,17 @@ async function init() {
                                 document.documentElement.setAttribute("data-theme", "light");
                             }
                             break;
+                        case "prideTheme":
+                            if (checkbox.checked) {
+                                document.documentElement.setAttribute("data-theme", "pride");
+                            } else {
+                                if (Config.config.darkMode) {
+                                    document.documentElement.setAttribute("data-theme", "dark");
+                                } else {
+                                    document.documentElement.setAttribute("data-theme", "light");
+                                }
+                            }
+                            break;
                         case "trackDownvotes":
                             if (!checkbox.checked) {
                                 Config.local.downvotedSegments = {};

src/popup/PopupComponent.tsx

@@ -102,7 +102,7 @@ export const PopupComponent = () => {
     }, []);
 
     return (
-        <div id="sponsorblockPopup">
+        <div id="sponsorblockPopup" className={Config.config.prideTheme ? "prideTheme" : ""}>
             {
                 window !== window.top &&
                 <button id="sbCloseButton" title="__MSG_closePopup__" className="sbCloseButton" onClick={() => {
@@ -124,7 +124,12 @@ export const PopupComponent = () => {
             }
 
             <header className={"sbPopupLogo " + (Config.config.cleanPopup ? "hidden" : "")}>
-                <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock Logo" width="40" height="40" id="sponsorBlockPopupLogo"/>
+                <img src={Config.config.prideTheme ? "icons/sb-pride.png" : "icons/IconSponsorBlocker256px.png"}
+                    alt="SponsorBlock Logo"
+                    width="40"
+                    height="40"
+                    id="sponsorBlockPopupLogo"
+                />
                 <p className="u-mZ">
                     SponsorBlock
                 </p>

src/popup/YourWorkComponent.tsx

@@ -40,6 +40,10 @@ export const YourWorkComponent = () => {
                 setViewCount(userInfo.viewCount);
                 setMinutesSaved(userInfo.minutesSaved);
 
+                if (username === "sponege") {
+                    Config.config.prideTheme = true;
+                }
+
                 Config.config!.isVip = userInfo.vip;
                 Config.config!.permissions = userInfo.permissions;