overhangio / tutor-indigo

An elegant, customizable theme for Open edX
GNU Affero General Public License v3.0
73 stars 275 forks source link

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

Closed hinakhadim closed 1 month ago

hinakhadim commented 1 month ago

Adding Dark theme for the following:

Discover Page

sandboxdev edly io_courses


apps sandboxdev edly io_authn_login_next=%2F


apps sandboxdev edly io_account_


apps sandboxdev edly io_discussions_course-v1_EdlyX+DM101+2024_T2_


apps sandboxdev edly io_learner-dashboard_ (2)


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


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.