How to Match Custom Page Styling with Dark Mode?
Hey Shahjahan Jewel
Quick question — I'm working on a custom page within Upra.space and would love to make sure it blends in with the existing dark mode theme.
Is there a global CSS class (or set of classes) I can apply to my <div> or text elements to activate dark mode styling so that my custom content looks native to the platform?
Appreciate any help or pointers on keeping things visually consistent with the site's theme!
Thanks in advance 🙏
I haven't tested it, but adding class .dark or .light at the beginning of the CSS should keep the styling specific to those theme rather than adding to both. You can also try targeting the color variables as seen in the screenshot for the dark theme. You may have to use !important because I believe those are pretty top level and you may not be able to outweigh the specificity otherwise.
Jeff Brigman
If you're using HTML with dedicated variables to create the courses, you'll have to go through quite a bit of trouble with custom CSS and try to make sense of Fluent Community’s architecture.
Thank you Jeff Brigman
Kelly Begin nice, looks good
Kelly Begin ho guys can u post here the css code to do that?
Hey Kelly Begin
Would you mind sharing the CSS code for this. We've tried and not been able to get our custom page to match the light / dark mode so far 😊
TJ Andrews Are you hardcoding the colours? You need to use the fcom variables - these then change depending if light mode is activated or not.
Ross FCA I've just dropped you a message, hope you don't mind 😊