diff --git a/css/dialogs.css b/css/dialogs.css
index e2013e01..79fd8377 100644
--- a/css/dialogs.css
+++ b/css/dialogs.css
@@ -478,6 +478,10 @@
 		background: var(--color-button);
 		padding: 2px 5px;
 	}
+	.keybindslot .optional {
+		color: var(--color-subtle_text);
+		padding: 2px 5px;
+	}
 
 	/*Colors*/
 	dialog#theme .dialog_wrapper {
diff --git a/js/interface/keyboard.js b/js/interface/keyboard.js
index afb9b5c6..0ac15b6a 100644
--- a/js/interface/keyboard.js
+++ b/js/interface/keyboard.js
@@ -110,7 +110,10 @@ class Keybind {
 		}
 		if (colorized) {
 			modifiers.forEach((text, i) => {
-				modifiers[i] = `<span class="${i !== modifiers.length-1 ? 'modifier' : 'key'}">${text}</span>`;
+				let type = i !== modifiers.length-1
+						 ? text.match(/\[\w+\]/) ? 'optional' : 'modifier'
+						 : 'key'
+				modifiers[i] = `<span class="${type}">${text}</span>`;
 			})
 			return modifiers.join(`<span class="punctuation"> + </span>`);