feat: add Open edX Dark theme#4331
Conversation
Add a new dark theme (tokens/src/themes/dark/** + generated styles/css/themes/dark/**) and the wiring to make components render correctly under it. - Make hardcoded component styles theme-aware: white/black → bg-base/headings-base; theme-driven Modal popup arrow + scroll-shadow, DataTable loading overlay, Skeleton, and ProductTour shadows - Lighten foreground colors for dark surfaces (links, outline buttons, IconButton, form validation, breadcrumb/stepper/nav, SelectMenu link) via centralized color.theme.default.* - Distinguish Alert and variant background colors on dark - Update doc examples that hardcoded light backgrounds (Modal *.mdx, Menu README) so popups/dialogs display correctly - Integrate the dark theme into the docs site (www) and example app, including a theme switcher - build-scss: build core + theme variants sequentially to avoid a theme-urls.json race
✅ Deploy Preview for paragon-openedx-v23 ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Thanks for the pull request, @ihor-romaniuk! This repository is currently maintained by Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review. 🔘 Get product approvalIf you haven't already, check this list to see if your contribution needs to go through the product review process.
🔘 Provide contextTo help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:
🔘 Get a green buildIf one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green. 🔘 Update the status of your PRYour PR is currently marked as a draft. After completing the steps above, update its status by clicking "Ready for Review", or removing "WIP" from the title, as appropriate. Where can I find more information?If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources: When can I expect my changes to be merged?Our goal is to get community contributions seen and reviewed as efficiently as possible. However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:
💡 As a result it may take up to several weeks or months to complete a review and merge your PR. |
Summary
tokens/src/themes/dark/**) and committed generated CSS (styles/css/themes/dark/**), built vianpm run build-tokens --all-themes--pgn-color-white/-black→bg-base/headings-base; theme-driven Modal popup arrow + scroll-shadow, DataTable loading overlay, Skeleton, and ProductTour shadowscolor.theme.default.*Modal/*.mdx,Menu/README.md) so popups/dialogs display correctly in darkwww) and example app, including a theme switcherlib/build-scss.js: build core + theme variants sequentially to avoid atheme-urls.jsonrace conditionContext
Paragon themes are driven by design tokens, but only the light theme shipped — there was no usable dark theme. This PR adds one. While implementing it, many components turned out not to be theme-aware: they hardcoded
white/blackor pointed foreground tokens at the dark end of the color ramps, so they were invisible or low-contrast on dark surfaces. Those are fixed to consume theme tokens, with no change to the light theme (light-theme token files are separate and--pgn-color-bg-base/-headings-baseresolve to the same white/black they did before). The result is a production-ready dark theme that existing consumers can opt into without affecting current light-theme behavior.Manual Test plan
npm startfrom the repo root, open the theme switcher, select Open edX Dark, and confirm the docs site renders in darknpm run build-tokensand./bin/paragon-scripts.js build-scssproducecore,light, anddarkand a completetheme-urls.jsonnpx jestpasses (977/977)example/) theme switcher toggles between light and dark