Repository: hackclub/browserbuddy
Pull request #156: Added TweakTube
Author: login: ShibamRoy9826
Created: 2025-03-09T16:58:33Z | Merged: 2025-03-14T11:47:38Z

# BrowserBuddy Extension Submission

## Project Details

1. **What is the name of your project?**
TweakTube

3. **How many hours did you spend developing this?**
 13-14 hrs ( 8hr 25 mins as per wakatime, 30-40 mins for the logo, and rest for learning)

4. **What problem does your extension solve, or what makes it unique?**
   It helps me to watch youtube without distractions, it enables to toggle youtube shorts, and a few other components which I find to be useless/or don't use as much.

5. **How many people have tested your extension?**
  As of the time of submission, 4 people, including my sister,mother, and 2 of my friends(I don't have too many friends in irl)

6. **Does your extension work in Chrome and uses Manifest Version 3?**
   Yes, it has been developed on Chrome so it works, but I have not tested it on other browsers yet.

---

## Additional Comments
This extension is still under development, and I still have one more thing to implement (mentioned in the readme), 
I am submitting because I am concerned that I might not be able to finish that feature before deadline as I am also participating in #hackpad (hackboard). Though, I have completed everything I initially planned to make.



Diff:
diff --git a/submissions/TweakTube/README.md b/submissions/TweakTube/README.md
new file mode 100644
index 00000000..97ae61c8
--- /dev/null
+++ b/submissions/TweakTube/README.md
@@ -0,0 +1,75 @@
+# TweakTube
+
+![logo](assets/logo_128.png)
+
+A chrome extension that allows you to customize [youtube](https://youtube.com) to your liking!
+
+> [!NOTE]
+> This is in very early stages, and may have bugs
+
+## Features 😎
+
+- Allows to hide shorts
+- Allows to hide categories section
+- Allows to hide sidebar
+- Comes with 9 different themes excluding the default one
+- Is extremely simple to use!
+
+## Screenshots 📷
+
+Here are a few screenshots of some of them themes and customizations:-
+If you notice properly, shorts, the sidebar, and categories section are not there!
+
+> [!NOTE]
+> Some screenshots have a white tint on them for some reason, they don't look like so irl, I will try to upload proper screenshots soon
+
+#### Catppuccin Mocha
+<img src="Screenshots/mocha.png" width="50%">
+
+#### Catppuccin Latte
+<img src="Screenshots/latte.png" width="50%">
+
+#### Gruvbox
+<img src="Screenshots/gruvbox.png" width="50%">
+
+More themes include - Catpuccin-Frappe, Catppuccin-Macchiato, Nord, rosepine, Solarized-dark,Solarized-light. I will add screenshots of the rest later:)
+
+## Installation 🛠️
+
+Installation is really simple! All you need to do is download this repository.
+
+1. You can either use the **Green colored "code" button** on top, and click on "Download zip".
+Next, you need to extract the zip file in your computer.
+
+OR
+
+You can also run this in your terminal(requires git):
+
+```bash
+git clone https://github.com/ShibamRoy9826/tweaktube.git
+```
+
+2. Once you have the folder extracted, 
+    - Open Google Chrome
+    - Go to [chrome://extensions](chrome://extensions)
+    - Enable "Developer Mode" using the top right switch
+    - Click on "Load unpacked"
+    - Find the location where you've extracted/cloned this repository, and double click on "manifest.json"
+
+3. Done! Now you've TweakTubes installed! Try it out and give me some feedback :) 
+
+## Known Bugs 🐞
+
+- A dark shadow appears in the categories bar which doesn't change even after changing theme
+- Extended sidebar and community posts still don't have any effect after changing the theme
+
+## To-Do list ✏️
+
+- [ ] Add a youtube video download too
+
+## Contributing 🙏
+
+Everyone is welcome to contribute to the code!
+You can also raise an issue, or suggest any features that you think would be great :)
+
+> ✨ Please star this repository if you liked this project 😁
diff --git a/submissions/TweakTube/Screenshots/gruvbox.png b/submissions/TweakTube/Screenshots/gruvbox.png
new file mode 100644
index 00000000..c4a906a6
Binary files /dev/null and b/submissions/TweakTube/Screenshots/gruvbox.png differ
diff --git a/submissions/TweakTube/Screenshots/latte.png b/submissions/TweakTube/Screenshots/latte.png
new file mode 100644
index 00000000..de424fb0
Binary files /dev/null and b/submissions/TweakTube/Screenshots/latte.png differ
diff --git a/submissions/TweakTube/Screenshots/mocha.png b/submissions/TweakTube/Screenshots/mocha.png
new file mode 100644
index 00000000..162adfca
Binary files /dev/null and b/submissions/TweakTube/Screenshots/mocha.png differ
diff --git a/submissions/TweakTube/assets/logo.png~ b/submissions/TweakTube/assets/logo.png~
new file mode 100644
index 00000000..7270c3c4
Binary files /dev/null and b/submissions/TweakTube/assets/logo.png~ differ
diff --git a/submissions/TweakTube/assets/logo_128.png b/submissions/TweakTube/assets/logo_128.png
new file mode 100644
index 00000000..dcccb007
Binary files /dev/null and b/submissions/TweakTube/assets/logo_128.png differ
diff --git a/submissions/TweakTube/assets/logo_16.png b/submissions/TweakTube/assets/logo_16.png
new file mode 100644
index 00000000..84c80e82
Binary files /dev/null and b/submissions/TweakTube/assets/logo_16.png differ
diff --git a/submissions/TweakTube/assets/logo_32.png b/submissions/TweakTube/assets/logo_32.png
new file mode 100644
index 00000000..41c903e2
Binary files /dev/null and b/submissions/TweakTube/assets/logo_32.png differ
diff --git a/submissions/TweakTube/assets/logo_48.png b/submissions/TweakTube/assets/logo_48.png
new file mode 100644
index 00000000..ede37645
Binary files /dev/null and b/submissions/TweakTube/assets/logo_48.png differ
diff --git a/submissions/TweakTube/background.js b/submissions/TweakTube/background.js
new file mode 100644
index 00000000..e2bca7bf
--- /dev/null
+++ b/submissions/TweakTube/background.js
@@ -0,0 +1,36 @@
+const shorts="https://youtube.com/shorts";
+
+chrome.action.onClicked.addListener(async (tab) => {
+    if (tab.url.startsWith(shorts)) {
+        chrome.tabs.update(tab.id, { url: "https://www.youtube.com" });
+    }
+  });
+
+  function setTheme(theme,tabID){
+    console.log("The theme is being changed to",theme);
+    chrome.scripting.insertCSS({
+      files: [`themes/${theme}.css`],
+      target: { tabId: tabID },
+    });
+  }
+
+
+
+chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    if (tabs.length === 0) return; // No active tab
+    chrome.storage.local.get("theme", (data) => {
+        if(data.theme==undefined){
+          chrome.storage.local.set({theme:"default"});
+        }else{
+          setTheme(data.theme,tabs[0].id)
+        }
+    });
+});
+
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+if(message.theme!==undefined && message.tabID!==undefined){
+    setTheme(message.theme,message.tabID);
+     // sending message to worker to apply theme
+    chrome.runtime.sendMessage({ action: "applyCSS",theme:message.theme,tabID:message.tabID });
+}
+});
diff --git a/submissions/TweakTube/manifest.json b/submissions/TweakTube/manifest.json
new file mode 100644
index 00000000..c74a1fe6
--- /dev/null
+++ b/submissions/TweakTube/manifest.json
@@ -0,0 +1,30 @@
+{
+    "manifest_version": 3,
+    "name": "TweakTube",
+    "version": "1.0.0",
+    "description": "Helps to tweak youtube to make it minimalistic",
+    "permissions": ["activeTab","scripting","storage"],
+    "icons": {
+        "16": "assets/logo_16.png",
+        "32": "assets/logo_32.png",
+        "48": "assets/logo_48.png",
+        "128": "assets/logo_128.png"
+    },
+    "host_permissions":["https://*.youtube.com/*"],
+    "background": {
+    "service_worker": "background.js"
+  },
+    "content_scripts": [
+        {
+          "js": ["scripts/content.js"],
+          "matches": [
+            "https://*.youtube.com/*",
+            "https://youtube.com/*"
+          ]
+        }
+      ],
+    "action": {
+    "default_popup": "popup/popup.html",
+    "default_icon": "assets/logo_128.png"
+    }
+  }
diff --git a/submissions/TweakTube/popup/popup.css b/submissions/TweakTube/popup/popup.css
new file mode 100644
index 00000000..a08e597a
--- /dev/null
+++ b/submissions/TweakTube/popup/popup.css
@@ -0,0 +1,84 @@
+html{
+    background: #11111b;
+    color:#cdd6f4;
+    border-radius:1rem;
+}
+#switch {
+    font-size: 1rem;
+    color:white;
+    position: relative;
+    display: inline-block;
+    width: 3rem;
+    height: 1.2rem;
+    border:none;
+    margin:1rem
+   }
+
+#switch input {
+    display: none;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+#slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #303030;
+    transition: .2s;
+    border-radius: 1rem;
+}
+
+#slider:before {
+    position: absolute;
+    content: "";
+    height: 1.1rem;
+    width: 1.1rem;
+    border-radius: 1rem;
+    bottom:1px;
+    background-color: gray;
+    transition: .4s;
+}
+
+#switch input:checked + #slider::before {
+    background-color: #9546fc;
+}
+
+#switch input:checked + #slider {
+    background-color: #43177d;
+}
+
+#switch input:focus + #slider {
+    box-shadow: 0 0 1px #9546fc;
+}
+
+#switch input:checked + #slider:before {
+    transform: translateX(1.9em);
+}
+
+.optionContainer{
+    display:flex;
+    flex-direction:row;
+    align-items: center;
+    justify-content: center;
+}
+
+h3{
+    color:#cdd6f4;
+}
+h1{
+    color:white;
+}
+
+select{
+    background-color:#313244;
+    color:white;
+    margin-left:1rem;
+    border-radius:0.5rem;
+    padding:0;
+    border: 1px solid #89b4fa;
+}
\ No newline at end of file
diff --git a/submissions/TweakTube/popup/popup.html b/submissions/TweakTube/popup/popup.html
new file mode 100644
index 00000000..6202940d
--- /dev/null
+++ b/submissions/TweakTube/popup/popup.html
@@ -0,0 +1,62 @@
+<html lang="en">
+    <head>
+        <title>TweakTube</title>
+        <link rel="stylesheet" type="text/css" href="popup.css">
+    </head>
+    <body>
+        
+        <div style="display:flex;flex-direction:column;width:250px;height:300px; justify-content: center;">
+            <div style="display:flex;flex-direction:row; align-items: center; justify-content: center;width:100%;margin-bottom:1rem;">
+                <img src="../assets/logo_32.png" style="width:auto;margin-right:0.5rem;" alt="Logo">
+                <h1 style="display:flex;flex-direction:row;text-align: center;width:auto;margin:0;">
+                    TweakTube</h1>
+            </div>
+                
+                
+            <div class="optionContainer">
+                <h3>Disable yt shorts</h3>
+                <label id="switch">
+                    <input type="checkbox" checked="true" id="hideshorts">
+                    <span id="slider"></span>
+                </label>
+            </div>
+
+            <div class="optionContainer">
+                <h3>Remove Sidebar</h3>
+                <label id="switch">
+                    
+                    <input type="checkbox" checked="true" id="hidesidebar">
+                    <span id="slider"></span>
+                </label>
+            </div>
+
+            <div class="optionContainer">
+                <h3>Remove categories</h3>
+                <label id="switch">
+                    
+                    <input type="checkbox" checked="true" id="hidecategories">
+                    <span id="slider"></span>
+                </label>
+            </div>
+
+            <div class="themeCont" style="display:flex;flex-direction:row;">
+                <h3>Theme: </h3>
+                <label for="theme"></label>
+                    <select id="theme">
+                        <option value="default">Default</option>
+                        <option value="mocha">Catppuccin Mocha</option>
+                        <option value="latte">Catppuccin Latte</option>
+                        <option value="macchiato">Catppuccin Macchiato</option>
+                        <option value="frappe">Catppuccin Frappe</option>
+                        <option value="gruvbox">Gruvbox</option>
+                        <option value="nord">Nord</option>
+                        <option value="rosepine">Rosepine</option>
+                        <option value="solar-dark">Solarized Dark</option>
+                        <option value="solar-light">Solarized Light</option>
+
+                    </select>
+            </div>    
+        </div>
+        <script src="popup.js"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/submissions/TweakTube/popup/popup.js b/submissions/TweakTube/popup/popup.js
new file mode 100644
index 00000000..9d537da4
--- /dev/null
+++ b/submissions/TweakTube/popup/popup.js
@@ -0,0 +1,70 @@
+// Defining the switches
+const hshorts = document.getElementById("hideshorts");
+const hside=document.getElementById("hidesidebar");
+const hcats=document.getElementById("hidecategories");
+
+
+// Checking if they are already set
+chrome.storage.local.get("hideshorts", (data) => {
+    hshorts.checked = data.hideshorts || false;
+});
+chrome.storage.local.get("hidesidebar", (data) => {
+    hside.checked = data.hidesidebar || false;
+});
+chrome.storage.local.get("hidecategories", (data) => {
+    hcats.checked = data.hidecategories || false;
+});
+
+// If the switches are changed, set the local variable
+// For shorts
+hshorts.addEventListener("change", () => {
+    const is_shorts_enabled = hshorts.checked;
+    chrome.storage.local.set({ hideshorts:is_shorts_enabled });
+
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+        if (tabs[0]) {
+            chrome.tabs.sendMessage(tabs[0].id, { hideshorts: is_shorts_enabled });
+        }
+    });
+});
+// For sidebar
+hside.addEventListener("change", () => {
+    const is_side_enabled = hside.checked;
+    chrome.storage.local.set({ hidesidebar:is_side_enabled });
+
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+        if (tabs[0]) {
+            chrome.tabs.sendMessage(tabs[0].id, { hidesidebar:is_side_enabled });
+        }
+    });
+});
+// For categories section
+hcats.addEventListener("change", () => {
+    const is_cats_enabled = hcats.checked;
+    chrome.storage.local.set({ hidecategories:is_cats_enabled });
+
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+        if (tabs[0]) {
+            chrome.tabs.sendMessage(tabs[0].id, { hidecategories:is_cats_enabled });
+        }
+    });
+});
+
+// Theme stuff - ---------------------------------------------------
+themeSelect=document.getElementById("theme");
+
+// Checking if there's already a theme set
+chrome.storage.local.get("theme", (data) => {
+    themeSelect.value=data.theme || "default";
+});
+// If user changed it, set the new one
+themeSelect.addEventListener("change", () => {
+    const currTheme = themeSelect.value;
+    chrome.storage.local.set({ theme:currTheme});
+
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+        if (tabs[0]) {
+            chrome.tabs.sendMessage(tabs[0].id, { theme:currTheme,tabID:tabs[0].id });
+        }
+    });
+});
\ No newline at end of file
diff --git a/submissions/TweakTube/scripts/content.js b/submissions/TweakTube/scripts/content.js
new file mode 100644
index 00000000..f3deceff
--- /dev/null
+++ b/submissions/TweakTube/scripts/content.js
@@ -0,0 +1,109 @@
+toggledShorts=false;
+
+function hideCategories(){
+  const categories=document.querySelector("iron-selector#chips");
+
+  if(categories){
+    categories.remove();
+  }
+
+  const categoriesCont=document.querySelector("ytd-feed-filter-chip-bar-renderer");
+  if(categoriesCont){
+    categoriesCont.remove();
+  }
+}
+
+function hideSidebar(){
+  const sidebar=document.querySelector("ytd-mini-guide-renderer");
+  if(sidebar){
+    sidebar.style.display="none";
+  }
+}
+
+function hideShorts(){
+  // Toggling shorts from sidebar
+  const sidebarShorts = document.querySelector("ytd-mini-guide-entry-renderer[aria-label='Shorts']");
+  if (sidebarShorts && !toggledShorts) {
+    sidebarShorts.style.display = "none";
+    toggledShorts=true;
+  }
+  // Toggling shorts from extended sidebar
+  const sidebarExShorts=document.querySelector("a.yt-simple-endpoint[title='Shorts']");
+  if(sidebarExShorts){
+    sidebarExShorts.style.display="none";
+  }
+  // Toggling shorts sections
+  const shortVid=document.querySelectorAll("ytd-rich-item-renderer[is-slim-media]");
+  if(shortVid){
+    shortVid.forEach((e)=>{
+      e.style.display="none";
+    });
+  }
+  // Toggling shorts 
+  const shortVidHeader=document.querySelectorAll("div#rich-shelf-header");
+  if (shortVidHeader){
+    shortVidHeader.forEach((a)=>{
+      a.style.display="none";
+    });
+  }
+
+  // toggling short recommendations while at a video
+  const shortRecom=document.querySelectorAll("ytd-reel-shelf-renderer");
+  if (shortRecom){
+    shortRecom.forEach((e)=>{
+      e.style.display="none";
+    })
+  }
+
+  if (window.location.href.includes("youtube.com/shorts/")) {
+    console.log("Redirecting from Shorts...");
+    window.location.replace("https://www.youtube.com/");
+}
+
+}
+
+
+
+const observer = new MutationObserver(() =>{
+  chrome.storage.local.get("hideshorts", (data) => {
+    if (data.hideshorts) {
+        hideShorts();
+    } 
+  });
+  chrome.storage.local.get("hidecategories", (data) => {
+    if (data.hidecategories) {
+        console.log("Hiding categories");
+        hideCategories();
+    } 
+  });
+  chrome.storage.local.get("hidesidebar", (data) => {
+    if (data.hidesidebar) {
+        hideSidebar();
+    } 
+  });
+});
+
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.hideshorts !== undefined) {
+      if (message.hideshorts) {
+          hideShorts();
+      }
+  }
+  if (message.hidecategories!== undefined){
+    if(message.hidecategories){
+      hideCategories();
+    }
+  }
+  if(message.hidesidebar!==undefined){
+    if(message.hidesidebar){
+      hideSidebar();
+    }
+  }
+  if(message.theme!==undefined && message.tabID!==undefined){
+      // sending message to worker to apply theme
+      chrome.runtime.sendMessage({ action: "applyCSS",theme:message.theme,tabID:message.tabID });
+  }
+});
+
+observer.observe(document.body, { childList: true, subtree: true });
+
diff --git a/submissions/TweakTube/themes/default.css b/submissions/TweakTube/themes/default.css
new file mode 100644
index 00000000..1d0b0cb7
--- /dev/null
+++ b/submissions/TweakTube/themes/default.css
@@ -0,0 +1,133 @@
+*{
+    --bg:#0f0f0f;
+    --bg2:#272727;
+    --fg:white;
+    --fg2:#aaa;
+    --primary:#222222;
+    --secondary:#f38ba8;
+}
+div#content{
+    background-color:var(--bg);
+}
+div#container.ytd-masthead{
+    background-color:var(--bg);
+}
+div.ytSearchboxComponentInputBox{
+    background-color:var(--bg2);
+    color:var(--fg2);
+}
+div.ytSearchboxComponentInputBoxHasFocus{
+    transition: all 0.5s ease-in-out;
+    border-color: var(--primary) !important;
+    border-width:2px;
+}
+yt-formatted-string#video-title{
+    color:var(--fg) !important;
+}
+a.yt-formatted-string{
+    color:var(--fg2) !important;
+}
+span.inline-metadata-item{
+    color:var(--fg2) !important;
+}
+button.ytSearchboxComponentSearchButton{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;
+}
+yt-attributed-string#content-text{
+    color:var(--fg) !important;
+}
+a#author-text span{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text{
+    color:var(--fg2) !important;
+}
+div#description{
+    background-color:(--bg2);
+    color:var(--fg2);
+}
+span.yt-core-attributed-string--link-inherit-color{
+    color:var(--fg) !important;
+}
+.yt-core-attributed-string--link-inherit-color .yt-core-attributed-string__link--call-to-action-color{
+    color:var(--primary) !important;
+}
+div#contentContainer.tp-yt-app-drawer{
+    background-color:var(--bg) !important;
+}
+
+g[id^="youtube-paths_yt"]{
+    color:var(--fg) !important;
+}
+
+yt-icon{
+    color:var(--fg) !important;
+    fill:var(--fg) !important;
+}
+.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;    
+}
+.yt-formatted-string{
+    color:var(--fg) !important;
+}
+yt-formatted-string{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal{
+    color:var(--fg) !important;
+    background:var(--bg2) !important;
+}
+span#video-title{
+    color:var(--fg) !important;
+}
+.yt-spec-touch-feedback-shape--touch-response .yt-spec-touch-feedback-shape__fill{
+    color:var(--fg) !important;
+}
+div#title{
+    color:var(--fg) !important;
+}
+tp-yt-paper-button{
+    color:var(--fg) !important;
+}
+p.video-summary-content-view-model-wiz__paragraph{
+    color:var(--fg) !important;
+}
+h3#title{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline{
+    color:var(--fg2) !important;
+    border-color:var(--bg2) !important;
+}
+div#icon-label{
+    color:var(--fg) !important;
+}
+div#voice-search-button{
+    background-color:var(--bg2) !important;
+}
+
+iron-selector#chip,ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg2) !important;
+}
+ytd-mini-guide-renderer{
+    background-color:var(--bg2) !important;
+}
+ytd-mini-guide-entry-renderer{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;
+}
+a.ytd-mini-guide-entry-renderer{
+    color:var(--fg2) !important;
+}
+#chips-wrapper.ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg) !important;
+}
+
+#left-arrow-button.ytd-feed-filter-chip-bar-renderer, #right-arrow-button.ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg) !important;
+}
\ No newline at end of file
diff --git a/submissions/TweakTube/themes/frappe.css b/submissions/TweakTube/themes/frappe.css
new file mode 100644
index 00000000..9c1465f6
--- /dev/null
+++ b/submissions/TweakTube/themes/frappe.css
@@ -0,0 +1,133 @@
+*{
+    --bg:#232634;
+    --bg2:#303446;
+    --fg:#c6d0f5;
+    --fg2:#949cbb;
+    --primary:#8caaee;
+    --secondary:#e78284;
+}
+div#content{
+    background-color:var(--bg);
+}
+div#container.ytd-masthead{
+    background-color:var(--bg);
+}
+div.ytSearchboxComponentInputBox{
+    background-color:var(--bg2);
+    color:var(--fg2);
+}
+div.ytSearchboxComponentInputBoxHasFocus{
+    transition: all 0.5s ease-in-out;
+    border-color: var(--primary) !important;
+    border-width:2px;
+}
+yt-formatted-string#video-title{
+    color:var(--fg) !important;
+}
+a.yt-formatted-string{
+    color:var(--fg2) !important;
+}
+span.inline-metadata-item{
+    color:var(--fg2) !important;
+}
+button.ytSearchboxComponentSearchButton{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;
+}
+yt-attributed-string#content-text{
+    color:var(--fg) !important;
+}
+a#author-text span{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text{
+    color:var(--fg2) !important;
+}
+div#description{
+    background-color:(--bg2);
+    color:var(--fg2);
+}
+span.yt-core-attributed-string--link-inherit-color{
+    color:var(--fg) !important;
+}
+.yt-core-attributed-string--link-inherit-color .yt-core-attributed-string__link--call-to-action-color{
+    color:var(--primary) !important;
+}
+div#contentContainer.tp-yt-app-drawer{
+    background-color:var(--bg) !important;
+}
+
+g[id^="youtube-paths_yt"]{
+    color:var(--fg) !important;
+}
+
+yt-icon{
+    color:var(--fg) !important;
+    fill:var(--fg) !important;
+}
+.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;    
+}
+.yt-formatted-string{
+    color:var(--fg) !important;
+}
+yt-formatted-string{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal{
+    color:var(--fg) !important;
+    background:var(--bg2) !important;
+}
+span#video-title{
+    color:var(--fg) !important;
+}
+.yt-spec-touch-feedback-shape--touch-response .yt-spec-touch-feedback-shape__fill{
+    color:var(--fg) !important;
+}
+div#title{
+    color:var(--fg) !important;
+}
+tp-yt-paper-button{
+    color:var(--fg) !important;
+}
+p.video-summary-content-view-model-wiz__paragraph{
+    color:var(--fg) !important;
+}
+h3#title{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline{
+    color:var(--fg2) !important;
+    border-color:var(--bg2) !important;
+}
+div#icon-label{
+    color:var(--fg) !important;
+}
+div#voice-search-button{
+    background-color:var(--bg2) !important;
+}
+
+iron-selector#chip,ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg2) !important;
+}
+ytd-mini-guide-renderer{
+    background-color:var(--bg2) !important;
+}
+ytd-mini-guide-entry-renderer{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;
+}
+a.ytd-mini-guide-entry-renderer{
+    color:var(--fg2) !important;
+}
+#chips-wrapper.ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg) !important;
+}
+
+#left-arrow-button.ytd-feed-filter-chip-bar-renderer, #right-arrow-button.ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg) !important;
+}
\ No newline at end of file
diff --git a/submissions/TweakTube/themes/gruvbox.css b/submissions/TweakTube/themes/gruvbox.css
new file mode 100644
index 00000000..5dfa0de8
--- /dev/null
+++ b/submissions/TweakTube/themes/gruvbox.css
@@ -0,0 +1,133 @@
+*{
+    --bg2: #1d2021;
+	--bg: #282828;
+	--fg: #ebdbb2;
+  --fg2:#7c6f64;
+  --primary:#458588;
+  --secondary: #b8bb26;
+}
+div#content{
+    background-color:var(--bg);
+}
+div#container.ytd-masthead{
+    background-color:var(--bg);
+}
+div.ytSearchboxComponentInputBox{
+    background-color:var(--bg2);
+    color:var(--fg2);
+}
+div.ytSearchboxComponentInputBoxHasFocus{
+    transition: all 0.5s ease-in-out;
+    border-color: var(--primary) !important;
+    border-width:2px;
+}
+yt-formatted-string#video-title{
+    color:var(--fg) !important;
+}
+a.yt-formatted-string{
+    color:var(--fg2) !important;
+}
+span.inline-metadata-item{
+    color:var(--fg2) !important;
+}
+button.ytSearchboxComponentSearchButton{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;
+}
+yt-attributed-string#content-text{
+    color:var(--fg) !important;
+}
+a#author-text span{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text{
+    color:var(--fg2) !important;
+}
+div#description{
+    background-color:(--bg2);
+    color:var(--fg2);
+}
+span.yt-core-attributed-string--link-inherit-color{
+    color:var(--fg) !important;
+}
+.yt-core-attributed-string--link-inherit-color .yt-core-attributed-string__link--call-to-action-color{
+    color:var(--primary) !important;
+}
+div#contentContainer.tp-yt-app-drawer{
+    background-color:var(--bg) !important;
+}
+
+g[id^="youtube-paths_yt"]{
+    color:var(--fg) !important;
+}
+
+yt-icon{
+    color:var(--fg) !important;
+    fill:var(--fg) !important;
+}
+.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;    
+}
+.yt-formatted-string{
+    color:var(--fg) !important;
+}
+yt-formatted-string{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal{
+    color:var(--fg) !important;
+    background:var(--bg2) !important;
+}
+span#video-title{
+    color:var(--fg) !important;
+}
+.yt-spec-touch-feedback-shape--touch-response .yt-spec-touch-feedback-shape__fill{
+    color:var(--fg) !important;
+}
+div#title{
+    color:var(--fg) !important;
+}
+tp-yt-paper-button{
+    color:var(--fg) !important;
+}
+p.video-summary-content-view-model-wiz__paragraph{
+    color:var(--fg) !important;
+}
+h3#title{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline{
+    color:var(--fg2) !important;
+    border-color:var(--bg2) !important;
+}
+div#icon-label{
+    color:var(--fg) !important;
+}
+div#voice-search-button{
+    background-color:var(--bg2) !important;
+}
+
+iron-selector#chip,ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg2) !important;
+}
+ytd-mini-guide-renderer{
+    background-color:var(--bg2) !important;
+}
+ytd-mini-guide-entry-renderer{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;
+}
+a.ytd-mini-guide-entry-renderer{
+    color:var(--fg2) !important;
+}
+#chips-wrapper.ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg) !important;
+}
+
+#left-arrow-button.ytd-feed-filter-chip-bar-renderer, #right-arrow-button.ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg) !important;
+}
\ No newline at end of file
diff --git a/submissions/TweakTube/themes/latte.css b/submissions/TweakTube/themes/latte.css
new file mode 100644
index 00000000..023c0bd1
--- /dev/null
+++ b/submissions/TweakTube/themes/latte.css
@@ -0,0 +1,134 @@
+*{
+    --bg:#dce0e8;
+    --bg2:#eff1f5;
+    --fg:#4c4f69;
+    --fg2:#7c7f93;
+    --primary:#1e66f5;
+    --secondary:#d20f39;
+}
+
+div#content{
+    background-color:var(--bg);
+}
+div#container.ytd-masthead{
+    background-color:var(--bg);
+}
+div.ytSearchboxComponentInputBox{
+    background-color:var(--bg2);
+    color:var(--fg2);
+}
+div.ytSearchboxComponentInputBoxHasFocus{
+    transition: all 0.5s ease-in-out;
+    border-color: var(--primary) !important;
+    border-width:2px;
+}
+yt-formatted-string#video-title{
+    color:var(--fg) !important;
+}
+a.yt-formatted-string{
+    color:var(--fg2) !important;
+}
+span.inline-metadata-item{
+    color:var(--fg2) !important;
+}
+button.ytSearchboxComponentSearchButton{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;
+}
+yt-attributed-string#content-text{
+    color:var(--fg) !important;
+}
+a#author-text span{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text{
+    color:var(--fg2) !important;
+}
+div#description{
+    background-color:(--bg2);
+    color:var(--fg2);
+}
+span.yt-core-attributed-string--link-inherit-color{
+    color:var(--fg) !important;
+}
+.yt-core-attributed-string--link-inherit-color .yt-core-attributed-string__link--call-to-action-color{
+    color:var(--primary) !important;
+}
+div#contentContainer.tp-yt-app-drawer{
+    background-color:var(--bg) !important;
+}
+
+g[id^="youtube-paths_yt"]{
+    color:var(--fg) !important;
+}
+
+yt-icon{
+    color:var(--fg) !important;
+    fill:var(--fg) !important;
+}
+.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;    
+}
+.yt-formatted-string{
+    color:var(--fg) !important;
+}
+yt-formatted-string{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal{
+    color:var(--fg) !important;
+    background:var(--bg2) !important;
+}
+span#video-title{
+    color:var(--fg) !important;
+}
+.yt-spec-touch-feedback-shape--touch-response .yt-spec-touch-feedback-shape__fill{
+    color:var(--fg) !important;
+}
+div#title{
+    color:var(--fg) !important;
+}
+tp-yt-paper-button{
+    color:var(--fg) !important;
+}
+p.video-summary-content-view-model-wiz__paragraph{
+    color:var(--fg) !important;
+}
+h3#title{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline{
+    color:var(--fg2) !important;
+    border-color:var(--bg2) !important;
+}
+div#icon-label{
+    color:var(--fg) !important;
+}
+div#voice-search-button{
+    background-color:var(--bg2) !important;
+}
+
+iron-selector#chip,ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg2) !important;
+}
+ytd-mini-guide-renderer{
+    background-color:var(--bg2) !important;
+}
+ytd-mini-guide-entry-renderer{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;
+}
+a.ytd-mini-guide-entry-renderer{
+    color:var(--fg2) !important;
+}
+#chips-wrapper.ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg) !important;
+}
+
+#left-arrow-button.ytd-feed-filter-chip-bar-renderer, #right-arrow-button.ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg) !important;
+}
\ No newline at end of file
diff --git a/submissions/TweakTube/themes/macchiato.css b/submissions/TweakTube/themes/macchiato.css
new file mode 100644
index 00000000..da271439
--- /dev/null
+++ b/submissions/TweakTube/themes/macchiato.css
@@ -0,0 +1,133 @@
+*{
+    --bg:#181926;
+    --bg2:#24273a;
+    --fg:#cad3f5;
+    --fg2:#939ab7;
+    --primary:#8aadf4;
+    --secondary:#ed8796;
+}
+div#content{
+    background-color:var(--bg);
+}
+div#container.ytd-masthead{
+    background-color:var(--bg);
+}
+div.ytSearchboxComponentInputBox{
+    background-color:var(--bg2);
+    color:var(--fg2);
+}
+div.ytSearchboxComponentInputBoxHasFocus{
+    transition: all 0.5s ease-in-out;
+    border-color: var(--primary) !important;
+    border-width:2px;
+}
+yt-formatted-string#video-title{
+    color:var(--fg) !important;
+}
+a.yt-formatted-string{
+    color:var(--fg2) !important;
+}
+span.inline-metadata-item{
+    color:var(--fg2) !important;
+}
+button.ytSearchboxComponentSearchButton{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;
+}
+yt-attributed-string#content-text{
+    color:var(--fg) !important;
+}
+a#author-text span{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text{
+    color:var(--fg2) !important;
+}
+div#description{
+    background-color:(--bg2);
+    color:var(--fg2);
+}
+span.yt-core-attributed-string--link-inherit-color{
+    color:var(--fg) !important;
+}
+.yt-core-attributed-string--link-inherit-color .yt-core-attributed-string__link--call-to-action-color{
+    color:var(--primary) !important;
+}
+div#contentContainer.tp-yt-app-drawer{
+    background-color:var(--bg) !important;
+}
+
+g[id^="youtube-paths_yt"]{
+    color:var(--fg) !important;
+}
+
+yt-icon{
+    color:var(--fg) !important;
+    fill:var(--fg) !important;
+}
+.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;    
+}
+.yt-formatted-string{
+    color:var(--fg) !important;
+}
+yt-formatted-string{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal{
+    color:var(--fg) !important;
+    background:var(--bg2) !important;
+}
+span#video-title{
+    color:var(--fg) !important;
+}
+.yt-spec-touch-feedback-shape--touch-response .yt-spec-touch-feedback-shape__fill{
+    color:var(--fg) !important;
+}
+div#title{
+    color:var(--fg) !important;
+}
+tp-yt-paper-button{
+    color:var(--fg) !important;
+}
+p.video-summary-content-view-model-wiz__paragraph{
+    color:var(--fg) !important;
+}
+h3#title{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline{
+    color:var(--fg2) !important;
+    border-color:var(--bg2) !important;
+}
+div#icon-label{
+    color:var(--fg) !important;
+}
+div#voice-search-button{
+    background-color:var(--bg2) !important;
+}
+
+iron-selector#chip,ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg2) !important;
+}
+ytd-mini-guide-renderer{
+    background-color:var(--bg2) !important;
+}
+ytd-mini-guide-entry-renderer{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;
+}
+a.ytd-mini-guide-entry-renderer{
+    color:var(--fg2) !important;
+}
+#chips-wrapper.ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg) !important;
+}
+
+#left-arrow-button.ytd-feed-filter-chip-bar-renderer, #right-arrow-button.ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg) !important;
+}
\ No newline at end of file
diff --git a/submissions/TweakTube/themes/mocha.css b/submissions/TweakTube/themes/mocha.css
new file mode 100644
index 00000000..53b3c288
--- /dev/null
+++ b/submissions/TweakTube/themes/mocha.css
@@ -0,0 +1,133 @@
+*{
+    --bg:#11111b;
+    --bg2:#1e1e2e;
+    --fg:#cdd6f4;
+    --fg2:#9399b2;
+    --primary:#89b4fa;
+    --secondary:#f38ba8;
+}
+div#content{
+    background-color:var(--bg);
+}
+div#container.ytd-masthead{
+    background-color:var(--bg);
+}
+div.ytSearchboxComponentInputBox{
+    background-color:var(--bg2);
+    color:var(--fg2);
+}
+div.ytSearchboxComponentInputBoxHasFocus{
+    transition: all 0.5s ease-in-out;
+    border-color: var(--primary) !important;
+    border-width:2px;
+}
+yt-formatted-string#video-title{
+    color:var(--fg) !important;
+}
+a.yt-formatted-string{
+    color:var(--fg2) !important;
+}
+span.inline-metadata-item{
+    color:var(--fg2) !important;
+}
+button.ytSearchboxComponentSearchButton{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;
+}
+yt-attributed-string#content-text{
+    color:var(--fg) !important;
+}
+a#author-text span{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text{
+    color:var(--fg2) !important;
+}
+div#description{
+    background-color:(--bg2);
+    color:var(--fg2);
+}
+span.yt-core-attributed-string--link-inherit-color{
+    color:var(--fg) !important;
+}
+.yt-core-attributed-string--link-inherit-color .yt-core-attributed-string__link--call-to-action-color{
+    color:var(--primary) !important;
+}
+div#contentContainer.tp-yt-app-drawer{
+    background-color:var(--bg) !important;
+}
+
+g[id^="youtube-paths_yt"]{
+    color:var(--fg) !important;
+}
+
+yt-icon{
+    color:var(--fg) !important;
+    fill:var(--fg) !important;
+}
+.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;    
+}
+.yt-formatted-string{
+    color:var(--fg) !important;
+}
+yt-formatted-string{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal{
+    color:var(--fg) !important;
+    background:var(--bg2) !important;
+}
+span#video-title{
+    color:var(--fg) !important;
+}
+.yt-spec-touch-feedback-shape--touch-response .yt-spec-touch-feedback-shape__fill{
+    color:var(--fg) !important;
+}
+div#title{
+    color:var(--fg) !important;
+}
+tp-yt-paper-button{
+    color:var(--fg) !important;
+}
+p.video-summary-content-view-model-wiz__paragraph{
+    color:var(--fg) !important;
+}
+h3#title{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline{
+    color:var(--fg2) !important;
+    border-color:var(--bg2) !important;
+}
+div#icon-label{
+    color:var(--fg) !important;
+}
+div#voice-search-button{
+    background-color:var(--bg2) !important;
+}
+
+iron-selector#chip,ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg2) !important;
+}
+ytd-mini-guide-renderer{
+    background-color:var(--bg2) !important;
+}
+ytd-mini-guide-entry-renderer{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;
+}
+a.ytd-mini-guide-entry-renderer{
+    color:var(--fg2) !important;
+}
+#chips-wrapper.ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg) !important;
+}
+
+#left-arrow-button.ytd-feed-filter-chip-bar-renderer, #right-arrow-button.ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg) !important;
+}
\ No newline at end of file
diff --git a/submissions/TweakTube/themes/nord.css b/submissions/TweakTube/themes/nord.css
new file mode 100644
index 00000000..9ff49fd9
--- /dev/null
+++ b/submissions/TweakTube/themes/nord.css
@@ -0,0 +1,133 @@
+*{
+    --bg2: #2E3440;
+	--bg: #434C5E;
+	--fg: #ECEFF4;
+  --fg2:#D8DEE9;
+  --primary:#81A1C1;
+  --secondary: #8FBCBB;
+}
+div#content{
+    background-color:var(--bg);
+}
+div#container.ytd-masthead{
+    background-color:var(--bg);
+}
+div.ytSearchboxComponentInputBox{
+    background-color:var(--bg2);
+    color:var(--fg2);
+}
+div.ytSearchboxComponentInputBoxHasFocus{
+    transition: all 0.5s ease-in-out;
+    border-color: var(--primary) !important;
+    border-width:2px;
+}
+yt-formatted-string#video-title{
+    color:var(--fg) !important;
+}
+a.yt-formatted-string{
+    color:var(--fg2) !important;
+}
+span.inline-metadata-item{
+    color:var(--fg2) !important;
+}
+button.ytSearchboxComponentSearchButton{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;
+}
+yt-attributed-string#content-text{
+    color:var(--fg) !important;
+}
+a#author-text span{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text{
+    color:var(--fg2) !important;
+}
+div#description{
+    background-color:(--bg2);
+    color:var(--fg2);
+}
+span.yt-core-attributed-string--link-inherit-color{
+    color:var(--fg) !important;
+}
+.yt-core-attributed-string--link-inherit-color .yt-core-attributed-string__link--call-to-action-color{
+    color:var(--primary) !important;
+}
+div#contentContainer.tp-yt-app-drawer{
+    background-color:var(--bg) !important;
+}
+
+g[id^="youtube-paths_yt"]{
+    color:var(--fg) !important;
+}
+
+yt-icon{
+    color:var(--fg) !important;
+    fill:var(--fg) !important;
+}
+.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;    
+}
+.yt-formatted-string{
+    color:var(--fg) !important;
+}
+yt-formatted-string{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal{
+    color:var(--fg) !important;
+    background:var(--bg2) !important;
+}
+span#video-title{
+    color:var(--fg) !important;
+}
+.yt-spec-touch-feedback-shape--touch-response .yt-spec-touch-feedback-shape__fill{
+    color:var(--fg) !important;
+}
+div#title{
+    color:var(--fg) !important;
+}
+tp-yt-paper-button{
+    color:var(--fg) !important;
+}
+p.video-summary-content-view-model-wiz__paragraph{
+    color:var(--fg) !important;
+}
+h3#title{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline{
+    color:var(--fg2) !important;
+    border-color:var(--bg2) !important;
+}
+div#icon-label{
+    color:var(--fg) !important;
+}
+div#voice-search-button{
+    background-color:var(--bg2) !important;
+}
+
+iron-selector#chip,ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg2) !important;
+}
+ytd-mini-guide-renderer{
+    background-color:var(--bg2) !important;
+}
+ytd-mini-guide-entry-renderer{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;
+}
+a.ytd-mini-guide-entry-renderer{
+    color:var(--fg2) !important;
+}
+#chips-wrapper.ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg) !important;
+}
+
+#left-arrow-button.ytd-feed-filter-chip-bar-renderer, #right-arrow-button.ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg) !important;
+}
\ No newline at end of file
diff --git a/submissions/TweakTube/themes/rosepine.css b/submissions/TweakTube/themes/rosepine.css
new file mode 100644
index 00000000..1bad90b7
--- /dev/null
+++ b/submissions/TweakTube/themes/rosepine.css
@@ -0,0 +1,133 @@
+*{
+    --bg2: #191724;
+	--bg: #232136;
+	--fg: #e0def4;
+  --fg2:#9893a5;
+  --primary:#c4a7e7;
+  --secondary: #eb6f92;
+}
+div#content{
+    background-color:var(--bg);
+}
+div#container.ytd-masthead{
+    background-color:var(--bg);
+}
+div.ytSearchboxComponentInputBox{
+    background-color:var(--bg2);
+    color:var(--fg2);
+}
+div.ytSearchboxComponentInputBoxHasFocus{
+    transition: all 0.5s ease-in-out;
+    border-color: var(--primary) !important;
+    border-width:2px;
+}
+yt-formatted-string#video-title{
+    color:var(--fg) !important;
+}
+a.yt-formatted-string{
+    color:var(--fg2) !important;
+}
+span.inline-metadata-item{
+    color:var(--fg2) !important;
+}
+button.ytSearchboxComponentSearchButton{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;
+}
+yt-attributed-string#content-text{
+    color:var(--fg) !important;
+}
+a#author-text span{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text{
+    color:var(--fg2) !important;
+}
+div#description{
+    background-color:(--bg2);
+    color:var(--fg2);
+}
+span.yt-core-attributed-string--link-inherit-color{
+    color:var(--fg) !important;
+}
+.yt-core-attributed-string--link-inherit-color .yt-core-attributed-string__link--call-to-action-color{
+    color:var(--primary) !important;
+}
+div#contentContainer.tp-yt-app-drawer{
+    background-color:var(--bg) !important;
+}
+
+g[id^="youtube-paths_yt"]{
+    color:var(--fg) !important;
+}
+
+yt-icon{
+    color:var(--fg) !important;
+    fill:var(--fg) !important;
+}
+.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;    
+}
+.yt-formatted-string{
+    color:var(--fg) !important;
+}
+yt-formatted-string{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal{
+    color:var(--fg) !important;
+    background:var(--bg2) !important;
+}
+span#video-title{
+    color:var(--fg) !important;
+}
+.yt-spec-touch-feedback-shape--touch-response .yt-spec-touch-feedback-shape__fill{
+    color:var(--fg) !important;
+}
+div#title{
+    color:var(--fg) !important;
+}
+tp-yt-paper-button{
+    color:var(--fg) !important;
+}
+p.video-summary-content-view-model-wiz__paragraph{
+    color:var(--fg) !important;
+}
+h3#title{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline{
+    color:var(--fg2) !important;
+    border-color:var(--bg2) !important;
+}
+div#icon-label{
+    color:var(--fg) !important;
+}
+div#voice-search-button{
+    background-color:var(--bg2) !important;
+}
+
+iron-selector#chip,ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg2) !important;
+}
+ytd-mini-guide-renderer{
+    background-color:var(--bg2) !important;
+}
+ytd-mini-guide-entry-renderer{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;
+}
+a.ytd-mini-guide-entry-renderer{
+    color:var(--fg2) !important;
+}
+#chips-wrapper.ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg) !important;
+}
+
+#left-arrow-button.ytd-feed-filter-chip-bar-renderer, #right-arrow-button.ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg) !important;
+}
\ No newline at end of file
diff --git a/submissions/TweakTube/themes/solar-dark.css b/submissions/TweakTube/themes/solar-dark.css
new file mode 100644
index 00000000..f00bf2a2
--- /dev/null
+++ b/submissions/TweakTube/themes/solar-dark.css
@@ -0,0 +1,133 @@
+*{
+    --bg2: #002B36;
+	--bg: #073642;
+	--fg: #fdf6e3;
+  --fg2:#93a1a1;
+  --primary:#268bd2;
+  --secondary: #859900;
+}
+div#content{
+    background-color:var(--bg);
+}
+div#container.ytd-masthead{
+    background-color:var(--bg);
+}
+div.ytSearchboxComponentInputBox{
+    background-color:var(--bg2);
+    color:var(--fg2);
+}
+div.ytSearchboxComponentInputBoxHasFocus{
+    transition: all 0.5s ease-in-out;
+    border-color: var(--primary) !important;
+    border-width:2px;
+}
+yt-formatted-string#video-title{
+    color:var(--fg) !important;
+}
+a.yt-formatted-string{
+    color:var(--fg2) !important;
+}
+span.inline-metadata-item{
+    color:var(--fg2) !important;
+}
+button.ytSearchboxComponentSearchButton{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;
+}
+yt-attributed-string#content-text{
+    color:var(--fg) !important;
+}
+a#author-text span{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text{
+    color:var(--fg2) !important;
+}
+div#description{
+    background-color:(--bg2);
+    color:var(--fg2);
+}
+span.yt-core-attributed-string--link-inherit-color{
+    color:var(--fg) !important;
+}
+.yt-core-attributed-string--link-inherit-color .yt-core-attributed-string__link--call-to-action-color{
+    color:var(--primary) !important;
+}
+div#contentContainer.tp-yt-app-drawer{
+    background-color:var(--bg) !important;
+}
+
+g[id^="youtube-paths_yt"]{
+    color:var(--fg) !important;
+}
+
+yt-icon{
+    color:var(--fg) !important;
+    fill:var(--fg) !important;
+}
+.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;    
+}
+.yt-formatted-string{
+    color:var(--fg) !important;
+}
+yt-formatted-string{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal{
+    color:var(--fg) !important;
+    background:var(--bg2) !important;
+}
+span#video-title{
+    color:var(--fg) !important;
+}
+.yt-spec-touch-feedback-shape--touch-response .yt-spec-touch-feedback-shape__fill{
+    color:var(--fg) !important;
+}
+div#title{
+    color:var(--fg) !important;
+}
+tp-yt-paper-button{
+    color:var(--fg) !important;
+}
+p.video-summary-content-view-model-wiz__paragraph{
+    color:var(--fg) !important;
+}
+h3#title{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline{
+    color:var(--fg2) !important;
+    border-color:var(--bg2) !important;
+}
+div#icon-label{
+    color:var(--fg) !important;
+}
+div#voice-search-button{
+    background-color:var(--bg2) !important;
+}
+
+iron-selector#chip,ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg2) !important;
+}
+ytd-mini-guide-renderer{
+    background-color:var(--bg2) !important;
+}
+ytd-mini-guide-entry-renderer{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;
+}
+a.ytd-mini-guide-entry-renderer{
+    color:var(--fg2) !important;
+}
+#chips-wrapper.ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg) !important;
+}
+
+#left-arrow-button.ytd-feed-filter-chip-bar-renderer, #right-arrow-button.ytd-feed-filter-chip-bar-renderer{
+    background-color:var(--bg) !important;
+}
\ No newline at end of file
diff --git a/submissions/TweakTube/themes/solar-light.css b/submissions/TweakTube/themes/solar-light.css
new file mode 100644
index 00000000..3b59d68d
--- /dev/null
+++ b/submissions/TweakTube/themes/solar-light.css
@@ -0,0 +1,112 @@
+*{
+    --bg2: #fdf6e3;
+	--bg: #eee8d5;
+	--fg: #002B36;
+	--fg2: #073642;
+  --primary:#268bd2;
+  --secondary: #859900;
+}
+div#content{
+    background-color:var(--bg);
+}
+div#container.ytd-masthead{
+    background-color:var(--bg);
+}
+div.ytSearchboxComponentInputBox{
+    background-color:var(--bg2);
+    color:var(--fg2);
+}
+div.ytSearchboxComponentInputBoxHasFocus{
+    transition: all 0.5s ease-in-out;
+    border-color: var(--primary) !important;
+    border-width:2px;
+}
+yt-formatted-string#video-title{
+    color:var(--fg) !important;
+}
+a.yt-formatted-string{
+    color:var(--fg2) !important;
+}
+span.inline-metadata-item{
+    color:var(--fg2) !important;
+}
+button.ytSearchboxComponentSearchButton{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;
+}
+yt-attributed-string#content-text{
+    color:var(--fg) !important;
+}
+a#author-text span{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text{
+    color:var(--primary) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text{
+    color:var(--fg2) !important;
+}
+div#description{
+    background-color:(--bg2);
+    color:var(--fg2);
+}
+span.yt-core-attributed-string--link-inherit-color{
+    color:var(--fg) !important;
+}
+.yt-core-attributed-string--link-inherit-color .yt-core-attributed-string__link--call-to-action-color{
+    color:var(--primary) !important;
+}
+div#contentContainer.tp-yt-app-drawer{
+    background-color:var(--bg) !important;
+}
+
+g[id^="youtube-paths_yt"]{
+    color:var(--fg) !important;
+}
+
+yt-icon{
+    color:var(--fg) !important;
+    fill:var(--fg) !important;
+}
+.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--tonal{
+    background-color:var(--bg2) !important;
+    color:var(--fg) !important;    
+}
+.yt-formatted-string{
+    color:var(--fg) !important;
+}
+yt-formatted-string{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal{
+    color:var(--fg) !important;
+    background:var(--bg2) !important;
+}
+span#video-title{
+    color:var(--fg) !important;
+}
+.yt-spec-touch-feedback-shape--touch-response .yt-spec-touch-feedback-shape__fill{
+    color:var(--fg) !important;
+}
+div#title{
+    color:var(--fg) !important;
+}
+tp-yt-paper-button{
+    color:var(--fg) !important;
+}
+p.video-summary-content-view-model-wiz__paragraph{
+    color:var(--fg) !important;
+}
+h3#title{
+    color:var(--fg) !important;
+}
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline{
+    color:var(--fg2) !important;
+    border-color:var(--bg2) !important;
+}
+div#icon-label{
+    color:var(--fg) !important;
+}
+div#voice-search-button{
+    background-color:var(--bg2) !important;
+}
\ No newline at end of file


Reviews:
user: login: JosiasAurel
body: I still see the YouTube sidebar when I turn it on. 
<img width="1822" alt="image" src="https://github.com/user-attachments/assets/9e24385e-fb0d-47a1-a4e0-1c8e598780a2" />

state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-03-11T19:13:43Z
user: login: ShibamRoy9826
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T03:17:17Z
user: login: JosiasAurel
body: lgtm. please fill [this form](https://airtable.com/appgtKZwZBoOeFU7O/pagyeS51zr2kC1rp0/form) to get your grant.
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-13T07:28:02Z

Review comments:
diff_hunk: @@ -0,0 +1,33 @@
+const shorts="https://youtube.com/shorts";
path: submissions/TweakTube/background.js
user: login: JosiasAurel
body: i get this error when i install it for the first time
<img width="1031" alt="image" src="https://github.com/user-attachments/assets/f1161991-4b6c-4f1d-baa2-03d26517b786" />

created_at: 2025-03-11T19:10:14Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,33 @@
+const shorts="https://youtube.com/shorts";
path: submissions/TweakTube/background.js
user: login: ShibamRoy9826
body: This is okay i think, shouldn't cause any issues. Its because when you install it for the first time, there's nothing set as the theme(undefined). And that's when i use a file called default.css . I can still avoid this and will fix it today, Thanks!
created_at: 2025-03-12T03:17:17Z
author_association: CONTRIBUTOR

PR comments:
user: login: vercel[bot]
created_at: 2025-03-09T16:58:37Z
body: @ShibamRoy9826 is attempting to deploy a commit to the **Hack Club** Team on [Vercel](https://vercel.com).

A member of the Team first needs to [authorize it](https://vercel.com/git/authorize?team=Hack%20Club&type=github&job=%7B%22headInfo%22%3A%7B%22sha%22%3A%2294a9856efb15bfc6e6ba4eff4b222f61399a6074%22%7D%2C%22id%22%3A%22Qmc5jmLkHtrUYS5GDTbAtPotsVZm3g5sRsWRDvuBPKsb5d%22%2C%22org%22%3A%22hackclub%22%2C%22prId%22%3A156%2C%22repo%22%3A%22browserbuddy%22%7D).


author_association: NONE
user: login: ShibamRoy9826
created_at: 2025-03-09T17:19:11Z
body: Forgot to mention: [https://github.com/ShibamRoy9826/TweakTube](https://github.com/ShibamRoy9826/TweakTube) incase its required
author_association: CONTRIBUTOR
user: login: ShibamRoy9826
created_at: 2025-03-12T03:11:39Z
body: Sorry  i didn't state it properly, it is supposed to hide the sidebar when unextended(when it's unextended only the icons are visible with some text).  And it will be hidden on reload or when the page is somehow mutated(like when new content is loading). I intentionally didn't hide it when extended, because it kind of breaks too much functionality. If you want though i can still hide the whole sidebar.
author_association: CONTRIBUTOR
user: login: ShibamRoy9826
created_at: 2025-03-12T04:19:09Z
body: Fixed the error dialog, can you check again please?

author_association: CONTRIBUTOR
user: login: ShibamRoy9826
created_at: 2025-03-14T05:13:55Z
body: Thank you so much! I have filled it up now

author_association: CONTRIBUTOR