diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
index da400f113..05d396747 100644
--- a/src/public/stylesheets/theme-next/shell.css
+++ b/src/public/stylesheets/theme-next/shell.css
@@ -1563,9 +1563,22 @@ body .calendar-dropdown-widget .calendar-body a:hover {
 
 /* Help */
 
+.help-dialog {
+    --help-background-color: #fffc;
+    --help-backdrop-blur: 10px;
+    --help-card-background: var(--card-background-color);
+    --help-card-shadow: 2px 2px 2px rgba(0, 0, 0, .10);
+    --help-card-heading-color: #797979;
+    --help-kbd-shortcut-color: #3f3f3f;
+    --help-kbd-shortcut-background: white;
+    --help-kbd-shortcut-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
+    --help-code-color: black;
+    --help-code-background: #d7d5d5;
+}
+
 .help-dialog .modal-content {
-    --modal-background-color: #fffc;
-    backdrop-filter: blur(10px);
+    --modal-background-color: var(--help-background-color);
+    backdrop-filter: blur(var(--help-backdrop-blur));
 }
 
 .help-dialog .help-cards {
@@ -1578,20 +1591,20 @@ body .calendar-dropdown-widget .calendar-body a:hover {
     margin: 0;
     width: auto;
     border: none;
-    padding: 16px 8px;
     background: unset;
+    padding: 16px 8px;
     break-inside: avoid-column;
 }
 
 .help-dialog .card-body {
-    box-shadow: 2px 2px 2px rgba(0, 0, 0, .10);
+    box-shadow: var(--help-card-shadow);
     border-radius: 6px;
-    background: var(--card-background-color);
+    background: var(--help-card-background);
 }
 
 .help-dialog .card-body h5,
 .help-dialog .card-body h6 {
-    color: #797979;
+    color: var(--help-card-heading-color);
     font-weight: 600;
 }
 
@@ -1604,7 +1617,7 @@ body .calendar-dropdown-widget .calendar-body a:hover {
     padding-bottom: .5em;
 }
 
-
+/* Help card item */
 .help-dialog .help-cards ul {
     list-style-type: none;
     padding: 0;
@@ -1614,24 +1627,27 @@ body .calendar-dropdown-widget .calendar-body a:hover {
     margin-top: .4em;
 }
 
+/* Keyboard shortcut */
 .help-dialog .help-cards kbd {
-    box-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
+    box-shadow: var(--help-kbd-shortcut-shadow);
     margin: 0 4px;
     border: none;
     border-radius: 4px;
     padding: 2px 10px;
-    background: white;
-    color: #3f3f3f;
+    background: var(--help-kbd-shortcut-background);
+    color: var(--help-kbd-shortcut-color);
     font-weight: 500;
     letter-spacing: .5pt;
 }
 
-.help-dialog .help-cards code {
-    border-radius: 4px;
-    background: #d7d5d5;
-    padding: 0 8px;
-}
-
 .help-dialog .help-cards kbd:first-child {
     margin-left: 0;
+}
+
+/* Inline code - used for Markdown samples */
+.help-dialog .help-cards code {
+    border-radius: 4px;
+    background: var(--help-code-background);
+    padding: 0 8px;
+    color: var(--help-code-color);
 }
\ No newline at end of file