Docusaurus theme updates for release #8814
Conversation
3e5d133 to
fe1f7ec
Compare
6eb6ff5 to
8c28777
Compare
fed59ab to
ff9ed67
Compare
|
ℹ️ The commit links in the description would need an update, they change when force pushing 😅 
|
💭 Providing steps would make QA more clear and streamlined here. What's required to configure the theme setup? What other dependencies would need to be installed? etc. |
packages/docusaurus-theme/src/theme/Navbar/MobileSidebar/Header/index.tsx
Show resolved
Hide resolved
The reason why I didn't provide them is because we've discussed this topic with @tkajtoch and I was expecting a review from him. So I made a mental shortcut in the QA section because he'd know exactly how to test this. Now that you want to test it, which I'm grateful for, I can spend some time on writing a more detailed description. That being said, I'll ask you for your patience because this PR is of lesser priority like we discussed, and I have some other high priorities I need to handle at the moment. I will just ping you whenever you can review the PR again 😄 Thanks! |
|
Now I noticed the footer isn't rendering correctly (not sure why but locally it showed up correctly for me after the change). Working on it. 
|
|
@weronikaolejniczak The additional added changes make sense and look good to me. Thanks for adding them! |
packages/docusaurus-theme/src/components/theme_context/index.tsx
Outdated
Show resolved
Hide resolved
packages/docusaurus-theme/src/components/theme_context/index.tsx
Outdated
Show resolved
Hide resolved
💚 Build SucceededHistory
|
|
@mgadewoll the PR is ready to be re-reviewed. Everything should be working as expected in our documentation website. |
💚 Build Succeeded
History
|
| <EuiText textAlign="center" size="s" css={styles.text}> | ||
| {footer?.copyright} | ||
| </EuiText> | ||
| <EuiText |
There was a problem hiding this comment.
Nit: Looking at this, the color contrast is rather bad. That's because it uses light mode colors. We could rather use a EuiThemeProvider with locked dark color mode.
There was a problem hiding this comment.
@mgadewoll the EuiThemeProvider and forced dark mode is 👇🏻
Or do you propose something else?
There was a problem hiding this comment.
Ah right, sorry I missed it. 🤦♀️
But I see the issue now: The links are not using the MDX components anymore, meaning they don't get the EUI styles that would automatically update. Might be due to the dangerouslySetInnerHTML usage.
| prod | pr |
|---|---|
 |
 |
 |
 |
There was a problem hiding this comment.
Ah, that's a great catch! 🤔 Previously, the copyright was put directly into the Footer theme component and links were wrapped with EuiLink. Moving it to the config and using dangerouslySetInnerHTML required to use plain HTML (that's what the original Docusaurus footer does btw).
What we could do to make it better is take the euiLinkStyles and apply it to a on the footer element. What do you think? (packages/eui/src/components/link/link.styles.ts)
There was a problem hiding this comment.
Yes, I think that's a fair enough solution for this case 👍
| */ | ||
| const getSystemColorMode = (): EuiThemeColorMode => { | ||
| if (typeof window !== 'undefined' && window.matchMedia) { | ||
| return window.matchMedia('(prefers-color-scheme: dark)').matches |
There was a problem hiding this comment.
Blocking: Removing this means that the page doesn't listen to the user OS level preference anymore. We should support it as fallback: if no colorMode is set yet, listen to the OS setting.
There was a problem hiding this comment.
@mgadewoll this doesn't work. It always fallbacks to light. That's why I removed it because it's redundant logic and would have to be rewritten to be server-side friendly. Preferably, hook into the Docusaurus existing theming mechanism. The issue is, when I did it, the styles broke in production mode.
There should be no regression to color mode. I tested both in our documentation page and in a fresh Docusaurus. Do you see a regression? 🤔
There was a problem hiding this comment.
This is prod:
Kapture.2025-10-07.at.12.13.43.mp4
There was a problem hiding this comment.
You're right, I don't see it working in prod either. Looks like the colorMode wasn't properly saved before 🫠
In any case, I do think we should listen to the OS level setting as fallback. But we can also do that separately, I don't think it's blocking.
There was a problem hiding this comment.
@mgadewoll I agree with you, we should 👍🏻 I played around with several approaches and the only way I was able to make it work is hook up to Docusaurus theming mechanism and let it handle both the OS and local storage, while adjusting the EuiThemeProvider on our side. Worked well locally but when server-side came into the picture in production build, on refresh the styling was broken.
Thanks for being alert 💚 I'll create an issue for it.
Summary
On this PR, I prepare
docusaurus-themeto be released and consumed by other teams at Elastic.Changes
@elastic/euiimports from severity patternpackage.jsonto be ready for package releaseI recommend going commit by commit.
Tip
You can read more about Swizzling component here.
Why are we making this change?
https://github.com/elastic/eui-private/issues/150 - we want to publish
packages/docusaurus-themeso it can be consumed by other teams at Elastic, e.g. Kibana.Screenshots
Incorrect links
Incorrect imports
Much better...
Impact to users
🟢 This is not a breaking change. The documentation website behavior should remain the same.
QA
gh pr checkout 8814yarnyarn workspace @elastic/eui-website build:workspacesyarn workspace @elastic/eui-website startChecklist:
Optionally:
packages/docusaurus-themeand use in a Docusaurus scaffolding (Refer to README.md for instructions)