mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-28 19:19:06 +03:00
Code Issues Projects Releases Packages Wiki Activity

Map most of the existing less vars to the new tokens

Browse source
This commit is contained in:
Muaz Ahmad 2024-06-11 15:58:50 +05:00
parent 53c16f739d
commit 8b4a305317
1 changed files with 28 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
web/components/theme/AntdTheme.tsx
View file

@ -12,9 +12,33 @@ export const AntdTheme: FC<AntdThemeProps> = ({ children }) => {
const [customToken, setCustomToken] = useState({});
const updateToken = () => {
// for global properties see https://ant.design/docs/react/customize-theme#theme
// for per-component see https://ant.design/docs/react/migrate-less-variables
setCustomToken({
colorLink: readCSSVar('--link-color'),
colorLinkHover: readCSSVar('--link-hover-color'),
Modal: {
headerBg: readCSSVar('--modal-header-bg'),
contentBg: readCSSVar('--modal-content-bg'),
},
Alert: {
colorErrorBg: readCSSVar('--alert-error-bg-color'),
colorErrorBorder: readCSSVar('--alert-error-border-color'),
},
colorBgElevated: readCSSVar('--popover-background'),
Tag: {
defaultBg: readCSSVar('--tag-default-color'),
},
borderRadius: parseInt(readCSSVar('--border-radius-base'), 10),
// background-color-light needs mapping
colorIcon: readCSSVar('--modal-close-color'),
colorPrimary: readCSSVar('--primary-color'),
linkColor: readCSSVar('--link-color'),
colorPrimaryHover: readCSSVar('--primary-color-hover'),
colorPrimaryActive: readCSSVar('--primary-color-active'),
// primary-$n needs mapping
colorBgBase: readCSSVar('--component-background'),
// body-background needs mapping
});
};
@ -33,6 +57,9 @@ export const AntdTheme: FC<AntdThemeProps> = ({ children }) => {
const observeCustomThemeChanges = () => {
const customStyles = document.getElementById('custom-color-styles');
if (customStyles === null) {
return;
}
console.log(customStyles.textContent);
const mutObserver = new MutationObserver(updateTokenOnMutation);
// check if color styles have been updated by ./Theme