diff --git a/src/core/features/question/question.scss b/src/core/features/question/question.scss
index 0a20e3a21..b4f39d6ad 100644
--- a/src/core/features/question/question.scss
+++ b/src/core/features/question/question.scss
@@ -5,10 +5,31 @@
         color: var(--core-question-correct-color);
     }
 
+    .core-question-answer-partiallycorrect {
+        color: var(--core-question-partial-color);
+    }
+
     .core-question-answer-incorrect {
         color: var(--core-question-incorrect-color);
     }
 
+    input, select {
+        &.core-question-answer-correct {
+            --background: var(--core-question-correct-color-bg);
+            --contrast-background: var(--background);
+        }
+
+        &.core-question-answer-partiallycorrect {
+            --background: var(--core-question-partial-color-bg);
+            --contrast-background: var(--background);
+        }
+
+        &.core-question-answer-incorrect {
+            --background: var(--core-question-incorrect-color-bg);
+            --contrast-background: var(--background);
+        }
+    }
+
     .core-question-feedback-container ::ng-deep {
         --color: var(--core-question-feedback-color);
         --background: var(--core-question-feedback-background-color);
@@ -45,6 +66,7 @@
 
     .core-question-feedback-inline {
         display: inline-block;
+        @include margin-horizontal(4px, 0px);
     }
 
     .core-question-feedback-padding {
@@ -60,11 +82,15 @@
         color: var(--core-question-correct-color);
     }
     .core-question-partiallycorrect {
-        background-color: var(--core-question-state-partial-color);
+        --background: var(--core-question-partial-color-bg);
+        background-color: var(--core-question-partial-color-bg);
+        color: var(--core-question-partial-color);
     }
     .core-question-notanswered,
     .core-question-incorrect {
-        background-color: var(--core-question-state-incorrect-color);
+        --background: var(--core-question-incorrect-color-bg);
+        background-color: var(--core-question-incorrect-color-bg);
+        color: var(--core-question-incorrect-color);
     }
     .core-question-answersaved,
     .core-question-requiresgrading {
diff --git a/src/core/features/question/services/question-helper.ts b/src/core/features/question/services/question-helper.ts
index ec9b983d5..28ab7e1fc 100644
--- a/src/core/features/question/services/question-helper.ts
+++ b/src/core/features/question/services/question-helper.ts
@@ -731,6 +731,7 @@ export class CoreQuestionHelperProvider {
         CoreDomUtils.replaceClassesInElement(element, {
             correct: 'core-question-answer-correct',
             incorrect: 'core-question-answer-incorrect',
+            partiallycorrect: 'core-question-answer-partiallycorrect',
         });
     }
 
@@ -799,38 +800,40 @@ export class CoreQuestionHelperProvider {
     treatCorrectnessIcons(element: HTMLElement): void {
         const icons = <HTMLElement[]> Array.from(element.querySelectorAll('img.icon, img.questioncorrectnessicon, i.icon'));
         icons.forEach((icon) => {
-            let correct = false;
+            let iconName: string | undefined;
+            let color: string | undefined;
 
             if ('src' in icon) {
                 if ((icon as HTMLImageElement).src.indexOf('correct') >= 0) {
-                    correct = true;
-                } else if ((icon as HTMLImageElement).src.indexOf('incorrect') < 0 ) {
-                    return;
+                    iconName = 'check';
+                    color = 'success';
+                } else if ((icon as HTMLImageElement).src.indexOf('incorrect') >= 0 ) {
+                    iconName = 'xmark';
+                    color = 'danger';
                 }
             } else {
-                const classList = icon.classList.toString();
-                if (classList.indexOf('fa-check') >= 0) {
-                    correct = true;
-                } else if (classList.indexOf('fa-xmark') < 0 && classList.indexOf('fa-remove') < 0) {
-                    return;
+                if (icon.classList.contains('fa-check-square')) {
+                    iconName = 'square-check';
+                    color = 'warning';
+                } else if (icon.classList.contains('fa-check')) {
+                    iconName = 'check';
+                    color = 'success';
+                } else if (icon.classList.contains('fa-xmark') || icon.classList.contains('fa-remove')) {
+                    iconName = 'xmark';
+                    color = 'danger';
                 }
             }
 
+            if (!iconName) {
+                return;
+            }
+
             // Replace the icon with the font version.
             const newIcon: HTMLIonIconElement = document.createElement('ion-icon');
 
-            if (correct) {
-                const iconName = 'check';
-                newIcon.setAttribute('name', `fas-${iconName}`);
-                newIcon.setAttribute('src', CoreIcons.getIconSrc('font-awesome', 'solid', iconName));
-                newIcon.className = 'core-correct-icon ion-color ion-color-success questioncorrectnessicon';
-            } else {
-                const iconName = 'xmark';
-                newIcon.setAttribute('name', `fas-${iconName}`);
-                newIcon.setAttribute('src', CoreIcons.getIconSrc('font-awesome', 'solid', iconName));
-                newIcon.className = 'core-correct-icon ion-color ion-color-danger questioncorrectnessicon';
-            }
-
+            newIcon.setAttribute('name', `fas-${iconName}`);
+            newIcon.setAttribute('src', CoreIcons.getIconSrc('font-awesome', 'solid', iconName));
+            newIcon.className = `core-correct-icon ion-color ion-color-${color} questioncorrectnessicon`;
             newIcon.title = icon.title;
             newIcon.setAttribute('aria-label', icon.title);
             icon.parentNode?.replaceChild(newIcon, icon);
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index eb4b3641b..07eb188d9 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -135,6 +135,8 @@ html.dark {
     --core-question-correct-color-bg: var(--success-shade);
     --core-question-incorrect-color: var(--danger);
     --core-question-incorrect-color-bg: var(--danger-shade);
+    --core-question-partial-color: var(--warning-tint);
+    --core-question-partial-color-bg: var(--warning-shade);
     --core-question-feedback-color: var(--warning-tint);
     --core-question-feedback-color-bg: var(--warning-shade);
     --core-question-warning-color: var(--danger);
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index c4982111d..057b4d47a 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -171,6 +171,8 @@ html {
     --core-question-correct-color-bg: var(--success-tint);
     --core-question-incorrect-color: var(--danger);
     --core-question-incorrect-color-bg: var(--danger-tint);
+    --core-question-partial-color: var(--warning-shade);
+    --core-question-partial-color-bg: var(--warning-tint);
     --core-question-feedback-color: var(--warning-shade);
     --core-question-feedback-color-bg: var(--warning-tint);
     --core-question-warning-color: var(--danger);