Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ThemeProvider): create own style tag containing css variables #121

Merged
merged 5 commits into from
Sep 16, 2019
Merged

fix(ThemeProvider): create own style tag containing css variables #121

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dc63f6b
fix(ThemeProvider): wrapping injectThemeVariables in requestAnimation…
vbersch Sep 14, 2019
ddb6ef2
fix(ThemeProvider): create own style tag containing css variables to …
vbersch Sep 16, 2019
bc5f015
Merge branch 'master' into fix/css-vars
vbersch Sep 16, 2019
2a2e086
WIP: Pull request comments
vbersch Sep 16, 2019
268b28c
WIP: PR comments
vbersch Sep 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 26 additions & 14 deletions packages/main/src/components/ThemeProvider/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,21 +37,33 @@ const ThemeProvider: FC<ThemeProviderProps> = (props) => {

useEffect(() => {
if (!noInjectThemeProperties) {
boot().then(async () => {
// TODO will rename to 'data-ui5-theme-properties' after next UI5 Web Components Release
const styleElement = document.head.querySelector('style[data-ui5-webcomponents-theme-properties]');
boot().then(() => {
// only inject parameters for sap_fiori_3 and if they haven't been injected before
if (theme === Themes.sap_fiori_3 && !styleElement.textContent) {
requestAnimationFrame(() => {
injectThemeProperties(fiori3Theme);
const CSSVarsPonyfill = window['CSSVarsPonyfill'];
if (Device.browser.msie && CSSVarsPonyfill) {
setTimeout(() => {
CSSVarsPonyfill.resetCssVars();
CSSVarsPonyfill.cssVars();
}, 0);
}
});
let styleElement = document.head.querySelector('style[data-ui5-webcomponents-react-theme-properties]');
if (theme === Themes.sap_fiori_3) {
if (!styleElement) {
styleElement = document.createElement('style');
// @ts-ignore
styleElement.type = 'text/css';
styleElement.setAttribute('data-ui5-webcomponents-react-theme-properties', '');
document.head.appendChild(styleElement);
}

if (!styleElement.textContent) {
styleElement.textContent = fiori3Theme;
}

const CSSVarsPonyfill = window['CSSVarsPonyfill'];
if (Device.browser.msie && CSSVarsPonyfill) {
setTimeout(() => {
CSSVarsPonyfill.resetCssVars();
CSSVarsPonyfill.cssVars();
}, 0);
}
} else {
if (styleElement) {
styleElement.textContent = '';
}
}
});
}
Expand Down