Add theme: Tab Hotkey Indicators

themes/81f72fe0-2c90-492f-b916-045521d6dac7/chrome.css

@@ -0,0 +1,126 @@
+
+@counter-style blank {
+  system: cyclic;
+  symbols: "";
+}
+@counter-style tabhint {
+  system: fixed;
+  symbols: "1" "2" "3" "4" "5" "6" "7" "8";
+  suffix: "";
+  fallback: blank;
+}
+
+#TabsToolbar {
+  counter-reset: tabcounter;
+}
+
+@media not (-moz-pref("mod.tab_hotkey_hints.essentials")) {
+  #zen-essentials .tab-content::after {
+    display: none;
+  }
+}
+
+@media -moz-pref("mod.tab_hotkey_hints.last_tab") {
+  zen-workspace[active="true"] .zen-workspace-tabs-section
+  > tab:not([pinned]):not([aria-hidden="true"]):not([folder-active="true"]):nth-last-child(2),
+  zen-workspace[active="true"] tab-group:not(:has(~ tab))
+  tab:not([pinned]):not([aria-hidden="true"]):not([folder-active="true"]):nth-last-child(1) {
+    .tab-content::before {
+      content: "9";
+      display: unset;
+      z-index: 1;
+      font-size: var(--mod-tab_hotkey_hints-font_size);
+      font-weight: var(--mod-tab_hotkey_hints-font_weight);
+      position: absolute;
+      opacity: var(--mod-tab_hotkey_hints-opacity);
+      color: var(--mod-tab_hotkey_hints-color);
+      text-shadow: var(--mod-tab_hotkey_hints-text_shadow);
+      @media (-moz-pref("mod.tab_hotkey_hints.position", "topright")) {
+          right: var(--mod-tab_hotkey_hints-h_margin);
+          top: var(--mod-tab_hotkey_hints-v_margin);
+      }
+      @media (-moz-pref("mod.tab_hotkey_hints.position", "topleft")) {
+          left: var(--mod-tab_hotkey_hints-h_margin);
+          top: var(--mod-tab_hotkey_hints-v_margin);
+      }
+      @media (-moz-pref("mod.tab_hotkey_hints.position", "botright")) {
+          right: var(--mod-tab_hotkey_hints-h_margin);
+          bottom: var(--mod-tab_hotkey_hints-v_margin);
+      }
+      @media (-moz-pref("mod.tab_hotkey_hints.position", "botleft")) {
+          left: var(--mod-tab_hotkey_hints-h_margin);
+          bottom: var(--mod-tab_hotkey_hints-v_margin);
+      }
+    }
+  }
+}
+@media not (-moz-pref("mod.tab_hotkey_hints.last_tab")) {
+  zen-workspace[active="true"] .zen-workspace-tabs-section
+  > tab:not([pinned]):not([aria-hidden="true"]):not([folder-active="true"]):nth-last-child(2),
+  zen-workspace[active="true"] tab-group:not(:has(~ tab))
+  tab:not([pinned]):not([aria-hidden="true"]):not([folder-active="true"]):nth-last-child(1) {
+    .tab-content::before {
+      display: none;
+    }
+  }
+}
+
+#tabbrowser-tabs {
+  #zen-essentials tab,
+  zen-workspace[active="true"] .zen-workspace-tabs-section > zen-folder:not([collapsed]) tab[aria-hidden="true"][folder-active="true"]:not([style*="height: 0px"]),
+  zen-workspace[active="true"] .zen-workspace-tabs-section > zen-folder:not([collapsed]) tab:not([aria-hidden="true"]):not([style*="height: 0px"]),
+  zen-workspace[active="true"] .zen-workspace-tabs-section > tab[aria-hidden="true"][folder-active="true"]:not([style*="height: 0px"]),
+  zen-workspace[active="true"] .zen-workspace-tabs-section > tab:not([aria-hidden="true"]):not([style*="height: 0px"]):not([zen-empty-tab="true"]):nth-child(-n+9) {
+    counter-increment: tabcounter;
+  }
+  #zen-essentials tab .tab-content::after,
+  zen-workspace[active="true"] .zen-workspace-tabs-section > zen-folder:not([collapsed]) tab[aria-hidden="true"][folder-active="true"]:not([style*="height: 0px"]) .tab-content::after,
+  zen-workspace[active="true"] .zen-workspace-tabs-section > zen-folder:not([collapsed]) tab:not([aria-hidden="true"]):not([style*="height: 0px"]) .tab-content::after,
+  zen-workspace[active="true"] .zen-workspace-tabs-section > tab[aria-hidden="true"][folder-active="true"]:not([style*="height: 0px"]) .tab-content::after,
+  zen-workspace[active="true"] .zen-workspace-tabs-section > tab:not([aria-hidden="true"]):not([style*="height: 0px"]):nth-child(-n+9) .tab-content::after {
+    content: counter(tabcounter, tabhint);
+    font-size: var(--mod-tab_hotkey_hints-font_size);
+    font-weight: var(--mod-tab_hotkey_hints-font_weight);
+    position: absolute;
+    opacity: var(--mod-tab_hotkey_hints-opacity);
+    color: var(--mod-tab_hotkey_hints-color);
+    text-shadow: var(--mod-tab_hotkey_hints-text_shadow);
+  }
+}
+#tabbrowser-tabs {
+  #zen-essentials .tab-content::after {
+    @media (-moz-pref("mod.tab_hotkey_hints.position_essentials", "topright")) {
+        right: var(--mod-tab_hotkey_hints-h_margin_essentials);
+        top: var(--mod-tab_hotkey_hints-v_margin_essentials);
+    }
+    @media (-moz-pref("mod.tab_hotkey_hints.position_essentials", "topleft")) {
+        left: var(--mod-tab_hotkey_hints-h_margin_essentials);
+        top: var(--mod-tab_hotkey_hints-v_margin_essentials);
+    }
+    @media (-moz-pref("mod.tab_hotkey_hints.position_essentials", "botright")) {
+        right: var(--mod-tab_hotkey_hints-h_margin_essentials);
+        bottom: var(--mod-tab_hotkey_hints-v_margin_essentials);
+    }
+    @media (-moz-pref("mod.tab_hotkey_hints.position_essentials", "botleft")) {
+        left: var(--mod-tab_hotkey_hints-h_margin_essentials);
+        bottom: var(--mod-tab_hotkey_hints-v_margin_essentials);
+    } 
+  }
+  zen-workspace[active="true"] .tab-content::after {
+    @media (-moz-pref("mod.tab_hotkey_hints.position", "topright")) {
+        right: var(--mod-tab_hotkey_hints-h_margin);
+        top: var(--mod-tab_hotkey_hints-v_margin);
+    }
+    @media (-moz-pref("mod.tab_hotkey_hints.position", "topleft")) {
+        left: var(--mod-tab_hotkey_hints-h_margin);
+        top: var(--mod-tab_hotkey_hints-v_margin);
+    }
+    @media (-moz-pref("mod.tab_hotkey_hints.position", "botright")) {
+        right: var(--mod-tab_hotkey_hints-h_margin);
+        bottom: var(--mod-tab_hotkey_hints-v_margin);
+    }
+    @media (-moz-pref("mod.tab_hotkey_hints.position", "botleft")) {
+        left: var(--mod-tab_hotkey_hints-h_margin);
+    }
+  }
+}

themes/81f72fe0-2c90-492f-b916-045521d6dac7/preferences.json

@@ -0,0 +1,125 @@
+[
+    {
+        "property": "mod.tab_hotkey_hints.essentials",
+        "label": "Enabled for Essentials",
+        "type": "checkbox",
+        "defaultValue": true
+    },
+    {
+        "property": "mod.tab_hotkey_hints.last_tab",
+        "label": "Enabled on last tab",
+        "type": "checkbox",
+        "defaultValue": false
+    },
+    {
+        "property": "mod.tab_hotkey_hints.font_size",
+        "label": "Font size",
+        "type": "string",
+        "defaultValue": "0.8em",
+        "placeholder": "0.8em"
+    },
+    {
+        "property": "mod.tab_hotkey_hints.font_weight",
+        "label": "Font weight",
+        "type": "string",
+        "defaultValue": "500",
+        "placeholder": "500"
+    },
+    {
+        "property": "mod.tab_hotkey_hints.opacity",
+        "label": "Opacity",
+        "type": "string",
+        "defaultValue": "1",
+        "placeholder": "0.9"
+    },
+    {
+        "property": "mod.tab_hotkey_hints.color",
+        "label": "Font color",
+        "type": "string",
+        "defaultValue": "inherit",
+        "placeholder": "inherit"
+    },
+    {
+        "property": "mod.tab_hotkey_hints.text_shadow",
+        "label": "Shadow",
+        "type": "string",
+        "defaultValue": "inherit",
+        "placeholder": "0px 0px 3px hsl(from var(--zen-primary-color) h 80 15)"
+    },
+    {
+        "property": "mod.tab_hotkey_hints.position",
+        "label": "Hint position anchor",
+        "type": "dropdown",
+        "defaultValue": "topright",
+        "options": [
+            {
+                "label": "Top right",
+                "value": "topright"
+            },
+            {
+                "label": "Top left",
+                "value": "topleft"
+            },
+            {
+                "label": "Bottom right",
+                "value": "botright"
+            },
+            {
+                "label": "Bottom left",
+                "value": "botleft"
+            }
+        ]
+    },
+    {
+        "property": "mod.tab_hotkey_hints.v_margin",
+        "label": "Vertical margin",
+        "type": "string",
+        "defaultValue": "4px",
+        "placeholder": "4px"
+    },
+    {
+        "property": "mod.tab_hotkey_hints.h_margin",
+        "label": "Horizontal margin",
+        "type": "string",
+        "defaultValue": "8px",
+        "placeholder": "8px"
+    },
+    {
+        "property": "mod.tab_hotkey_hints.position_essentials",
+        "label": "Hint position anchor for essentials",
+        "type": "dropdown",
+        "defaultValue": "topright",
+        "options": [
+            {
+                "label": "Top right",
+                "value": "topright"
+            },
+            {
+                "label": "Top left",
+                "value": "topleft"
+            },
+            {
+                "label": "Bottom right",
+                "value": "botright"
+            },
+            {
+                "label": "Bottom left",
+                "value": "botleft"
+            }
+        ]
+    },
+    {
+        "property": "mod.tab_hotkey_hints.v_margin_essentials",
+        "label": "Vertical margin for essentials",
+        "type": "string",
+        "defaultValue": "4px",
+        "placeholder": "4px"
+    },
+    {
+        "property": "mod.tab_hotkey_hints.h_margin_essentials",
+        "label": "Horizontal margin for essentials",
+        "type": "string",
+        "defaultValue": "8px",
+        "placeholder": "8px"
+    }
+]

themes/81f72fe0-2c90-492f-b916-045521d6dac7/readme.md

@@ -0,0 +1,20 @@
+
+# Tab Hotkey Indicators
+
+Adds number hints to tabs so you always know which hotkey to press.
+
+- Adds a number on the ten tabs that have hotkey available (Ctrl+number by default)
+- Choose number style
+    * size
+    * font weight
+    * shadow
+    * opacity
+- Choose number position
+- Toggle for Essentials & last tab
+
+There is a measurable but unnoticeable performance impact to using this mod if you have VERY many tabs in the pinned section. Tested n=1000.
+
+Known issues:
+ * Collapsed sidebar has issues
+ * Last tab hint displays over other hints when tab count is small
+ * Subfolders

themes/81f72fe0-2c90-492f-b916-045521d6dac7/theme.json

@@ -0,0 +1,15 @@
+{
+    "id": "81f72fe0-2c90-492f-b916-045521d6dac7",
+    "name": "Tab Hotkey Indicators",
+    "description": "Adds numbers on tabs to hint to its shortcut key",
+    "homepage": "https://github.com/ramla/zen-mods/tree/master/tabhotkeyindicators",
+    "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/81f72fe0-2c90-492f-b916-045521d6dac7/chrome.css",
+    "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/81f72fe0-2c90-492f-b916-045521d6dac7/readme.md",
+    "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/81f72fe0-2c90-492f-b916-045521d6dac7/image.png",
+    "author": "ramla",
+    "version": "1.0.0",
+    "tags": [],
+    "createdAt": "2026-07-16",
+    "updatedAt": "2026-07-16",
+    "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/81f72fe0-2c90-492f-b916-045521d6dac7/preferences.json"
+}