diff --git a/plugins/oled-theme-luna/src/Settings.tsx b/plugins/oled-theme-luna/src/Settings.tsx index bb7fae6..1163f70 100644 --- a/plugins/oled-theme-luna/src/Settings.tsx +++ b/plugins/oled-theme-luna/src/Settings.tsx @@ -5,11 +5,13 @@ import React from "react"; export const settings = await ReactiveStore.getPluginStorage("OLEDTheme", { qualityColorMatchedSeekBar: true, oledFriendlyButtons: true, + lightMode: false, }); export const Settings = () => { const [qualityColorMatchedSeekBar, setQualityColorMatchedSeekBar] = React.useState(settings.qualityColorMatchedSeekBar); const [oledFriendlyButtons, setOledFriendlyButtons] = React.useState(settings.oledFriendlyButtons); + const [lightMode, setLightMode] = React.useState(settings.lightMode); return ( @@ -39,6 +41,19 @@ export const Settings = () => { } }} /> + { + console.log("Light Mode:", checked ? "enabled" : "disabled"); + setLightMode((settings.lightMode = checked)); + // Update styles immediately when setting changes + if ((window as any).updateOLEDThemeStyles) { + (window as any).updateOLEDThemeStyles(); + } + }} + /> ); }; \ No newline at end of file diff --git a/plugins/oled-theme-luna/src/index.ts b/plugins/oled-theme-luna/src/index.ts index c73b219..98ed1e9 100644 --- a/plugins/oled-theme-luna/src/index.ts +++ b/plugins/oled-theme-luna/src/index.ts @@ -2,8 +2,9 @@ import { LunaUnload, Tracer } from "@luna/core"; import { settings, Settings } from "./Settings"; // Import CSS files directly using Luna's file:// syntax -import fullTheme from "file://dark-theme.css?minify"; +import darkTheme from "file://dark-theme.css?minify"; import oledFriendlyTheme from "file://oled-friendly.css?minify"; +import lightTheme from "file://light-theme.css?minify"; export const { trace } = Tracer("[OLED Theme]"); export { Settings }; @@ -22,8 +23,16 @@ const applyThemeStyles = function(): void { appliedStyleElement.parentNode.removeChild(appliedStyleElement); } - // Choose the appropriate CSS file based on OLED Friendly Buttons setting - let selectedStyle = settings.oledFriendlyButtons ? oledFriendlyTheme : fullTheme; + // Choose the appropriate CSS file based on settings + let selectedStyle: string; + + if (settings.lightMode) { + // Light mode always uses the full light theme (OLED friendly doesn't apply to light theme) + selectedStyle = lightTheme; + } else { + // Dark mode - choose between full dark theme or OLED friendly version + selectedStyle = settings.oledFriendlyButtons ? oledFriendlyTheme : darkTheme; + } // Remove SeekBar coloring if Quality Color Matched Seek Bar is enabled if (settings.qualityColorMatchedSeekBar) { diff --git a/plugins/oled-theme-luna/src/light-theme.css b/plugins/oled-theme-luna/src/light-theme.css new file mode 100644 index 0000000..a49dbb8 --- /dev/null +++ b/plugins/oled-theme-luna/src/light-theme.css @@ -0,0 +1,400 @@ +/* +{ + "name": "Abyss Neptune - Light", + "author": "@itzzexcel", + "description": "Abyss Neptune Light Theme for TIDAL (17/Jan/2025)" +} +*/ + +::-webkit-scrollbar { + display: none; +} + +:root { + --wave-color-solid-accent-fill: #666666; + --wave-color-solid-rainbow-yellow-fill: #666666; + --wave-color-solid-contrast-fill: #666666; + --wave-color-solid-base-brighter: #666666; + --wave-text-body-medium: #333333 !important; + --track-vibrant-color: #666666 !important; + --wave-color-opacity-contrast-fill-ultra-thin: #c0c0c0 !important; + --wave-color-solid-rainbow-yellow-darkest: #c0c0c0 !important; + --wave-color-solid-accent-dark: #555555; +} + +/* Credits to https://github.com/surfbryce for the fonts */ +@font-face { + font-family: "AbyssFont"; + font-weight: 400; + src: url("https://excel.lexploits.top/extra/tidal/LyricsRegular.woff2") format("woff2"); +} + +@font-face { + font-family: "AbyssFont"; + font-weight: 500; + src: url("https://excel.lexploits.top/extra/tidal/LyricsMedium.woff2") format("woff2"); +} + +@font-face { + font-family: "AbyssFont"; + font-weight: 600; + src: url("https://excel.lexploits.top/extra/tidal/LyricsSemibold.woff2") format("woff2"); +} + +@font-face { + font-family: "AbyssFont"; + font-weight: 700; + src: url("https://excel.lexploits.top/extra/tidal/LyricsBold.woff2") format("woff2"); +} + +[class^="followingButton"], +[title="Unfollow"], +[title="Follow"], +[title="Unfollow"]>span, +[title="Follow"]>span { + background-color: var(--wave-color-solid-rainbow-yellow-fill) !important; + color: var(--wave-color-solid-base-brighter); +} + +[class^="_wave-badge-color-max"] { + color: #333333 !important; + background-color: var(--wave-color-solid-accent-fill); + border-radius: 3px; +} + +[data-test="main-layout-sidebar-wrapper"] { + border-right: rgb(230, 230, 230) 1px solid; + background-color: rgba(250, 250, 250, 0.95) !important; +} + +[class^="_wave-badge"] { + background-color: var(--wave-color-solid-accent-fill); + border-radius: 4px; + color: #333333; +} + +[class^="_progressBarWrapper"] { + color: var(--wave-color-solid-accent-fill) !important; +} + +[class^="_sidebarItem"]>span { + color: #666666; +} + +[data-test="main-layout-header"] { + border-left: 0 !important; +} + +[class^="_sidebarItem"]:hover span { + color: #333333; +} + +[class^="_sidebarItem"] [class^="active"]>span { + color: #333333 !important; +} + +/* Sidebar icons and text - ensure grey colors */ +[data-test="main-layout-sidebar-wrapper"] svg, +[data-test="main-layout-sidebar-wrapper"] path, +[class^="_sidebarItem"] svg, +[class^="_sidebarItem"] path { + fill: #666666 !important; + color: #666666 !important; +} + +[data-test="main-layout-sidebar-wrapper"] span, +[class^="_sidebarItem"] span { + color: #666666 !important; +} + +[class^="_active"] { + color: var(--wave-color-solid-accent-fill) !important; +} + +[class^="ReactVirtualized__Grid"] { + border-radius: 10px; + margin: 5px; +} + +[data-test="media-table"]>div>div>div { + border: 1px solid rgb(230, 230, 230) !important; +} + +[class^="ReactVirtualized__Grid__innerScrollContainer"] { + border: none; + margin: 5px; +} + +[class^="button"]>span { + color: #333333; +} + +/* Override button span color specifically for play/shuffle buttons */ +button[data-test="play-all"] [class^="button"]>span, +button[data-test="shuffle-all"] [class^="button"]>span, +button[data-test="play-all"] span, +button[data-test="shuffle-all"] span { + color: white !important; +} + +[class^="_explicitBadge"] { + color: var(--wave-color-solid-accent-fill); +} + +[class^="viewAllButton"] { + border-radius: 4px; + display: grid; + place-items: center; +} + +[data-test="current-media-imagery"] { + border: 0 !important; + margin: none; +} + +[class^="_imageBorder"] { + display: none; +} + +[class^="_headerButtons"]>button, +[class^="_headerButtons"]>button>span, +[data-test="toggle-picture-in-picture"] { + background-color: var(--wave-color-solid-accent-fill) !important; + color: #333333; +} + +[class^="_container"]>[class^="_navigationArrows"] { + color: #333333; + background-color: var(--wave-color-solid-accent-fill) !important; + border-radius: 4px; +} + +[class^="_buttons"]>button>span { + color: #333333 !important; +} + +[class^="_container"]>button { + border: 0px none; +} + + +[data-test="feed-sidebar"] { + margin-top: 10px; +} + +[data-test="footer-player"] { + width: calc(100% - 20px); + bottom: 10px; + left: 10px; + border: 1px solid rgba(200, 200, 200, 0.7); + border-radius: 4px !important; + position: absolute !important; +} + +[class^="_tooltipContainer"]>button { + background-color: var(--wave-color-solid-accent-fill); + color: #333333; +} + +[class^="_tooltipContainer"]>button:hover { + background-color: #555555 !important; +} + +[class^="_tableRow"]:hover>*, +[data-test-is-playing="true"]>* { + color: #333333 !important; +} + +[class^="_tableRow"]>*, +[data-test-is-playing="false"]>* { + color: #333333 !important; +} + +/* Track list text - ensure all text is dark */ +[data-test="media-table"] *, +[class^="_trackTitle"], +[class^="_artistName"], +[class^="_albumTitle"], +[class^="_tableCell"] *, +[class^="_tableCellContent"] * { + color: #333333 !important; +} + +[class*="coverColumn"] { + padding-left: 5px !important; +} + +[class^="actionList"] { + background-color: transparent; + margin: 0px; + border-radius: 5px; +} + +button[data-test="request-fullscreen"], +button[data-test="close-now-playing"], +button[data-test="play-all"], +button[data-test="shuffle-all"] { + color: #333333; + background-color: var(--wave-color-solid-accent-fill); + border-radius: 12px; +} + +button[data-test="request-fullscreen"]:hover, +button[data-test="close-now-playing"]:hover { + color: #333333; + background-color: #aaaaaa !important; +} + +.neptune-switch-checkbox:checked+.neptune-switch { + background-color: rgba(0, 0, 0, 0.1); +} + +[data-test="navigation-arrows"]>button { + background-color: var(--wave-color-solid-accent-fill) !important; + color: #333333 !important; + border-radius: 5px; +} + +[data-test="navigation-arrows"]>button:disabled { + background-color: #cccccc !important; + opacity: 1; +} + +[data-test="main-layout-header"] { + background-color: rgba(235, 235, 235, 0.95) !important; + backdrop-filter: blur(10px); + border: 1px solid var(--wave-color-opacity-contrast-fill-ultra-thin) !important; +} + +[data-test="feed-sidebar"] { + background-color: rgba(225, 225, 225, 0.9) !important; + backdrop-filter: blur(10px); + border: 1px solid var(--wave-color-opacity-contrast-fill-ultra-thin) !important; +} + +[data-test="stream-metadata"] { + background-color: rgba(230, 230, 230, 0.92) !important; + backdrop-filter: blur(10px); + border: 1px solid var(--wave-color-opacity-contrast-fill-ultra-thin) !important; +} + +[data-test="footer-player"] { + background-color: rgba(255, 255, 255, 0.6) !important; + backdrop-filter: blur(15px); + border: 1px solid rgba(200, 200, 200, 0.7) !important; +} + +[data-wave-color=textUrl] { + color: var(--wave-color-solid-accent-fill); +} + +[class^="_smallHeader"] { + margin-top: 7.5px; +} + +/* Play and Shuffle buttons - ultra aggressive targeting */ +button[data-test="play-all"], +button[data-test="shuffle-all"], +div[data-test="play-all"], +div[data-test="shuffle-all"] { + background-color: #666666 !important; + color: white !important; + border-radius: 12px !important; +} + +/* Target all possible text and icon elements */ +button[data-test="play-all"] *, +button[data-test="shuffle-all"] *, +div[data-test="play-all"] *, +div[data-test="shuffle-all"] *, +[data-test="play-all"] span, +[data-test="shuffle-all"] span, +[data-test="play-all"] svg, +[data-test="shuffle-all"] svg, +[data-test="play-all"] path, +[data-test="shuffle-all"] path, +[data-test="play-all"] div, +[data-test="shuffle-all"] div, +[data-test="play-all"] button, +[data-test="shuffle-all"] button { + color: white !important; + fill: white !important; + background-color: transparent !important; +} + +/* Override any CSS variable usage */ +[data-test="play-all"], +[data-test="shuffle-all"] { + --wave-color-solid-accent-fill: white !important; + --wave-color-solid-contrast-fill: white !important; + --wave-text-body-medium: white !important; +} + +[class^="__NEPTUNE_PAGE"], +[data-test="main"] { + margin-top: 35px; +} + +[data-test="button-desktop-release-notes"], +[data-test="button-release-notes"] { + background-color: #333333; +} + +[data-test="button-desktop-release-notes"]:hover, +[data-test="button-release-notes"]:hover { + background-color: #555555 !important; + transition: none !important; +} + +#playQueueSidebar { + top: 50px !important; + border: 1px solid var(--wave-color-opacity-contrast-fill-ultra-thin); + margin: 2px; + margin-right: -14px !important; + background-color: rgba(220, 220, 220, 0.9) !important; + backdrop-filter: blur(10px); +} + +[class^="_bottomGradient"] { + visibility: hidden; +} + +[data-test="settings-page"] { + padding-bottom: 60px !important; +} + +[data-test="query-suggestions"], +[data-test="recent-searches-container"] { + background-color: rgba(227, 227, 227, 0.85); + backdrop-filter: blur(10px); +} + +[data-test="contextmenu"] { + border: 1px solid var(--wave-color-opacity-contrast-fill-ultra-thin) !important; +} + +[class^="_dataContainer_"]::before { + background-image: var(--img); + filter: blur(10px) brightness(1.2); +} + +/* Player bar text colors - fix white text issues */ +[data-test="footer-player"] * { + color: #333333 !important; +} + +[data-test="footer-player"] [class*="trackTitle"], +[data-test="footer-player"] [class*="artistName"], +[data-test="footer-player"] [class*="trackInfo"], +[data-test="footer-player"] [class*="duration"], +[data-test="footer-player"] [class*="time"], +[data-test="footer-player"] [class*="timestamp"] { + color: #333333 !important; +} + +/* Main page background */ +body, +[data-test="main"], +[class^="__NEPTUNE_PAGE"] { + background-color: #f5f5f5 !important; +} \ No newline at end of file