diff --git a/app/typings/styled-components.d.ts b/app/typings/styled-components.d.ts
index a51e8e5d0..239a8e7a6 100644
--- a/app/typings/styled-components.d.ts
+++ b/app/typings/styled-components.d.ts
@@ -115,6 +115,8 @@ declare module "styled-components" {
     cursor: string;
     textSecondary: string;
     textTertiary: string;
+    textDeleted: string;
+    textDeletedBackground: string;
     placeholder: string;
     sidebarBackground: string;
     sidebarActiveBackground: string;
diff --git a/shared/editor/components/Styles.ts b/shared/editor/components/Styles.ts
index 2b0df7529..540c2f936 100644
--- a/shared/editor/components/Styles.ts
+++ b/shared/editor/components/Styles.ts
@@ -1302,7 +1302,8 @@ del {
 }
 
 del[data-operation-index] {
-  background-color: ${props.theme.slateLight};
+  color: ${props.theme.textDeleted};
+  background-color: ${props.theme.textDeletedBackground};
   
   img {
     opacity: .5;
diff --git a/shared/styles/theme.ts b/shared/styles/theme.ts
index f161ddb49..367e8ab9c 100644
--- a/shared/styles/theme.ts
+++ b/shared/styles/theme.ts
@@ -100,6 +100,8 @@ export const light = {
   text: colors.almostBlack,
   textSecondary: colors.slateDark,
   textTertiary: colors.slate,
+  textDeleted: colors.slate,
+  textDeletedBackground: colors.slateLight,
   placeholder: "#a2b2c3",
   sidebarBackground: colors.warmGrey,
   sidebarActiveBackground: "#d7e0ea",
@@ -157,6 +159,8 @@ export const dark = {
   cursor: colors.almostWhite,
   textSecondary: lighten(0.1, colors.slate),
   textTertiary: colors.slate,
+  textDeleted: lighten(0.1, colors.slate),
+  textDeletedBackground: colors.black,
   placeholder: colors.slateDark,
   sidebarBackground: colors.veryDarkBlue,
   sidebarActiveBackground: lighten(0.02, colors.almostBlack),