diff --git a/ts/editor/ColorButtons.svelte b/ts/editor/ColorButtons.svelte
index 388c000ed..eac0cad46 100644
--- a/ts/editor/ColorButtons.svelte
+++ b/ts/editor/ColorButtons.svelte
@@ -11,6 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import ColorPicker from "components/ColorPicker.svelte";
     import WithShortcut from "components/WithShortcut.svelte";
     import WithColorHelper from "./WithColorHelper.svelte";
+    import OnlyEditable from "./OnlyEditable.svelte";
 
     import { textColorIcon, highlightColorIcon, arrowIcon } from "./icons";
     import { appendInParentheses } from "./helpers";
@@ -28,51 +29,61 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <ButtonGroup {api}>
     <WithColorHelper let:colorHelperIcon let:color let:setColor>
-        <ButtonGroupItem>
-            <WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
-                <IconButton
-                    tooltip={appendInParentheses(
-                        tr.editingSetForegroundColor(),
-                        shortcutLabel
-                    )}
-                    on:click={wrapWithForecolor(color)}
-                    on:mount={createShortcut}
-                >
-                    {@html textColorIcon}
-                    {@html colorHelperIcon}
-                </IconButton>
-            </WithShortcut>
-        </ButtonGroupItem>
+        <OnlyEditable let:disabled>
+            <ButtonGroupItem>
+                <WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
+                    <IconButton
+                        tooltip={appendInParentheses(
+                            tr.editingSetForegroundColor(),
+                            shortcutLabel
+                        )}
+                        {disabled}
+                        on:click={wrapWithForecolor(color)}
+                        on:mount={createShortcut}
+                    >
+                        {@html textColorIcon}
+                        {@html colorHelperIcon}
+                    </IconButton>
+                </WithShortcut>
+            </ButtonGroupItem>
 
-        <ButtonGroupItem>
-            <WithShortcut shortcut={"F8"} let:createShortcut let:shortcutLabel>
-                <IconButton
-                    tooltip={appendInParentheses(
-                        tr.editingChangeColor(),
-                        shortcutLabel
-                    )}
-                    widthMultiplier={0.5}
-                >
-                    {@html arrowIcon}
-                    <ColorPicker on:change={setColor} on:mount={createShortcut} />
-                </IconButton>
-            </WithShortcut>
-        </ButtonGroupItem>
+            <ButtonGroupItem>
+                <WithShortcut shortcut={"F8"} let:createShortcut let:shortcutLabel>
+                    <IconButton
+                        tooltip={appendInParentheses(
+                            tr.editingChangeColor(),
+                            shortcutLabel
+                        )}
+                        {disabled}
+                        widthMultiplier={0.5}
+                    >
+                        {@html arrowIcon}
+                        <ColorPicker on:change={setColor} on:mount={createShortcut} />
+                    </IconButton>
+                </WithShortcut>
+            </ButtonGroupItem>
+        </OnlyEditable>
     </WithColorHelper>
 
     <WithColorHelper let:colorHelperIcon let:color let:setColor>
-        <ButtonGroupItem>
-            <IconButton on:click={wrapWithBackcolor(color)}>
-                {@html highlightColorIcon}
-                {@html colorHelperIcon}
-            </IconButton>
-        </ButtonGroupItem>
+        <OnlyEditable let:disabled>
+            <ButtonGroupItem>
+                <IconButton on:click={wrapWithBackcolor(color)} {disabled}>
+                    {@html highlightColorIcon}
+                    {@html colorHelperIcon}
+                </IconButton>
+            </ButtonGroupItem>
 
-        <ButtonGroupItem>
-            <IconButton tooltip={tr.editingChangeColor()} widthMultiplier={0.5}>
-                {@html arrowIcon}
-                <ColorPicker on:change={setColor} />
-            </IconButton>
-        </ButtonGroupItem>
+            <ButtonGroupItem>
+                <IconButton
+                    tooltip={tr.editingChangeColor()}
+                    widthMultiplier={0.5}
+                    {disabled}
+                >
+                    {@html arrowIcon}
+                    <ColorPicker on:change={setColor} />
+                </IconButton>
+            </ButtonGroupItem>
+        </OnlyEditable>
     </WithColorHelper>
 </ButtonGroup>