From 82ccda41c315bc510e7264597760b9d248ad5ad6 Mon Sep 17 00:00:00 2001 From: vgmoose Date: Mon, 1 Jan 2024 17:34:34 -0500 Subject: [PATCH] add manual theme toggle in footer --- src/Footer.js | 9 ++++ src/MainDisplay.css | 24 +++++++++ src/Utils.js | 125 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 158 insertions(+) diff --git a/src/Footer.js b/src/Footer.js index 1fc2adf..1b1ec04 100755 --- a/src/Footer.js +++ b/src/Footer.js @@ -1,7 +1,13 @@ import React, { Component } from 'react'; +import {init_theme, toggle_theme} from './Utils'; import './MainDisplay.css'; class Footer extends Component { + // on mount, set the theme + componentDidMount() { + init_theme(); + } + render() { return (
@@ -11,6 +17,9 @@ class Footer extends Component {       DMCA Form
+ ForTheUsers is not affiliated with Nintendo Co. Ltd
diff --git a/src/MainDisplay.css b/src/MainDisplay.css index 3a99c3e..2410e07 100755 --- a/src/MainDisplay.css +++ b/src/MainDisplay.css @@ -12,6 +12,11 @@ --dlButtonColor: darkred; } +:root { + --main-background: white; + --text-color: black; +} + @media (prefers-color-scheme: dark) { :root { --searchColor: #eee; @@ -25,6 +30,16 @@ --secondaryButtonColor: #777; --dlButtonColor: rgb(239, 72, 72); } + + :root { + --main-background: black; + --text-color: white; + } +} + +body { + background-color: var(--main-background); + color: var(--text-color); } body, html, #root, .main { @@ -214,7 +229,12 @@ select:focus { table.donationList { border-collapse: collapse; width: 100%; + font-weight: 600; } +/* +table.donationList a:hover { + color: var(--dropDownBgColor); +} */ table.donationList td, table.donationList th { border: 1px solid var(--footerBackgroundColor); @@ -696,6 +716,10 @@ button:hover, .infoBox a:hover { background-color: #524B6E; } +.Sidebar .text, .sidebar-item { + color: white; +} + /*Mobile Display and Landscape display*/ @media only screen and (max-width: 800px) { .Header .right, .Footer .right { diff --git a/src/Utils.js b/src/Utils.js index 672f9e9..abc2a48 100755 --- a/src/Utils.js +++ b/src/Utils.js @@ -146,3 +146,128 @@ const getFirstPixelFromImage = (img) => { } export { getParams, getFirstPixelFromImage, stringDateToTimestamp, platformIcons, FullWidthAd, Spacer, Mobile }; + + +/* + JS file for managing light / dark themes + The toggle_theme(); function toggles the saved theme and updates the screen accordingly + The remove_theme(); function removes the theme from localstorage and only updates the screen if it doesn't match the system settings + The window.matchMedia(); function call watches for updates to system settings to keep localstorage settings accurate +*/ +// from https://stackoverflow.com/a/76795904/4953343 + +function get_system_theme() { + /* + Function for getting the system color scheme + */ + + window.theme = "dark"; + if (window.matchMedia("(prefers-color-scheme: light)").matches) { + window.theme = "light"; + } + + return window.theme; +} + +function toggle_saved_theme() { + /* + Function for toggling between the two themes saved to local storage + Returns: + Value stored in local storage + */ + + // Gets Current Value + if (localStorage.getItem("theme")) { + window.theme = localStorage.getItem("theme"); + } + else { + window.theme = get_system_theme(); + } + + // Sets the stored value as the opposite + if (window.theme === "light") { + localStorage.setItem("theme", "dark"); + } + else { + localStorage.setItem("theme", "light"); + } + + return localStorage.getItem("theme"); +} + +function switch_theme_rules() { + /* + Function for switching the rules for perfers-color-scheme + Goes through each style sheet file, then each rule within each stylesheet + and looks for any rules that require a prefered colorscheme, + if it finds one that requires light theme then it makes it require dark theme / vise + versa. The idea is that it will feel as though the themes switched even if they haven't. + */ + + for (var sheet_file = 0; sheet_file < document.styleSheets.length; sheet_file++) { + try { + for (var sheet_rule = 0; sheet_rule < document.styleSheets[sheet_file].cssRules.length; sheet_rule++) { + let rule = document.styleSheets[sheet_file].cssRules[sheet_rule]; + + if (rule && rule.media && rule.media.mediaText.includes("prefers-color-scheme")) { + let rule_media = rule.media.mediaText; + let new_rule_media = ""; + + if (rule_media.includes("light")) { + new_rule_media = rule_media.replace("light", "dark"); + } + if (rule_media.includes("dark")) { + new_rule_media = rule_media.replace("dark", "light"); + } + rule.media.deleteMedium(rule_media); + rule.media.appendMedium(new_rule_media); + } + } + } + catch (e) { + let broken_sheet = document.styleSheets[sheet_file].href; + console.warn(broken_sheet + " broke something with theme toggle : " + e); + } + } +} + +export function toggle_theme() { + /* + Toggles the current theme used + */ + toggle_saved_theme(); + switch_theme_rules(); +} + +export function remove_theme() { + /* + Function for removing theme from local storage + */ + if (localStorage.getItem("theme")) { + if (get_system_theme() !== localStorage.getItem("theme")) { + switch_theme_rules(); + } + localStorage.removeItem("theme"); + } +} + +export function init_theme() { + + window.matchMedia('(prefers-color-scheme: dark)') + /* + This makes it such that if a user changes the theme on their + browser and they have a preferred theme, the page maintains its prefered theme. + */ + .addEventListener("change", event => { + if (localStorage.getItem("theme")) { + switch_theme_rules(); // Switches Theme every time the prefered color gets updated + } + } + ) + + if (localStorage.getItem("theme")) { + if (get_system_theme() !== localStorage.getItem("theme")) { + switch_theme_rules(); + } + } +} \ No newline at end of file