Skip to content

Commit b21a610

Browse files
fezcodefezcode
committed
feat: noir mode
1 parent 127ed6c commit b21a610

File tree

6 files changed

+54
-10
lines changed

6 files changed

+54
-10
lines changed

‎src/components/CommandPalette.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,10 @@ const CommandPalette = ({isOpen, setIsOpen, openGenericModal, toggleDigitalRain}
5353
isInverted, toggleInvert,
5454
isRetro, toggleRetro,
5555
isParty, toggleParty,
56-
isMirror, toggleMirror
56+
isMirror, toggleMirror,
57+
isNoir, toggleNoir
5758
} = useVisualSettings();
59+
5860
const filteredItems = filterItems(items, searchTerm);
5961

6062
useEffect(() => {
@@ -195,6 +197,14 @@ const CommandPalette = ({isOpen, setIsOpen, openGenericModal, toggleDigitalRain}
195197
duration: 2000
196198
});
197199
break;
200+
case 'toggleNoirMode':
201+
toggleNoir();
202+
addToast({
203+
title: !isNoir ? 'Noir Mode On' : 'Noir Mode Off',
204+
message: !isNoir ? 'It was a dark and stormy night...' : 'Color returns to the world.',
205+
duration: 2000
206+
});
207+
break;
198208
case 'showTime': {
199209
openGenericModal('Current Time', <LiveClock/>);
200210
break;

‎src/context/VisualSettingsContext.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export const VisualSettingsProvider = ({children}) => {
1212
const [isRetro, setIsRetro] = usePersistentState('is-retro', false);
1313
const [isParty, setIsParty] = usePersistentState('is-party', false);
1414
const [isMirror, setIsMirror] = usePersistentState('is-mirror', false);
15+
const [isNoir, setIsNoir] = usePersistentState('is-noir', false);
1516

1617
useEffect(() => {
1718
if (isInverted) {
@@ -20,6 +21,7 @@ export const VisualSettingsProvider = ({children}) => {
2021
document.body.classList.remove('invert-mode');
2122
}
2223
}, [isInverted]);
24+
2325
useEffect(() => {
2426
if (isRetro) {
2527
document.documentElement.classList.add('retro-mode');
@@ -43,17 +45,28 @@ export const VisualSettingsProvider = ({children}) => {
4345
document.documentElement.classList.remove('mirror-mode');
4446
}
4547
}, [isMirror]);
48+
49+
useEffect(() => {
50+
if (isNoir) {
51+
document.body.classList.add('noir-mode');
52+
} else {
53+
document.body.classList.remove('noir-mode');
54+
}
55+
}, [isNoir]);
56+
4657
const toggleInvert = () => setIsInverted(prev => !prev);
4758
const toggleRetro = () => setIsRetro(prev => !prev);
4859
const toggleParty = () => setIsParty(prev => !prev);
4960
const toggleMirror = () => setIsMirror(prev => !prev);
61+
const toggleNoir = () => setIsNoir(prev => !prev);
5062

5163
return (
5264
<VisualSettingsContext.Provider value={{
5365
isInverted, toggleInvert,
5466
isRetro, toggleRetro,
5567
isParty, toggleParty,
56-
isMirror, toggleMirror
68+
isMirror, toggleMirror,
69+
isNoir, toggleNoir
5770
}}>
5871
{children}
5972
</VisualSettingsContext.Provider>);

‎src/hooks/useSearchableData.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ const useSearchableData = () => {
108108
{ title: 'Party Mode', type: 'command', commandId: 'partyMode' },
109109
{ title: 'Toggle Retro Mode', type: 'command', commandId: 'toggleRetroMode' },
110110
{ title: 'Toggle Mirror Mode', type: 'command', commandId: 'toggleMirrorMode' },
111+
{ title: 'Toggle Noir Mode', type: 'command', commandId: 'toggleNoirMode' },
111112
];
112113

113114
setItems([...staticRoutes, ...customCommands, ...allPosts, ...allProjects, ...allLogs, ...allApps]);

‎src/index.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -298,4 +298,9 @@ html.mirror-mode #root {
298298
height: 100%;
299299
overflow-y: auto;
300300
overflow-x: hidden;
301-
}
301+
}
302+
303+
/* Noir Mode */
304+
body.noir-mode {
305+
filter: grayscale(100%) contrast(1.2);
306+
}

‎src/pages/CommandsPage.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ const commandsData = [
5151
{ title: "Party Mode", description: "Cycles hue colors for a disco effect. (Easter Egg)", color: "amber" },
5252
{ title: "Toggle Retro Mode", description: "Enables a retro CRT scanline effect. (Easter Egg)", color: "yellow" },
5353
{ title: "Toggle Mirror Mode", description: "Mirrors the entire page horizontally. (Easter Egg)", color: "indigo" },
54+
{ title: "Toggle Noir Mode", description: "Enables a black and white noir film effect. (Easter Egg)", color: "gray" },
5455
]
5556
},
5657
{

‎src/pages/SettingsPage.js‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@ const SettingsPage = () => {
3737
isInverted, toggleInvert,
3838
isRetro, toggleRetro,
3939
isParty, toggleParty,
40-
isMirror, toggleMirror
40+
isMirror, toggleMirror,
41+
isNoir, toggleNoir
4142
} = useVisualSettings();
42-
4343
const {addToast} = useToast();
4444
const handleResetSidebarState = () => {
4545
removeLocalStorageItem(KEY_SIDEBAR_STATE);
@@ -48,11 +48,11 @@ const SettingsPage = () => {
4848
message: 'Sidebar state has been reset. The page will now reload.',
4949
duration: 3000,
5050
});
51-
5251
setTimeout(() => {
5352
window.location.reload();
5453
}, 3000);
5554
};
55+
5656
const handleResetAppsState = () => {
5757
removeLocalStorageItem(KEY_APPS_COLLAPSED_CATEGORIES);
5858
addToast({
@@ -80,8 +80,12 @@ const SettingsPage = () => {
8080
<ArrowLeftIcon className="text-xl transition-transform group-hover:-translate-x-1"/> Back to Home
8181
</Link>
8282
<div className="mx-auto max-w-2xl text-center">
83-
<h1 className="text-4xl font-semibold tracking-tight text-white sm:text-6xl"> Settings </h1>
84-
<p className="mt-6 text-lg leading-8 text-gray-300"> Manage your application preferences. </p>
83+
<h1 className="text-4xl font-semibold tracking-tight text-white sm:text-6xl">
84+
Settings
85+
</h1>
86+
<p className="mt-6 text-lg leading-8 text-gray-300">
87+
Manage your application preferences.
88+
</p>
8589
</div>
8690
<div className="flex justify-center items-center mt-16">
8791
<div
@@ -110,9 +114,11 @@ const SettingsPage = () => {
110114
<span className="block sm:inline ml-2">
111115
Your preferences are stored locally in your browser. No data
112116
is sent to any server.
113-
</span>
117+
</span>
114118
</div>
115-
<h1 className="text-3xl font-arvo font-normal mb-4 text-app"> Animation Settings </h1>
119+
<h1 className="text-3xl font-arvo font-normal mb-4 text-app">
120+
Animation Settings
121+
</h1>
116122
<hr className="border-gray-700 mb-4"/>
117123
<div className="mb-6 ml-4 mr-4">
118124
<CustomToggle
@@ -187,6 +193,14 @@ const SettingsPage = () => {
187193
checked={isMirror}
188194
onChange={toggleMirror}
189195
/>
196+
<div className="mb-4"></div>
197+
<CustomToggle
198+
id="enable-noir-mode"
199+
label="> Noir Mode"
200+
checked={isNoir}
201+
onChange={toggleNoir}
202+
/>
203+
190204
</div>
191205
{/* Sidebar Stuff */}
192206
<h1 className="text-3xl font-arvo font-normal mb-4 text-app">

0 commit comments

Comments
 (0)