Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove react hook and use javascript to detect theme state #15

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
+66 −52
Open

Remove react hook and use javascript to detect theme state #15

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5470057
Remove react hook and use javascript to detect theme state
msoham123 Jan 3, 2023
494753a
Use constant colorScheme and remove local storage
msoham123 Jan 3, 2023
5034968
Check for window in browser in build process
msoham123 Jan 3, 2023
b3ae997
Move browser check to outside of document handling
msoham123 Jan 3, 2023
7c401e7
Address review and fix pages not updating
msoham123 Jan 5, 2023
1c34de9
Address review and remove extra spaces
msoham123 Jan 5, 2023
7bd1de7
Create utils file and refactor window handling
msoham123 Jan 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions src/components/Layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import Footer from "../components/Footer";
import { Helmet } from "react-helmet";
import Button from "./Button";
import Cookies from "js-cookie";
import useDarkModeState from "../libs/useDarkModeState";

const addAnalyticsScripts = () => {
console.log('Analytics Enabled');
Expand Down Expand Up @@ -64,15 +63,15 @@ const handleDeclineCookie = () => {
cookiesDeclined = true;
};

const Layout = ({ children, title }) => {
const isDark = useDarkModeState();

const Layout = ({ children, title}) => {

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra space.

const hasConsent = getCookieConsent();
if (hasConsent)
initializeCookies();

return (
<main className={isDark ? "dark" : "light"}>
<main>
<Helmet htmlAttributes={{ lang: "en" }}>
<title>{title}</title>
</Helmet>
Expand Down
25 changes: 25 additions & 0 deletions src/libs/configureDarkMode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/**
* @license
* Copyright © 2022 Skyline Team and Contributors (https://github.com/skyline-emu/)
* SPDX-License-Identifier: BSD-3-Clause
*/

import "react";

const colorSchemeMedia = "(prefers-color-scheme: dark)";
const isBrowser = () => typeof window !== "undefined"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extract this into some utility file and also use it in CustomLink/Button.


const configureDarkMode = () => {

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra space.

if (isBrowser()) {
if (window.matchMedia(colorSchemeMedia).matches) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.add('light')
}
}

// TODO: Add a switch that respects local storage and allows user to choose
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If something is fully functional in itself then there's no need to add TODOs.

};

export default configureDarkMode;
31 changes: 0 additions & 31 deletions src/libs/useDarkModeState.js
View file
Open in desktop

This file was deleted.

5 changes: 5 additions & 0 deletions src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,13 @@ import Landing from "../sections/Landing";
import About from "../sections/About";
import Team from "../sections/Team";
import Layout from "../components/Layout";
import configureDarkMode from "../libs/configureDarkMode";


const IndexPage = () => {

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra space.

configureDarkMode();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm just thinking not tried but is it working when we go to another page? It looks like it is working on index page but what happens if we go to download page? Is it still works because it looks like you are just adding dark class on index page

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, I didn't even think about that. It seems to maintain state when navigating to the download page, which makes sense, but then upon reload defaults to light. I added the method to all pages and now it works fine, no flash and respects system theme, for all of them (even upon changing in system settings and navigating to the page.)


return (
<Layout title="Skyline - Nintendo Switch Emulator">
<Landing />
Expand Down
2 changes: 1 addition & 1 deletion tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
darkMode: "class",
darkMode: ['class'],
i18n: {
locales: ["en-US"],
defaultLocale: "en-US",
Expand Down