feat: Centralize theme management with ThemeContext (#6137)
This commit is contained in:
Andrew Harvard
@@ -1,6 +1,7 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React from 'react';
|
||||
import { Moon, Sliders, Sun } from 'lucide-react';
|
||||
import { Button } from '../ui/button';
|
||||
import { useTheme } from '../../contexts/ThemeContext';
|
||||
|
||||
interface ThemeSelectorProps {
|
||||
className?: string;
|
||||
@@ -8,98 +9,12 @@ interface ThemeSelectorProps {
|
||||
horizontal?: boolean;
|
||||
}
|
||||
|
||||
const getIsDarkMode = (mode: 'light' | 'dark' | 'system'): boolean => {
|
||||
if (mode === 'system') {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
}
|
||||
return mode === 'dark';
|
||||
};
|
||||
|
||||
const getThemeMode = (): 'light' | 'dark' | 'system' => {
|
||||
const savedUseSystemTheme = localStorage.getItem('use_system_theme');
|
||||
if (savedUseSystemTheme === 'true') {
|
||||
return 'system';
|
||||
}
|
||||
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
if (savedTheme) {
|
||||
return savedTheme === 'dark' ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
return getIsDarkMode('system') ? 'dark' : 'light';
|
||||
};
|
||||
|
||||
const setThemeModeStorage = (mode: 'light' | 'dark' | 'system') => {
|
||||
if (mode === 'system') {
|
||||
localStorage.setItem('use_system_theme', 'true');
|
||||
} else {
|
||||
localStorage.setItem('use_system_theme', 'false');
|
||||
localStorage.setItem('theme', mode);
|
||||
}
|
||||
|
||||
const themeData = {
|
||||
mode,
|
||||
useSystemTheme: mode === 'system',
|
||||
theme: mode === 'system' ? '' : mode,
|
||||
};
|
||||
|
||||
window.electron?.broadcastThemeChange(themeData);
|
||||
};
|
||||
|
||||
const ThemeSelector: React.FC<ThemeSelectorProps> = ({
|
||||
className = '',
|
||||
hideTitle = false,
|
||||
horizontal = false,
|
||||
}) => {
|
||||
const [themeMode, setThemeMode] = useState<'light' | 'dark' | 'system'>(getThemeMode);
|
||||
const [isDarkMode, setDarkMode] = useState(() => getIsDarkMode(getThemeMode()));
|
||||
|
||||
useEffect(() => {
|
||||
const handleStorageChange = (e: { key: string | null; newValue: string | null }) => {
|
||||
if (e.key === 'use_system_theme' || e.key === 'theme') {
|
||||
const newThemeMode = getThemeMode();
|
||||
setThemeMode(newThemeMode);
|
||||
setDarkMode(getIsDarkMode(newThemeMode));
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('storage', handleStorageChange);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('storage', handleStorageChange);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
|
||||
const handleThemeChange = (e: { matches: boolean }) => {
|
||||
if (themeMode === 'system') {
|
||||
setDarkMode(e.matches);
|
||||
}
|
||||
};
|
||||
|
||||
mediaQuery.addEventListener('change', handleThemeChange);
|
||||
|
||||
setThemeModeStorage(themeMode);
|
||||
setDarkMode(getIsDarkMode(themeMode));
|
||||
|
||||
return () => mediaQuery.removeEventListener('change', handleThemeChange);
|
||||
}, [themeMode]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isDarkMode) {
|
||||
document.documentElement.classList.add('dark');
|
||||
document.documentElement.classList.remove('light');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
document.documentElement.classList.add('light');
|
||||
}
|
||||
}, [isDarkMode]);
|
||||
|
||||
const handleThemeChange = (newTheme: 'light' | 'dark' | 'system') => {
|
||||
setThemeMode(newTheme);
|
||||
};
|
||||
const { userThemePreference, setUserThemePreference } = useTheme();
|
||||
|
||||
return (
|
||||
<div className={`${!horizontal ? 'px-1 py-2 space-y-2' : ''} ${className}`}>
|
||||
@@ -109,9 +24,9 @@ const ThemeSelector: React.FC<ThemeSelectorProps> = ({
|
||||
>
|
||||
<Button
|
||||
data-testid="light-mode-button"
|
||||
onClick={() => handleThemeChange('light')}
|
||||
onClick={() => setUserThemePreference('light')}
|
||||
className={`flex items-center justify-center gap-1 p-2 rounded-md border transition-colors text-xs ${
|
||||
themeMode === 'light'
|
||||
userThemePreference === 'light'
|
||||
? 'bg-background-accent text-text-on-accent border-border-accent hover:!bg-background-accent hover:!text-text-on-accent'
|
||||
: 'border-border-default hover:!bg-background-muted text-text-muted hover:text-text-default'
|
||||
}`}
|
||||
@@ -124,9 +39,9 @@ const ThemeSelector: React.FC<ThemeSelectorProps> = ({
|
||||
|
||||
<Button
|
||||
data-testid="dark-mode-button"
|
||||
onClick={() => handleThemeChange('dark')}
|
||||
onClick={() => setUserThemePreference('dark')}
|
||||
className={`flex items-center justify-center gap-1 p-2 rounded-md border transition-colors text-xs ${
|
||||
themeMode === 'dark'
|
||||
userThemePreference === 'dark'
|
||||
? 'bg-background-accent text-text-on-accent border-border-accent hover:!bg-background-accent hover:!text-text-on-accent'
|
||||
: 'border-border-default hover:!bg-background-muted text-text-muted hover:text-text-default'
|
||||
}`}
|
||||
@@ -139,9 +54,9 @@ const ThemeSelector: React.FC<ThemeSelectorProps> = ({
|
||||
|
||||
<Button
|
||||
data-testid="system-mode-button"
|
||||
onClick={() => handleThemeChange('system')}
|
||||
onClick={() => setUserThemePreference('system')}
|
||||
className={`flex items-center justify-center gap-1 p-2 rounded-md border transition-colors text-xs ${
|
||||
themeMode === 'system'
|
||||
userThemePreference === 'system'
|
||||
? 'bg-background-accent text-text-on-accent border-border-accent hover:!bg-background-accent hover:!text-text-on-accent'
|
||||
: 'border-border-default hover:!bg-background-muted text-text-muted hover:text-text-default'
|
||||
}`}
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
import { useState, useEffect } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { EmbeddedResource } from '../api';
|
||||
import { useTheme } from '../contexts/ThemeContext';
|
||||
|
||||
interface MCPUIResourceRendererProps {
|
||||
content: EmbeddedResource & { type: 'resource' };
|
||||
@@ -91,13 +92,10 @@ export default function MCPUIResourceRenderer({
|
||||
content,
|
||||
appendPromptToChat,
|
||||
}: MCPUIResourceRendererProps) {
|
||||
const [currentThemeValue, setCurrentThemeValue] = useState<string>('light');
|
||||
const { resolvedTheme } = useTheme();
|
||||
const [proxyUrl, setProxyUrl] = useState<string | undefined>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
const theme = localStorage.getItem('theme') || 'light';
|
||||
setCurrentThemeValue(theme);
|
||||
|
||||
const fetchProxyUrl = async () => {
|
||||
try {
|
||||
const gooseApiHost = await window.electron.getGoosedHostPort();
|
||||
@@ -124,7 +122,7 @@ export default function MCPUIResourceRenderer({
|
||||
): Promise<UIActionHandlerResult> => {
|
||||
const { toolName, params } = actionEvent.payload;
|
||||
toast.info(<ToastComponent messageType="tool" message={toolName} isImplemented={false} />, {
|
||||
theme: currentThemeValue,
|
||||
theme: resolvedTheme,
|
||||
});
|
||||
return {
|
||||
status: 'error' as const,
|
||||
@@ -232,7 +230,7 @@ export default function MCPUIResourceRenderer({
|
||||
const { message } = actionEvent.payload;
|
||||
|
||||
toast.info(<ToastComponent messageType="notify" message={message} isImplemented={true} />, {
|
||||
theme: currentThemeValue,
|
||||
theme: resolvedTheme,
|
||||
});
|
||||
return {
|
||||
status: 'success' as const,
|
||||
@@ -254,7 +252,7 @@ export default function MCPUIResourceRenderer({
|
||||
isImplemented={false}
|
||||
/>,
|
||||
{
|
||||
theme: currentThemeValue,
|
||||
theme: resolvedTheme,
|
||||
}
|
||||
);
|
||||
return {
|
||||
@@ -334,7 +332,7 @@ export default function MCPUIResourceRenderer({
|
||||
// MCP-UIs might find stuff like host and theme for conditional rendering
|
||||
// usage of this is experimental, leaving in place for demos
|
||||
host: 'goose',
|
||||
theme: currentThemeValue,
|
||||
theme: resolvedTheme,
|
||||
},
|
||||
proxy: proxyUrl, // refer to https://mcpui.dev/guide/client/using-a-proxy
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user