From 6fed5355f0634b694d0c23cb59dd1ccb50f73511 Mon Sep 17 00:00:00 2001 From: Lacey Date: Wed, 6 Nov 2024 23:17:16 -0800 Subject: [PATCH] Brat tweaks, fix colors --- script.js | 43 ++++++++++++++++++++++++++----------- styles.css | 63 +++++++++++++++++++++++++++++------------------------- 2 files changed, 65 insertions(+), 41 deletions(-) diff --git a/script.js b/script.js index 2c4d94b..1c1739d 100644 --- 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 index b5eca53..3e91607 100644 --- 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 */ }