SAK-47738 Library tests & quizzes poor color contrast of print assess…

…ment
sakaiproject · Oct 21, 2024 · 162e092 · 162e092
1 parent 2f8d957
commit 162e092
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 2 deletions.
diff --git a/library/src/webapp/js/portal/portal.theme.switcher.js b/library/src/webapp/js/portal/portal.theme.switcher.js
@@ -63,30 +63,76 @@ document.addEventListener('DOMContentLoaded', () => {
   portal.updateIframeTheme();
 });
 
+const assessmentTitle = document.getElementById("assessmentForm:title");
+const getDynamicParts = () => {
+  const partNumbers = document.querySelectorAll("[id^='assessmentForm:parts'][id$=':number']");
+  const partTitles = document.querySelectorAll("[id^='assessmentForm:parts'][id$=':title']");
+  return { partNumbers, partTitles };
+};
+
+const applyColorToElements = (color) => {
+  const { partNumbers, partTitles } = getDynamicParts();
+
+  if (assessmentTitle) {
+    assessmentTitle.style.color = color;
+  }
 
+  partNumbers.forEach(partNumber => {
+    partNumber.style.color = color;
+  });
+
+  partTitles.forEach(partTitle => {
+    partTitle.style.color = color;
+  });
+};
 
 portal.enableDarkTheme = () => {
 
+  portal.setPortalThemeUserPref("dark");
   portal.setDarkThemeSwitcherToggle(true);
   portal.removeCssClassFromMarkup(portal.defaultThemeClass);
   portal.removeCssClassFromMarkup(portal.lightThemeClass);
   portal.addCssClassToMarkup(portal.darkThemeClass);
   portal.setPortalThemeUserPref(portal.darkThemeClass);
   portal.updateIframeTheme();
   portal.darkThemeSwitcher.title = portal.i18n.theme_switch_to_light;
+  applyColorToElements('#02bce6');
+  localStorage.setItem('theme', 'dark');
 };
 
 portal.enableLightTheme = () => {
 
+  portal.setPortalThemeUserPref("light");
   portal.setDarkThemeSwitcherToggle(false);
   portal.removeCssClassFromMarkup(portal.defaultThemeClass);
   portal.removeCssClassFromMarkup(portal.darkThemeClass);
   portal.addCssClassToMarkup(portal.lightThemeClass);
   portal.setPortalThemeUserPref(portal.lightThemeClass);
   portal.updateIframeTheme();
   portal.darkThemeSwitcher.title = portal.i18n.theme_switch_to_dark;
+  applyColorToElements('#016177');
+  localStorage.setItem('theme', 'light');
+};
+
+const applySavedTheme = async () => {
+  const savedTheme = localStorage.getItem('theme');
+
+  if (savedTheme === 'dark') {
+    portal.enableDarkTheme();
+  } else if (savedTheme === 'light') {
+    portal.enableLightTheme();
+  } else {
+    const themeFromBackend = await portal.getCurrentSetTheme();
+
+    if (themeFromBackend === portal.darkThemeClass) {
+      portal.enableDarkTheme();
+    } else {
+      portal.enableLightTheme();
+    }
+  }
 };
 
+applySavedTheme();
 
 // if the dark theme switch is on the page, attach listener to dark theme toggle switch
 portal.darkThemeSwitcher?.addEventListener('click', portal.toggleDarkTheme, false);

diff --git a/samigo/samigo-app/src/webapp/css/print/print.css b/samigo/samigo-app/src/webapp/css/print/print.css
@@ -121,7 +121,6 @@ t .navModeAction {
   font-size: 1.2em;
   padding: 1em 3em 1em 1em;
   margin-bottom: 0em;
-  color: #01a5cb;
   font-weight: normal;
   background-color: transparent !important;
 }
@@ -138,7 +137,6 @@ t .navModeAction {
 
 .part_title_text {
   font-size: 1.2em;
-  color: #01a5cb;
   padding: 3em 0em 1em 1em;
   font-weight: normal;
 }