Skip to content

Commit e9aad60

Browse files
fezcodefezcode
committed
feat: more styles.
1 parent 1e789cb commit e9aad60

File tree

6 files changed

+195
-3
lines changed

6 files changed

+195
-3
lines changed

‎src/components/CommandPalette.js‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,10 @@ const CommandPalette = ({isOpen, setIsOpen, openGenericModal, toggleDigitalRain}
5858
isTerminal, toggleTerminal,
5959
isBlueprint, toggleBlueprint,
6060
isSepia, toggleSepia,
61-
isVaporwave, toggleVaporwave
61+
isVaporwave, toggleVaporwave,
62+
isCyberpunk, toggleCyberpunk,
63+
isGameboy, toggleGameboy,
64+
isComic, toggleComic
6265
} = useVisualSettings();
6366

6467
const filteredItems = filterItems(items, searchTerm);
@@ -241,6 +244,30 @@ const CommandPalette = ({isOpen, setIsOpen, openGenericModal, toggleDigitalRain}
241244
duration: 2000
242245
});
243246
break;
247+
case 'toggleCyberpunkMode':
248+
toggleCyberpunk();
249+
addToast({
250+
title: !isCyberpunk ? 'Cyberpunk Mode On' : 'Cyberpunk Mode Off',
251+
message: !isCyberpunk ? 'Wake up, Samurai.' : 'System normal.',
252+
duration: 2000
253+
});
254+
break;
255+
case 'toggleGameboyMode':
256+
toggleGameboy();
257+
addToast({
258+
title: !isGameboy ? 'Game Boy Mode On' : 'Game Boy Mode Off',
259+
message: !isGameboy ? 'Press Start to play.' : 'Game Over.',
260+
duration: 2000
261+
});
262+
break;
263+
case 'toggleComicMode':
264+
toggleComic();
265+
addToast({
266+
title: !isComic ? 'Comic Mode On' : 'Comic Mode Off',
267+
message: !isComic ? 'BAM! POW! ZAP!' : 'Story arc ended.',
268+
duration: 2000
269+
});
270+
break;
244271
case 'showTime': {
245272
openGenericModal('Current Time', <LiveClock/>);
246273
break;

‎src/context/VisualSettingsContext.js‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ export const VisualSettingsProvider = ({children}) => {
1717
const [isBlueprint, setIsBlueprint] = usePersistentState('is-blueprint', false);
1818
const [isSepia, setIsSepia] = usePersistentState('is-sepia', false);
1919
const [isVaporwave, setIsVaporwave] = usePersistentState('is-vaporwave', false);
20+
const [isCyberpunk, setIsCyberpunk] = usePersistentState('is-cyberpunk', false);
21+
const [isGameboy, setIsGameboy] = usePersistentState('is-gameboy', false);
22+
const [isComic, setIsComic] = usePersistentState('is-comic', false);
2023

2124
useEffect(() => {
2225
if (isInverted) {
@@ -90,6 +93,30 @@ export const VisualSettingsProvider = ({children}) => {
9093
}
9194
}, [isVaporwave]);
9295

96+
useEffect(() => {
97+
if (isCyberpunk) {
98+
document.body.classList.add('cyberpunk-mode');
99+
} else {
100+
document.body.classList.remove('cyberpunk-mode');
101+
}
102+
}, [isCyberpunk]);
103+
104+
useEffect(() => {
105+
if (isGameboy) {
106+
document.body.classList.add('gameboy-mode');
107+
} else {
108+
document.body.classList.remove('gameboy-mode');
109+
}
110+
}, [isGameboy]);
111+
112+
useEffect(() => {
113+
if (isComic) {
114+
document.body.classList.add('comic-mode');
115+
} else {
116+
document.body.classList.remove('comic-mode');
117+
}
118+
}, [isComic]);
119+
93120
const toggleInvert = () => setIsInverted(prev => !prev);
94121
const toggleRetro = () => setIsRetro(prev => !prev);
95122
const toggleParty = () => setIsParty(prev => !prev);
@@ -99,6 +126,9 @@ export const VisualSettingsProvider = ({children}) => {
99126
const toggleBlueprint = () => setIsBlueprint(prev => !prev);
100127
const toggleSepia = () => setIsSepia(prev => !prev);
101128
const toggleVaporwave = () => setIsVaporwave(prev => !prev);
129+
const toggleCyberpunk = () => setIsCyberpunk(prev => !prev);
130+
const toggleGameboy = () => setIsGameboy(prev => !prev);
131+
const toggleComic = () => setIsComic(prev => !prev);
102132

103133
return (
104134
<VisualSettingsContext.Provider value={{
@@ -110,7 +140,10 @@ export const VisualSettingsProvider = ({children}) => {
110140
isTerminal, toggleTerminal,
111141
isBlueprint, toggleBlueprint,
112142
isSepia, toggleSepia,
113-
isVaporwave, toggleVaporwave
143+
isVaporwave, toggleVaporwave,
144+
isCyberpunk, toggleCyberpunk,
145+
isGameboy, toggleGameboy,
146+
isComic, toggleComic
114147
}}>
115148
{children}
116149
</VisualSettingsContext.Provider>);

‎src/hooks/useSearchableData.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,9 @@ const useSearchableData = () => {
113113
{ title: 'Toggle Blueprint Mode', type: 'command', commandId: 'toggleBlueprintMode' },
114114
{ title: 'Toggle Sepia Mode', type: 'command', commandId: 'toggleSepiaMode' },
115115
{ title: 'Toggle Vaporwave Mode', type: 'command', commandId: 'toggleVaporwaveMode' },
116+
{ title: 'Toggle Cyberpunk Mode', type: 'command', commandId: 'toggleCyberpunkMode' },
117+
{ title: 'Toggle Game Boy Mode', type: 'command', commandId: 'toggleGameboyMode' },
118+
{ title: 'Toggle Comic Book Mode', type: 'command', commandId: 'toggleComicMode' },
116119
];
117120

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

‎src/index.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -395,4 +395,98 @@ body.vaporwave-mode::after {
395395
);
396396
pointer-events: none;
397397
mix-blend-mode: overlay;
398+
}
399+
400+
/* Cyberpunk Mode */
401+
body.cyberpunk-mode {
402+
background-color: #050505 !important;
403+
color: #fcee0a !important; /* Cyber Yellow */
404+
font-family: 'Courier New', Courier, monospace !important;
405+
}
406+
407+
body.cyberpunk-mode * {
408+
border-color: #00ff9f !important; /* Cyber Green */
409+
box-shadow: 0 0 2px rgba(0, 255, 159, 0.5);
410+
}
411+
412+
body.cyberpunk-mode a {
413+
color: #00ff9f !important;
414+
text-decoration: none;
415+
border-bottom: 2px solid #00ff9f;
416+
}
417+
418+
body.cyberpunk-mode a:hover {
419+
background-color: #00ff9f;
420+
color: #000 !important;
421+
}
422+
423+
body.cyberpunk-mode img {
424+
filter: grayscale(100%) contrast(1.5) brightness(0.8);
425+
border: 2px solid #fcee0a !important;
426+
}
427+
428+
/* Game Boy Mode */
429+
body.gameboy-mode {
430+
background-color: #8bac0f !important; /* Lightest Green */
431+
color: #0f380f !important; /* Darkest Green */
432+
font-family: 'Courier New', Courier, monospace !important;
433+
}
434+
435+
body.gameboy-mode * {
436+
border-color: #306230 !important; /* Dark Green */
437+
box-shadow: none !important;
438+
}
439+
440+
body.gameboy-mode a {
441+
color: #306230 !important;
442+
text-decoration: underline;
443+
}
444+
445+
body.gameboy-mode img {
446+
filter: grayscale(100%) contrast(1.5) brightness(0.9) sepia(1) hue-rotate(50deg) saturate(5);
447+
mix-blend-mode: multiply;
448+
image-rendering: pixelated;
449+
}
450+
451+
body.gameboy-mode::after {
452+
content: '';
453+
position: fixed;
454+
top: 0;
455+
left: 0;
456+
right: 0;
457+
bottom: 0;
458+
z-index: 9999;
459+
background: #8bac0f;
460+
mix-blend-mode: overlay;
461+
pointer-events: none;
462+
opacity: 0.2;
463+
}
464+
465+
466+
467+
468+
469+
/* Comic Book Mode */
470+
body.comic-mode {
471+
background-color: #ffffff !important;
472+
background-image: radial-gradient(#e5e5f7 2px, transparent 2px);
473+
background-size: 10px 10px; /* Halftone dots */
474+
color: #000000 !important;
475+
font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif !important;
476+
}
477+
478+
body.comic-mode * {
479+
border: 2px solid #000000 !important;
480+
box-shadow: 4px 4px 0px #000000 !important;
481+
}
482+
483+
body.comic-mode a {
484+
color: #ff0000 !important;
485+
font-weight: bold;
486+
text-decoration: underline;
487+
text-decoration-thickness: 2px;
488+
}
489+
490+
body.comic-mode img {
491+
filter: contrast(1.5) saturate(1.5);
398492
}

‎src/pages/CommandsPage.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@ const commandsData = [
5656
{ title: "Toggle Blueprint Mode", description: "Switch to a blueprint schematic look. (Easter Egg)", color: "blue" },
5757
{ title: "Toggle Sepia Mode", description: "Switch to an old-timey sepia tone. (Easter Egg)", color: "orange" },
5858
{ title: "Toggle Vaporwave Mode", description: "Switch to a nostalgic vaporwave aesthetic. (Easter Egg)", color: "pink" },
59+
{ title: "Toggle Cyberpunk Mode", description: "Switch to a high-tech, low-life dark neon look. (Easter Egg)", color: "yellow" },
60+
{ title: "Toggle Game Boy Mode", description: "Switch to a 4-color retro handheld look. (Easter Egg)", color: "lime" },
61+
{ title: "Toggle Comic Book Mode", description: "Switch to a vibrant pop-art comic style. (Easter Egg)", color: "red" },
5962
]
6063
},
6164
{

‎src/pages/SettingsPage.js‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,11 @@ const SettingsPage = () => {
4141
isNoir, toggleNoir,
4242
isTerminal, toggleTerminal,
4343
isBlueprint, toggleBlueprint,
44-
isSepia, toggleSepia
44+
isSepia, toggleSepia,
45+
isVaporwave, toggleVaporwave,
46+
isCyberpunk, toggleCyberpunk,
47+
isGameboy, toggleGameboy,
48+
isComic, toggleComic
4549
} = useVisualSettings();
4650

4751
const {addToast} = useToast();
@@ -225,6 +229,34 @@ const SettingsPage = () => {
225229
checked={isSepia}
226230
onChange={toggleSepia}
227231
/>
232+
<div className="mb-4"></div>
233+
<CustomToggle
234+
id="enable-vaporwave-mode"
235+
label="> Vaporwave Mode"
236+
checked={isVaporwave}
237+
onChange={toggleVaporwave}
238+
/>
239+
<div className="mb-4"></div>
240+
<CustomToggle
241+
id="enable-cyberpunk-mode"
242+
label="> Cyberpunk Mode"
243+
checked={isCyberpunk}
244+
onChange={toggleCyberpunk}
245+
/>
246+
<div className="mb-4"></div>
247+
<CustomToggle
248+
id="enable-gameboy-mode"
249+
label="> Game Boy Mode"
250+
checked={isGameboy}
251+
onChange={toggleGameboy}
252+
/>
253+
<div className="mb-4"></div>
254+
<CustomToggle
255+
id="enable-comic-mode"
256+
label="> Comic Book Mode"
257+
checked={isComic}
258+
onChange={toggleComic}
259+
/>
228260
</div>
229261
{/* Sidebar Stuff */}
230262
<h1 className="text-3xl font-arvo font-normal mb-4 text-app">

0 commit comments

Comments
 (0)