diff --git a/book/src/themes.md b/book/src/themes.md
index e73aedc94..97955cb71 100644
--- a/book/src/themes.md
+++ b/book/src/themes.md
@@ -234,6 +234,10 @@ These scopes are used for theming the editor interface.
 | `error`                  | Diagnostics error (gutter)                     |
 | `info`                   | Diagnostics info (gutter)                      |
 | `hint`                   | Diagnostics hint (gutter)                      |
-| `diagnostic`             | For text in editing area                       |
+| `diagnostic`             | Diagnostics fallback style (editing area)      |
+| `diagnostic.hint`        | Diagnostics hint (editing area)                |
+| `diagnostic.info`        | Diagnostics info (editing area)                |
+| `diagnostic.warning`     | Diagnostics warning (editing area)             |
+| `diagnostic.error`       | Diagnostics error (editing area)               |
 
 [rulers-config]: ./configuration.md#editor-section
diff --git a/helix-term/src/ui/editor.rs b/helix-term/src/ui/editor.rs
index 52e581632..85028e2ff 100644
--- a/helix-term/src/ui/editor.rs
+++ b/helix-term/src/ui/editor.rs
@@ -247,17 +247,36 @@ impl EditorView {
         doc: &Document,
         theme: &Theme,
     ) -> Vec<(usize, std::ops::Range<usize>)> {
-        let diagnostic_scope = theme
-            .find_scope_index("diagnostic")
+        use helix_core::diagnostic::Severity;
+        let get_scope_of = |scope| {
+            theme
+            .find_scope_index(scope)
+            // get one of the themes below as fallback values
+            .or_else(|| theme.find_scope_index("diagnostic"))
             .or_else(|| theme.find_scope_index("ui.cursor"))
             .or_else(|| theme.find_scope_index("ui.selection"))
             .expect(
                 "at least one of the following scopes must be defined in the theme: `diagnostic`, `ui.cursor`, or `ui.selection`",
-            );
+            )
+        };
+
+        // basically just queries the theme color defined in the config
+        let hint = get_scope_of("diagnostic.hint");
+        let info = get_scope_of("diagnostic.info");
+        let warning = get_scope_of("diagnostic.warning");
+        let error = get_scope_of("diagnostic.error");
+        let r#default = get_scope_of("diagnostic"); // this is a bit redundant but should be fine
 
         doc.diagnostics()
             .iter()
             .map(|diagnostic| {
+                let diagnostic_scope = match diagnostic.severity {
+                    Some(Severity::Info) => info,
+                    Some(Severity::Hint) => hint,
+                    Some(Severity::Warning) => warning,
+                    Some(Severity::Error) => error,
+                    _ => r#default,
+                };
                 (
                     diagnostic_scope,
                     diagnostic.range.start..diagnostic.range.end,
diff --git a/theme.toml b/theme.toml
index 31ecd32e4..2e6da866d 100644
--- a/theme.toml
+++ b/theme.toml
@@ -67,6 +67,10 @@ label = "honey"
 "ui.menu.selected" = { fg = "revolver", bg = "white" }
 
 diagnostic = { modifiers = ["underlined"] }
+# "diagnostic.hint" = { fg = "revolver", bg = "lilac" }
+# "diagnostic.info" = { fg = "revolver", bg = "lavender" }
+# "diagnostic.warning" = { fg = "revolver", bg = "honey" }
+# "diagnostic.error" = { fg = "revolver", bg = "apricot" }
 
 warning = "lightning"
 error = "apricot"