LotusGuild/cinny
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add TDS light mode: LotusTerminalLightTheme, light CSS vars, no CRT effects

Browse Source
This commit is contained in:
root
2026-05-14 09:25:39 -04:00
parent dc26e15df1
commit ad82843ee5
4 changed files with 328 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/hooks/useTheme.ts
+6 -1
View File
@@ -1,7 +1,7 @@
import { lightTheme } from 'folds';
import { createContext, useContext, useEffect, useMemo, useState } from 'react';
import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
import { butterTheme, darkTheme, lotusTerminalTheme, silverTheme } from '../../colors.css';
import { butterTheme, darkTheme, lotusTerminalLightTheme, lotusTerminalTheme, silverTheme } from '../../colors.css';
import { settingsAtom } from '../state/settings';
import { useSetting } from '../state/hooks/settings';
@@ -42,6 +42,11 @@ export const LotusTerminalTheme: Theme = {
kind: ThemeKind.Dark,
classNames: ['lotus-terminal-theme', lotusTerminalTheme, onDarkFontWeight, 'prism-dark'],
};
export const LotusTerminalLightTheme: Theme = {
id: 'lotus-terminal-light-theme',
kind: ThemeKind.Light,
classNames: ['lotus-terminal-light-theme', lotusTerminalLightTheme, onLightFontWeight, 'prism-light'],
};
export const useThemes = (): Theme[] => {
const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme], []);
src/app/pages/ThemeManager.tsx
+10 -5
View File
@@ -3,6 +3,7 @@ import { configClass, varsClass } from 'folds';
import {
DarkTheme,
LightTheme,
LotusTerminalLightTheme,
LotusTerminalTheme,
ThemeContextProvider,
ThemeKind,
@@ -22,8 +23,9 @@ export function UnAuthRouteThemeManager() {
document.body.className = '';
document.body.classList.add(configClass, varsClass);
if (lotusTerminal) {
document.documentElement.setAttribute('data-theme', 'dark');
document.body.classList.add(...LotusTerminalTheme.classNames);
const isLight = systemThemeKind === ThemeKind.Light;
document.documentElement.setAttribute('data-theme', isLight ? 'light' : 'dark');
document.body.classList.add(...(isLight ? LotusTerminalLightTheme : LotusTerminalTheme).classNames);
document.body.classList.add(lotusTerminalBodyClass);
} else {
document.documentElement.removeAttribute('data-theme');
@@ -43,14 +45,17 @@ export function AuthRouteThemeManager({ children }: { children: ReactNode }) {
const [monochromeMode] = useSetting(settingsAtom, 'monochromeMode');
const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
const effectiveTheme = lotusTerminal ? LotusTerminalTheme : activeTheme;
const terminalIsLight = lotusTerminal && activeTheme.kind === ThemeKind.Light;
const effectiveTheme = lotusTerminal
? (terminalIsLight ? LotusTerminalLightTheme : LotusTerminalTheme)
: activeTheme;
useEffect(() => {
document.body.className = '';
document.body.classList.add(configClass, varsClass);
document.body.classList.add(...effectiveTheme.classNames);
if (lotusTerminal) {
document.documentElement.setAttribute('data-theme', 'dark');
document.documentElement.setAttribute('data-theme', terminalIsLight ? 'light' : 'dark');
document.body.classList.add(lotusTerminalBodyClass);
runLotusBootSequence();
} else {
@@ -61,7 +66,7 @@ export function AuthRouteThemeManager({ children }: { children: ReactNode }) {
} else {
document.body.style.filter = '';
}
}, [effectiveTheme, monochromeMode, lotusTerminal]);
}, [effectiveTheme, monochromeMode, lotusTerminal, terminalIsLight]);
return <ThemeContextProvider value={effectiveTheme}>{children}</ThemeContextProvider>;
}