The navigation panel is showing weird shadows when a dark theme is used.
How can this be changed?
Hi!
These shadows probably come from a custom style you have for the navigation panel.
I just tested Darkly on a snapshot distrib I had locally and could not reproduce your issue.
If you still have no idea where this could come from, try to inspect the elements and check where the CSS for the shadow comes from.
Have a good day,
Lucas C.
Thanks for getting back, Lucas!
I actually spent a bit of time today investigating the page ids and classes, and I don’t have any custom styles. It finally doomed to me that it’s probably the jstree class instead of leftPanels, but I couldn’t get any further.
On my desktop, it looks just like your screenshot, but my screenshot is actually from the mobile view (Chrome and Firefox on Android and iOS, see screenshot). On Edge on iOS, funny enough, it looks fine although you can faintly see that there’s some effect behind the text.
Can you verify?
I’m sorry, I just realized now that due to the missing notification bar because of cropping, it wasn’t obvious that in my first screenshot, I had a mobile view 
Chrome/FF:
My bad, I just realized the on mobile in the title, it totally slipped over my mind. Thank you for the details 
I can indeed reproduce your bug on mobile.
We don’t have automated testing for mobile browsers (https://dev.xwiki.org/xwiki/bin/view/Community/SupportStrategy/BrowserSupportStrategy), so we didn’t catch it yet.
It’s weird this shadow appears here ^^’ I’ll open a ticket about it and see if I can fix it soon. I wonder if it’s just dark themes, or if that shadow appears on any skin…
Created XWIKI-22314: Navigation tree items have an unexpected shadow with a mobile and dark theme. 
It seems like this weird presentation is for any document tree (probably comes from the xwiki-tree component).
Thank you for this report, I’ll hopefully come back to you with a fix you can apply yourself before it gets merged on the project.
Lucas C.
See XWIKI-22314: Navigation tree items have an unexpected shadow with a mobile and dark theme. by Sereza7 · Pull Request #3251 · xwiki/xwiki-platform · GitHub for the correction we should merge on the xwiki-platform project.
For you, on the short term, I recommend to add a custom style sheet with the block:
@media (max-width: 768px) {
.jstree.jstree-xwiki-responsive .jstree-anchor { text-shadow: none; }
}
The goal is just to overwrite the default value set with the ruleset on @media (max-width: 768px) .jstree-xwiki-responsive .jstree-anchor, so we get a selector slightly more specific.
1 Like
This is just awesome, works 100% !!! Thanks a lot!