Skip to content

Commit

Permalink
add manual theme toggle in footer
Browse files Browse the repository at this point in the history
  • Loading branch information
vgmoose committed Jan 1, 2024
1 parent 6a42890 commit 82ccda4
Show file tree
Hide file tree
Showing 3 changed files with 158 additions and 0 deletions.
9 changes: 9 additions & 0 deletions src/Footer.js
Original file line number Diff line number Diff line change
@@ -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 (
<div className="Footer">
Expand All @@ -11,6 +17,9 @@ class Footer extends Component {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a className="copyright" href="/dmca-request">DMCA Form</a>
</div>
<div className="right">
<button style={{fontSize: 10, padding: 4, marginRight: 15, verticalAlign: "top"}} onClick={toggle_theme}>
Change Theme
</button>
<a className="copyright" href="https://fortheusers.org/">ForTheUsers </a>
is not affiliated with <a className="copyright" href="https://en.wikipedia.org/wiki/Nintendo"> Nintendo Co. Ltd</a>
</div>
Expand Down
24 changes: 24 additions & 0 deletions src/MainDisplay.css
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@
--dlButtonColor: darkred;
}

:root {
--main-background: white;
--text-color: black;
}

@media (prefers-color-scheme: dark) {
:root {
--searchColor: #eee;
Expand All @@ -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 {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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 {
Expand Down
125 changes: 125 additions & 0 deletions src/Utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
}
}

0 comments on commit 82ccda4

Please sign in to comment.