Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-04 01:28:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🅰️ feat: Dynamic Font Size (#3568)

Browse source 
* wip: general setup

* added: translations for font-size

* fix: prompts related linter errors and add theming

* wip: font size selector

* refactor: Update FontSizeSelector options display property

* refactor: adjust Intersection Observer threshold and debounce rate

* feat: Update selectedPrompt type in PromptForm to be optional

* feat: dynamic font size

* refactor: Update message font size in navigation bar

* refactor: Update code analyze block styling

* refactor: ProgressText dynamic font size

* refactor: move FontSizeSelector component to Chat from General settings

* fix: HoverButtons styling for better visibility

* refactor: Update HoverButtons styling for better visibility

---------

Co-authored-by: kraken <solodarken@gmail.com>
This commit is contained in:
Danny Avila 2024-08-07 14:23:33 -04:00 • committed by GitHub
parent b390ba781f
commit 2bb0842650
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
44 changed files with 340 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

1
client/src/utils/index.ts
View file

@ -2,6 +2,7 @@ export * from './map';
export * from './json';
export * from './files';
export * from './latex';
export * from './theme';
export * from './convos';
export * from './presets';
export * from './prompts';

38
client/src/utils/theme.ts Normal file
View file

@ -0,0 +1,38 @@
export const applyFontSize = (val: string) => {
const root = document.documentElement;
const size = val.split('-')[1]; // This will be 'xs', 'sm', 'base', 'lg', or 'xl'
switch (size) {
case 'xs':
root.style.setProperty('--markdown-font-size', '0.75rem'); // 12px
break;
case 'sm':
root.style.setProperty('--markdown-font-size', '0.875rem'); // 14px
break;
case 'base':
root.style.setProperty('--markdown-font-size', '1rem'); // 16px
break;
case 'lg':
root.style.setProperty('--markdown-font-size', '1.125rem'); // 18px
break;
case 'xl':
root.style.setProperty('--markdown-font-size', '1.25rem'); // 20px
break;
}
};
export const getInitialTheme = () => {
if (typeof window !== 'undefined' && window.localStorage) {
const storedPrefs = window.localStorage.getItem('color-theme');
if (typeof storedPrefs === 'string') {
return storedPrefs;
}
const userMedia = window.matchMedia('(prefers-color-scheme: dark)');
if (userMedia.matches) {
return 'dark';
}
}
return 'light'; // light theme as the default;
};