jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-11-14 08:40:50 -05:00
Code Issues Activity

ThemeToggle.module.scss -> inline style

Browse Source 
removes an unnecessary call to a very small CSS file since the toggle is loaded dynamically
This commit is contained in:
Jake Jarvis
2022-01-04 10:18:12 -05:00
parent 206bbd278f
commit 70778db89d
2 changed files with 6 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/page-header/ThemeToggle.module.scss
View File

@@ -1,6 +0,0 @@
.toggle {
border: 0;
padding: 0;
background: none;
cursor: pointer;
}

9
components/page-header/ThemeToggle.tsx
View File

@@ -2,8 +2,6 @@ import { useState, useEffect, useCallback } from "react";
import * as config from "../../lib/config"; import * as config from "../../lib/config";
import { BulbOffIcon, BulbOnIcon } from "../icons"; import { BulbOffIcon, BulbOnIcon } from "../icons";
import styles from "./ThemeToggle.module.scss";
// store preference in local storage // store preference in local storage
const storageKey = "dark_mode"; const storageKey = "dark_mode";
const getDarkPref = () => localStorage.getItem(storageKey); const getDarkPref = () => localStorage.getItem(storageKey);
@@ -58,10 +56,15 @@ const ThemeToggle = ({ className = "" }) => {
return ( return (
<button <button
className={styles.toggle}
onClick={handleToggle} onClick={handleToggle}
title={dark ? "Toggle Light Mode" : "Toggle Dark Mode"} title={dark ? "Toggle Light Mode" : "Toggle Dark Mode"}
aria-label={dark ? "Toggle Light Mode" : "Toggle Dark Mode"} aria-label={dark ? "Toggle Light Mode" : "Toggle Dark Mode"}
style={{
border: 0,
padding: 0,
background: "none",
cursor: "pointer",
}}
> >
{dark ? <BulbOffIcon className={`icon ${className}`} /> : <BulbOnIcon className={`icon ${className}`} />} {dark ? <BulbOffIcon className={`icon ${className}`} /> : <BulbOnIcon className={`icon ${className}`} />}
</button> </button>