Brat tweaks, fix colors

koronkowy · Nov 7, 2024 · 6fed535 · 6fed535
1 parent a194b29
commit 6fed535
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 41 deletions.
diff --git a/script.js b/script.js
@@ -4,10 +4,15 @@ const pastelColors = [
 ];
 
 const jewelTones = [
-    '#5C47E0', '#7F27C5', '#C88AFA', '#AF2294', '#DB4D8E',
-    '#38D4A4', '#3B2E4C', '#4B3A5A', '#5A4970', '#6A5683', '#7A658E'
+    '#A05DA5', // Purple
+    '#5E93A1', // Teal Blue
+    '#9073A3', // Muted Lavender
+    '#3C4C79', // Deep Blue
+    '#2A1E3C'  // Dark Purple
 ];
 
+const bratGreen = '#8ACE00'; // Consistent brat green
+
 document.addEventListener("DOMContentLoaded", function () {
     loadChannels();
     setupThemeSelector();
@@ -80,7 +85,7 @@ function getRandomJewelTone() {
 }
 
 function getRandomGreyShade() {
-    const greyValue = Math.floor(Math.random() * 155) + 100; // Lighter shades of grey
+    const greyValue = Math.floor(Math.random() * 155) + 100;
     return `rgb(${greyValue}, ${greyValue}, ${greyValue})`;
 }
 
@@ -89,7 +94,11 @@ function applyListStyles() {
     const listItems = document.querySelectorAll("#channelList li");
 
     listItems.forEach(item => {
-        if (theme === 'hacker') {
+        if (theme === 'brat') {
+            item.style.backgroundColor = bratGreen;
+            item.style.color = 'black';
+            item.style.border = '1px solid black';
+        } else if (theme === 'hacker') {
             item.style.backgroundColor = '#000000';
             item.style.color = '#00ff00';
             item.style.border = '1px solid #00ff00';
@@ -102,10 +111,6 @@ function applyListStyles() {
             item.style.backgroundColor = randomJewelColor;
             item.style.color = '#e6e6e6';
             item.style.border = 'none';
-        } else if (theme === 'brat') {
-            item.style.backgroundColor = '#A4D600';
-            item.style.color = '#000000';
-            item.style.border = '1px solid #000000';
         } else {
             const randomColor = getRandomPastelColor();
             item.style.backgroundColor = randomColor;
@@ -117,13 +122,27 @@ function applyListStyles() {
 
 function changeTheme(theme) {
     document.body.setAttribute("data-theme", theme);
+    const title = document.querySelector(".title");
 
-    // Set specific background color for Brat theme
     if (theme === 'brat') {
-        document.body.style.background = '#A4D600';
+        title.style.fontFamily = 'Arial Narrow, sans-serif';
+        title.style.fontWeight = 'bold';
+        title.style.color = 'black';
+        document.body.style.backgroundColor = bratGreen; // Set solid brat green background
+        document.body.style.backgroundImage = 'none'; // Remove any gradients
     } else {
-        // Reset background for other themes
-        document.body.style.background = '';
+        title.style.fontFamily = "'ADLaM Display', cursive";
+        title.style.fontWeight = 'normal';
+
+        if (theme === 'hacker') {
+            title.style.color = '#00ff00'; // Cyber green for hacker theme
+            document.body.style.backgroundColor = '#000000';
+            document.body.style.backgroundImage = 'none';
+        } else {
+            title.style.color = ''; // Default color
+            document.body.style.backgroundImage = ''; // Restore gradient
+            document.body.style.backgroundColor = '';
+        }
     }
 
     applyListStyles();

diff --git a/styles.css b/styles.css
@@ -37,11 +37,10 @@ body {
 
 /* Title and Subtitle */
 .title {
-    font-family: 'Arial Narrow', sans-serif;
+    font-family: 'ADLaM Display', cursive; /* Default font for all themes except Brat */
     text-align: center;
     font-size: 3.5em;
     margin-bottom: 10px;
-    font-weight: 700;
 }
 
 .subtitle {
@@ -181,45 +180,51 @@ body[data-theme='hacker'] select {
     color: #00ff00;
 }
 
-/* Dark Mode Link Styles */
-body[data-theme='dark'] a {
-    color: #e6e6e6; /* Light color for better readability */
-}
-
-body[data-theme='dark'] a:visited {
-    color: #b0b0b0; /* Light gray for visited links to differentiate but still readable */
-}
-
 /* Brat Theme */
 body[data-theme='brat'] {
-    background-color: #A7E20E; /* Brat green */
-    color: #000000; /* Black text */
+    background-color: #8ACE00 !important; /* Brat green background */
+    color: black;
 }
 
 body[data-theme='brat'] .title {
-    color: #000000; /* Black title */
-    font-family: 'Arial Narrow', sans-serif;
+    font-family: 'Arial Narrow', sans-serif; /* Use Arial Narrow in Brat theme */
+    color: black;
 }
 
 body[data-theme='brat'] .container {
-    background-color: #A7E20E; /* Same green background for container */
-    border: 2px solid #000000; /* Black border around container */
+    background-color: #8ACE00;
+    border: 2px solid black;
 }
 
-body[data-theme='brat'] .copy-container button,
-body[data-theme='brat'] .copy-container textarea,
-body[data-theme='brat'] .controls input[type="text"] {
-    background-color: #FFFFFF; /* White background for input elements */
-    border: 1px solid #000000; /* Black border for buttons and inputs */
-    color: #000000; /* Black text for inputs */
+body[data-theme='brat'] li {
+    background-color: #8ACE00;
+    color: black;
+    border: 1px solid black;
 }
 
-body[data-theme='brat'] li {
-    background-color: #A7E20E; /* Brat green for channel items */
-    color: #000000; /* Black text */
-    border: 1px solid #000000; /* Black borders around items */
+body[data-theme='brat'] a {
+    color: black;
 }
 
-body[data-theme='brat'] li a {
-    color: #000000; /* Black links */
+body[data-theme='brat'] button,
+body[data-theme='brat'] select,
+body[data-theme='brat'] #searchBar,
+body[data-theme='brat'] #rawList {
+    background-color: white;
+    border: 1px solid black;
+    color: black;
+}
+
+/* Ensure ADLaM Display font for title in all themes except Brat */
+body:not([data-theme='brat']) .title {
+    font-family: 'ADLaM Display', cursive;
+}
+
+/* Dark Mode Link Styles */
+body[data-theme='dark'] a {
+    color: #e6e6e6; /* Light color for better readability */
+}
+
+body[data-theme='dark'] a:visited {
+    color: #b0b0b0; /* Light gray for visited links to differentiate but still readable */
 }