Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

feat(ui): add global primary color settings (#871)

Browse source 
add global primary color settings
This commit is contained in:
simeng-li 2022-05-18 15:10:14 +08:00 committed by GitHub
parent 9c1e9ef7ed
commit 0f2827ccb8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 27 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/ui/src/components/AppContent/index.module.scss
View file

@ -2,6 +2,10 @@
@use '@/scss/mobile' as mobile;
@use '@/scss/desktop' as desktop;
:root {
--light-primary-color: #5d34f2;
--dark-primary-color: #7958ff;
}
.content {
@include _.flex_column;

20
packages/ui/src/components/AppContent/index.tsx
View file

@ -19,7 +19,8 @@ export type Props = {
const AppContent = ({ children, mode, platform: platformOverwrite }: Props) => {
const theme = useTheme(mode);
const { toast, loading, platform, setPlatform, setToast } = useContext(PageContext);
const { toast, loading, platform, setPlatform, setToast, experienceSettings } =
useContext(PageContext);
const debouncedLoading = useDebouncedLoader(loading);
// Prevent internal eventListener rebind
@ -27,17 +28,34 @@ const AppContent = ({ children, mode, platform: platformOverwrite }: Props) => {
setToast('');
}, [setToast]);
// Set Primary ColorTheme
useEffect(() => {
if (!experienceSettings) {
return;
}
const {
branding: { primaryColor, darkPrimaryColor },
} = experienceSettings;
document.documentElement.style.setProperty('--light-primary-color', primaryColor);
document.documentElement.style.setProperty('--dark-primary-color', darkPrimaryColor);
}, [experienceSettings]);
// Set Platform
useEffect(() => {
if (platformOverwrite) {
setPlatform(platformOverwrite);
}
}, [platformOverwrite, setPlatform]);
// Set Theme Mode
useEffect(() => {
document.body.classList.remove(conditionalString(styles.light), conditionalString(styles.dark));
document.body.classList.add(conditionalString(styles[theme]));
}, [theme]);
// Apply Platform Style
useEffect(() => {
document.body.classList.remove('desktop', 'mobile');
document.body.classList.add(platform === 'mobile' ? 'mobile' : 'desktop');

4
packages/ui/src/scss/_desktop.scss
View file

@ -17,7 +17,7 @@ $font-family: -apple-system,
--color-border: #c4c7c7;
--color-caption: #747778;
--color-icon: #747778;
--color-primary: #5d34f2;
--color-primary: var(--light-primary-color);
--color-focused: rgba(25, 28, 29, 16%);
--color-focused-variant: rgba(93, 52, 242, 16%);
--color-pressed: rgba(25, 28, 29, 12%);
@ -50,7 +50,7 @@ $font-family: -apple-system,
--color-border: #5c5f60;
--color-caption: #a9acac;
--color-icon: #a9acac;
--color-primary: #7958ff;
--color-primary: var(--dark-primary-color);
--color-focused: rgba(247, 248, 248, 16%);
--color-focused-variant: rgba(202, 190, 255, 16%);
--color-hover-variant: rgba(202, 190, 255, 8%);

4
packages/ui/src/scss/_mobile.scss
View file

@ -17,7 +17,7 @@ $font-family: -apple-system,
--color-divider: #e0e3e3;
--color-text-disabled: #c4c7c7;
--color-border: #c4c7c7;
--color-primary: #5d34f2;
--color-primary: var(--light-primary-color);
--color-layer: #eff1f1;
--color-error: #ba1b1b;
--color-toast: rgba(25, 28, 29, 80%);
@ -35,7 +35,7 @@ $font-family: -apple-system,
--color-divider: #444748;
--color-text-disabled: #5c5f60;
--color-border: #5c5f60;
--color-primary: #7958ff;
--color-primary: var(--dark-primary-color);
--color-layer: linear-gradient(0deg, rgba(202, 190, 255, 14%), rgba(202, 190, 255, 14%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d;
--color-error: #dd3730;
--color-toast: rgba(247, 248, 248, 80%);