mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-09-13 14:22:25 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add option for monochrome mode (#2464)
Some checks failed
Deploy to Netlify (dev) / Deploy to Netlify (push) Has been cancelled
Details

Browse source
This commit is contained in:
Ajay Bura 2025-08-25 18:49:14 +05:30 • committed by GitHub
parent 40d0576b15
commit c1274e851a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 20 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/app/features/settings/general/General.tsx
View file

@ -305,6 +305,7 @@ function PageZoomInput() {
function Appearance() {
const [systemTheme, setSystemTheme] = useSetting(settingsAtom, 'useSystemTheme');
const [monochromeMode, setMonochromeMode] = useSetting(settingsAtom, 'monochromeMode');
const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
return (
@ -332,6 +333,13 @@ function Appearance() {
/>
</SequenceCard>
<SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
<SettingTile
title="Monochrome Mode"
after={<Switch variant="Primary" value={monochromeMode} onChange={setMonochromeMode} />}
/>
</SequenceCard>
<SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
<SettingTile
title="Twitter Emoji"

11
src/app/pages/ThemeManager.tsx
View file

@ -8,6 +8,8 @@ import {
useActiveTheme,
useSystemThemeKind,
} from '../hooks/useTheme';
import { useSetting } from '../state/hooks/settings';
import { settingsAtom } from '../state/settings';
export function UnAuthRouteThemeManager() {
const systemThemeKind = useSystemThemeKind();
@ -28,13 +30,20 @@ export function UnAuthRouteThemeManager() {
export function AuthRouteThemeManager({ children }: { children: ReactNode }) {
const activeTheme = useActiveTheme();
const [monochromeMode] = useSetting(settingsAtom, 'monochromeMode');
useEffect(() => {
document.body.className = '';
document.body.classList.add(configClass, varsClass);
document.body.classList.add(...activeTheme.classNames);
}, [activeTheme]);
if (monochromeMode) {
document.body.style.filter = 'grayscale(1)';
} else {
document.body.style.filter = '';
}
}, [activeTheme, monochromeMode]);
return <ThemeContextProvider value={activeTheme}>{children}</ThemeContextProvider>;
}

2
src/app/state/settings.ts
View file

@ -14,6 +14,7 @@ export interface Settings {
useSystemTheme: boolean;
lightThemeId?: string;
darkThemeId?: string;
monochromeMode?: boolean;
isMarkdown: boolean;
editorToolbar: boolean;
twitterEmoji: boolean;
@ -47,6 +48,7 @@ const defaultSettings: Settings = {
useSystemTheme: true,
lightThemeId: undefined,
darkThemeId: undefined,
monochromeMode: false,
isMarkdown: true,
editorToolbar: false,
twitterEmoji: false,