diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index 594a4c4e4946c9ace017ddc10109072147216f19..d26cb5c8991082ffac08da300ff707cef27bd33b 100644 --- a/src/renderer/App.tsx +++ b/src/renderer/App.tsx @@ -8,6 +8,7 @@ import MainAppPanel from './components/MainAppPanel'; import Header from './components/Header'; import customTheme from './lib/theme'; +import secretPurpleTheme from './lib/secretPurpleTheme'; import './styles.css'; import LoginModal from './components/Connect/LoginModal'; @@ -41,6 +42,8 @@ export default function App() { const [logsDrawerOpen, setLogsDrawerOpen] = useState(false); const [logsDrawerHeight, setLogsDrawerHeight] = useState(0); + const [theme, setTheme] = useState(customTheme); + useEffect(() => { async function getSavedExperimentId() { const connectionWithoutDots = connection.replace(/\./g, '-'); @@ -102,8 +105,16 @@ export default function App() { setLogsDrawerHeight(bottom); }, []); + function themeSetter(name: string) { + if (name === 'purple') { + setTheme(secretPurpleTheme); + } else { + setTheme(customTheme); + } + } + return ( - <CssVarsProvider disableTransitionOnChange theme={customTheme}> + <CssVarsProvider disableTransitionOnChange theme={theme}> <CssBaseline /> <Box component="main" @@ -138,6 +149,7 @@ export default function App() { setExperimentId={setExperimentId} logsDrawerOpen={logsDrawerOpen} setLogsDrawerOpen={setLogsDrawerOpen} + themeSetter={themeSetter} /> <Box sx={{ diff --git a/src/renderer/components/Nav/ColorSchemeToggle.tsx b/src/renderer/components/Nav/ColorSchemeToggle.tsx index 7d58dc34ee60e9cc6680b35d8c8b5d2129ff1d63..51f4ad6c8a18a91b5f67653838d8b67a6d1d06ce 100644 --- a/src/renderer/components/Nav/ColorSchemeToggle.tsx +++ b/src/renderer/components/Nav/ColorSchemeToggle.tsx @@ -2,9 +2,11 @@ import { useColorScheme } from '@mui/joy/styles'; import IconButton from '@mui/joy/IconButton'; import { MoonIcon, SunIcon } from 'lucide-react'; import { windowsStore } from 'process'; +import { useState } from 'react'; -export default function ColorSchemeToggle() { +export default function ColorSchemeToggle({ themeSetter }) { const { mode, setMode } = useColorScheme(); + const [count, setCount] = useState(0); window.darkMode.onUpdate((isDarkMode) => { console.log('Dark mode is now', isDarkMode ? 'on' : 'off'); @@ -18,6 +20,10 @@ export default function ColorSchemeToggle() { // const isDarkMode = await window.darkMode.toggle(); // console.log('Dark mode is now', isDarkMode ? 'on' : 'off'); setMode(mode == 'light' ? 'dark' : 'light'); + setCount(count + 1); + if (count > 10 && count % 2 == 0) { + themeSetter('purple'); + } }} > {mode === 'light' ? <SunIcon /> : <MoonIcon />} diff --git a/src/renderer/components/Nav/Sidebar.tsx b/src/renderer/components/Nav/Sidebar.tsx index 7c14a1b7db05215d0df270ea7fcd7d390452b525..7d9c99f40f0cb033bd90d3439ee240f8893fd4be 100644 --- a/src/renderer/components/Nav/Sidebar.tsx +++ b/src/renderer/components/Nav/Sidebar.tsx @@ -42,6 +42,7 @@ export default function Sidebar({ setExperimentId, logsDrawerOpen, setLogsDrawerOpen, + themeSetter, }) { const { models, isError, isLoading } = useModelStatus(); const { outdatedPluginsCount } = usePluginStatus(experimentInfo); @@ -245,7 +246,7 @@ export default function Sidebar({ </ListItem> */} <Divider sx={{ my: 2 }} /> <ButtonGroup sx={{ display: 'flex', justifyContent: 'space-between' }}> - <ColorSchemeToggle /> + <ColorSchemeToggle themeSetter={themeSetter} /> <a href="https://github.com/transformerlab/transformerlab-app/" target="_blank" diff --git a/src/renderer/lib/secretPurpleTheme.ts b/src/renderer/lib/secretPurpleTheme.ts new file mode 100644 index 0000000000000000000000000000000000000000..c27e3739d39f4e6105aa9117df333200dcde7b13 --- /dev/null +++ b/src/renderer/lib/secretPurpleTheme.ts @@ -0,0 +1,88 @@ +import { extendTheme } from '@mui/joy/styles'; + +export default extendTheme({ + fontFamily: { + display: '-apple-system, "system-ui", var(--joy-fontFamily-fallback)', + body: '-apple-system, "system-ui", var(--joy-fontFamily-fallback)', + }, + colorSchemes: { + light: { + palette: { + primary: { + '50': '#ede7f6', + '100': '#d1c4e9', + '200': '#b39ddb', + '300': '#9575cd', + '400': '#7e57c2', + '500': '#673ab7', + '600': '#5e35b1', + '700': '#512da8', + '800': '#4527a0', + '900': '#311b92', + }, + neutral: { + '50': '#EEFAFA', //#e0f2f1', + '100': '#b2dfdb', + '200': '#80cbc4', + '300': '#4db6ac', + '400': '#26a69a', + '500': '#009688', + '600': '#00897b', + '700': '#00796b', + '800': '#00695c', + '900': '#004d40', + }, + danger: { + '50': '#fff7ed', + '100': '#ffedd5', + '200': '#fed7aa', + '300': '#fdba74', + '400': '#fb923c', + '500': '#f97316', + '600': '#ea580c', + '700': '#c2410c', + '800': '#9a3412', + '900': '#7c2d12', + }, + background: { + body: '#0f172a22', + }, + text: { + primary: 'rgb(60, 60, 67)', + }, + }, + }, + dark: { + palette: { + primary: { + '50': '#f8fafc', + '100': '#f1f5f9', + '200': '#e2e8f0', + '300': '#cbd5e1', + '400': '#94a3b8', + '500': '#64748b', + '600': '#475569', + '700': '#334155', + '800': '#1e293b', + '900': '#0f172a', + }, + }, + }, + dark: { + palette: { + primary: { + '50': '#f8fafc', + '100': '#f1f5f9', + '200': '#e2e8f0', + '300': '#cbd5e1', + '400': '#94a3b8', + '500': '#64748b', + '600': '#475569', + '700': '#334155', + '800': '#1e293b', + '900': '#0f172a', + }, + }, + }, + }, +});