3 files changed, 41 insertions, 4 deletions

diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx
index aafaad40..ae5cff34 100644
--- a/subprojects/frontend/src/editor/EditorArea.tsx
+++ b/subprojects/frontend/src/editor/EditorArea.tsx
@@ -39,6 +39,7 @@ export default observer(function EditorArea({
         showLineNumbers={editorStore.showLineNumbers}
         showActiveLine={!editorStore.hasSelection}
         colorIdentifiers={editorStore.colorIdentifiers}
+        hexTypeHashes={editorStore.hexTypeHashes}
         ref={editorParentRef}
       />
     </Box>
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts
index 33bca382..f128d70d 100644
--- a/subprojects/frontend/src/editor/EditorStore.ts
+++ b/subprojects/frontend/src/editor/EditorStore.ts
@@ -111,6 +111,8 @@ export default class EditorStore {
 
   unsavedChanges = false;
 
+  hexTypeHashes: string[] = [];
+
   constructor(
     initialValue: string,
     pwaStore: PWAStore,
@@ -275,8 +277,12 @@ export default class EditorStore {
     this.doCommand(nextDiagnostic);
   }
 
-  updateSemanticHighlighting(ranges: IHighlightRange[]): void {
+  updateSemanticHighlighting(
+    ranges: IHighlightRange[],
+    hexTypeHashes: string[],
+  ): void {
     this.dispatch(setSemanticHighlighting(ranges));
+    this.hexTypeHashes = hexTypeHashes;
   }
 
   updateOccurrences(write: IOccurrence[], read: IOccurrence[]): void {
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts
index 4978c7f7..6deda080 100644
--- a/subprojects/frontend/src/editor/EditorTheme.ts
+++ b/subprojects/frontend/src/editor/EditorTheme.ts
@@ -14,6 +14,7 @@ import {
   type CSSObject,
   type Theme,
 } from '@mui/material/styles';
+import { lch } from 'd3-color';
 import { range } from 'lodash-es';
 
 import svgURL from '../utils/svgURL';
@@ -21,6 +22,7 @@ import svgURL from '../utils/svgURL';
 function createTypeHashStyles(
   theme: Theme,
   colorIdentifiers: boolean,
+  hexTypeHashes: string[],
 ): CSSObject {
   if (!colorIdentifiers) {
     return {};
@@ -34,6 +36,26 @@ function createTypeHashStyles(
       },
     };
   });
+  hexTypeHashes.forEach((typeHash) => {
+    let color = lch(`#${typeHash}`);
+    if (theme.palette.mode === 'dark') {
+      color = color.brighter();
+      if (color.l < 60) {
+        color.l = 60;
+      }
+    } else {
+      color = color.darker();
+      if (color.l > 60) {
+        color.l = 60;
+      }
+    }
+    result[`.tok-problem-typeHash-_${typeHash}`] = {
+      '&, .tok-typeName': {
+        color: color.formatRgb(),
+        fontWeight: theme.typography.fontWeightEditorTypeHash,
+      },
+    };
+  });
   return result;
 }
 
@@ -42,12 +64,20 @@ export default styled('div', {
   shouldForwardProp: (propName) =>
     propName !== 'showLineNumbers' &&
     propName !== 'showActiveLine' &&
-    propName !== 'colorIdentifiers',
+    propName !== 'colorIdentifiers' &&
+    propName !== 'hexTypeHashes',
 })<{
   showLineNumbers: boolean;
   showActiveLine: boolean;
   colorIdentifiers: boolean;
-}>(({ theme, showLineNumbers, showActiveLine, colorIdentifiers }) => {
+  hexTypeHashes: string[];
+}>(({
+  theme,
+  showLineNumbers,
+  showActiveLine,
+  colorIdentifiers,
+  hexTypeHashes,
+}) => {
   const editorFontStyle: CSSObject = {
     ...theme.typography.editor,
     fontWeight: theme.typography.fontWeightEditorNormal,
@@ -157,7 +187,7 @@ export default styled('div', {
         fontStyle: 'normal',
       },
     },
-    ...createTypeHashStyles(theme, colorIdentifiers),
+    ...createTypeHashStyles(theme, colorIdentifiers, hexTypeHashes),
   };
 
   const matchingStyle: CSSObject = {