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.

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

[frontend] Keep html body attribute 'data-theme' in sync when changing theme (#4693) #4906

Merged
merged 3 commits into from Nov 17, 2023

Conversation

lndrtrbn
Copy link
Member

@lndrtrbn lndrtrbn commented Nov 15, 2023

Proposed changes

  • Update the attribute 'data-theme' of the body when we change mode (light, dark)
  • Move Index.jsx in TypeScript

How this fix the initial issue? CKEditor uses this body attribute to determine which style to apply.

Related issues

Checklist

  • I consider the submitted work as finished
  • I tested the code for its functionality
  • I wrote test cases for the relevant uses case
  • I added/update the relevant documentation (either on github or on notion)
  • Where necessary I refactored code to improve the overall quality

Comment on lines +62 to +75
// Change the theme body attribute when the mode changes in
// the palette because some components like CKEditor uses this
// body attribute to display correct styles.
useEffect(() => {
const body = document.querySelector('body');
if (body) {
const bodyMode = body.getAttribute('data-theme');
const themeMode = `${theme.palette.mode}`;
if (bodyMode !== themeMode) {
body.setAttribute('data-theme', themeMode);
}
}
}, [theme]);

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code about fixing the issue.
The rest is to be able to use TypeScript.

Copy link

codecov bot commented Nov 15, 2023

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (d040085) 87.27% compared to head (c6f228e) 87.27%.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #4906   +/-   ##
=======================================
  Coverage   87.27%   87.27%           
=======================================
  Files           3        3           
  Lines         220      220           
  Branches       55       55           
=======================================
  Hits          192      192           
  Misses         28       28           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@jpkha jpkha self-requested a review November 15, 2023 14:09
@SarahBocognano SarahBocognano added the filigran team use to identify PR from the Filigran team label Nov 16, 2023
@lndrtrbn lndrtrbn merged commit f1951d0 into master Nov 17, 2023
8 checks passed
@SamuelHassine SamuelHassine deleted the issue/4693 branch November 18, 2023 09:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
filigran team use to identify PR from the Filigran team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants