Skip to content

Improve theme consistency, typography, and dark mode styling

This merge request improves the overall visual consistency and maintainability of the Docusaurus theme by refining typography, fixing font imports, and enhancing dark/light mode styling.

Changes Made

Typography Improvements

  • Added proper import for Roboto Mono to ensure consistent rendering of code blocks
  • Standardized font usage across headings and body text

Theme & UI Enhancements

  • Improved color consistency using the UN SDG-inspired palette
  • Added smoother transitions for better user experience
  • Enhanced selection styling for better visibility

Dark Mode Fixes

  • Ensured proper contrast and readability in dark mode
  • Cleaned up hero section styling for consistent behavior across themes

Code & Maintainability

  • Refactored CSS structure for clarity and scalability
  • Added logical grouping and comments for better readability
  • Minor UI polish (border radius, scroll behavior)

Before vs After

  • Fonts were inconsistently applied (Roboto Mono missing)
  • Dark mode hero section had readability inconsistencies
  • UI transitions were abrupt

Now:

  • Consistent typography across the site
  • Improved dark/light theme behavior
  • Cleaner and more maintainable styling

Testing

  • Verified styling in both light and dark modes
  • Checked typography rendering across headings, body text, and code blocks
  • Ensured no layout regressions

Impact

  • Improves overall user experience
  • Enhances visual consistency and accessibility
  • Makes the theme easier to maintain and extend

Notes

This change is non-breaking and purely improves styling and developer experience.

Merge request reports

Loading