Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add dark theme for LMS pages and MFEs #95

Merged
merged 8 commits into from
Jul 23, 2024

Conversation

hinakhadim
Copy link
Collaborator

@hinakhadim hinakhadim commented Jul 10, 2024

Adding Dark theme for the following:

  • LMS pages

Discover Page

sandboxdev edly io_courses


  • Authn MFE

apps sandboxdev edly io_authn_login_next=%2F


  • Accounts MFE

apps sandboxdev edly io_account_


  • Discussion MFE

apps sandboxdev edly io_discussions_course-v1_EdlyX+DM101+2024_T2_


  • Learner Dashboard MFE

apps sandboxdev edly io_learner-dashboard_ (2)


  • Learning MFE

apps sandboxdev edly io_learning_course_course-v1_EdlyX+DM101+2024_T2_home

apps sandboxdev edly io_learning_course_course-v1_EdlyX+DM101+2024_T2_block-v1_EdlyX+DM101+2024_T2+type@sequential+block@a729152514d54c788ec70700c8f74186_block-v1_EdlyX+DM101+2024_T2+type@vertical+block@0c4e57fed4d141ea9a5b56075ff2e722

apps sandboxdev edly io_learning_course_course-v1_EdlyX+DM101+2024_T2_progress


  • Profile MFE

apps sandboxdev edly io_profile_u_hinakhadim


The whole flow is:
To implement the Indigo theme, few HTML templates and sass stylings have been customized to give Open edX a new look. For MFEs styling, improvements have been made using the brand-openedx package and included the indigo brand-openedx
published package in the tutor-indigo plugin for being a part of MFEs. A config variable ENABLE_DARK_THEME has been added to the dark theme for the indigo plugin.
Behind the scenes, when this config variable is enabled, a class named indigo-dark-theme is added to the body tag of HTML templates. If the config variable is enabled, the -theme=dark are being passed as parameter to the npm install the indigo-brand-openedx package. When the --theme=dark parameter is passed, it copies dark theme files in the indigo-brand-openedx package to the main package using post npm install.

@@ -0,0 +1,170 @@
<%page args="section_data" expression_filter="h"/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What part(s) of this file where modified, compared to upstream? As usual, we should hightlight them with a comment. I couldn't find such a comment, but maybe I didn't look straight ;)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Regis, there is no comment. We wrapped a heading (h4) and .enrollment-wrapper div in course-info div for styling. I have removed this file as it doesn't seem good to override the file for adding a new div. Thanks for pointing it out.

Copy link
Contributor

@regisb regisb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! this is great 🎆

@hinakhadim hinakhadim merged commit f80eebb into overhangio:master Jul 23, 2024
1 check passed
@regisb regisb deleted the hina/redwood-dark branch July 23, 2024 12:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

Successfully merging this pull request may close these issues.

3 participants