✨ feat(browser): surfing keys theme update; now uses catppuccin macchiato

.config/browser/surfing-keys/surfingkeys.js

@@ -1,3 +1,29 @@
+// Compatibility Prefix
+const {
+  Clipboard,
+  Front,
+  Hints,
+  Normal,
+  RUNTIME,
+  Visual,
+  aceVimMap,
+  addSearchAlias,
+  cmap,
+  getClickableElements,
+  imap,
+  imapkey,
+  iunmap,
+  map,
+  mapkey,
+  readText,
+  removeSearchAlias,
+  tabOpenLink,
+  unmap,
+  unmapAllExcept,
+  vmapkey,
+  vunmap,
+} = api;
+
 // an example to create a new mapping `ctrl-y`
 api.mapkey("<ctrl-y>", "Show me the money", function () {
   Front.showPopup(
@@ -5,6 +31,15 @@ api.mapkey("<ctrl-y>", "Show me the money", function () {
   );
 });
 
+// toggle fullscreen, mainly because of YouTube
+mapkey("F", "Fullscreen", function () {
+  if (window.fullScreen) {
+    document.exitFullscreen();
+  } else {
+    document.documentElement.requestFullscreen();
+  }
+});
+
 // an example to replace `T` with `gt`, click `Default mappings` to see how `T` works.
 api.map("gt", "T");
 
@@ -12,41 +47,250 @@ api.map("gt", "T");
 api.unmap("<ctrl-i>");
 
 // set theme
+Hints.style(
+  "border: solid 2px #6e738d; color:#c6a0f6; font-size: 12px; background: initial; background-color: #1e2030;",
+);
+Hints.style(
+  "border: solid 2px #6e738d !important; padding: 1px !important; color: #939ab7 !important; background: #181926 !important;",
+  "text",
+);
+Visual.style("marks", "background-color: #ed8796;");
+Visual.style("cursor", "background-color: #8aadf4;");
+
 settings.theme = `
+/* Edit these variables for easy theme making */
+:root {
+  /* Font */
+  --font: 'JetBrainsMono Nerd Font';
+  --font-size: 12;
+  --font-weight: bold;
+  
+  --fg: #cad3f5;
+  --bg: #24273a;
+  --bg-dark: #1e2030;
+  --border: #6e738d;
+  --main-fg: #cad3f5;
+  --accent-fg: #b7bdf8;
+  --info-fg: #ed8796;
+  --select: #494d64;
+}
+
+/* ---------- Generic ---------- */
 .sk_theme {
-    font-family: JetBrainsMono Nerd Font;
+background: var(--bg);
-    font-size: 10pt;
+color: var(--fg);
-    background: #24273a;
+  background-color: var(--bg);
-    color: #cad3f5;
+  border-color: var(--border);
+  font-family: var(--font);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
 }
+
+input {
+  font-family: var(--font);
+  font-weight: var(--font-weight);
+}
+
 .sk_theme tbody {
-    color: #cad3f5;
+  color: var(--fg);
 }
+
 .sk_theme input {
-    color: #d0d0d0;
+  color: var(--fg);
 }
+
+/* Hints */
+#sk_hints .begin {
+  color: var(--accent-fg) !important;
+}
+
+#sk_tabs .sk_tab {
+  background: var(--bg-dark);
+  border: 1px solid var(--border);
+}
+
+#sk_tabs .sk_tab_title {
+  color: var(--fg);
+}
+
+#sk_tabs .sk_tab_url {
+  color: var(--main-fg);
+}
+
+#sk_tabs .sk_tab_hint {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--accent-fg);
+}
+
+.sk_theme #sk_frame {
+  background: var(--bg);
+  opacity: 0.2;
+  color: var(--accent-fg);
+}
+
+/* ---------- Omnibar ---------- */
+/* Uncomment this and use settings.omnibarPosition = 'bottom' for Pentadactyl/Tridactyl style bottom bar */
+/* .sk_theme#sk_omnibar {
+  width: 100%;
+  left: 0;
+} */
+
+.sk_theme .title {
+  color: var(--accent-fg);
+}
+
 .sk_theme .url {
-    color: #61afef;
+  color: var(--main-fg);
 }
+
 .sk_theme .annotation {
-    color: #56b6c2;
+  color: var(--accent-fg);
 }
+
 .sk_theme .omnibar_highlight {
-    color: #528bff;
+  color: var(--accent-fg);
 }
+
 .sk_theme .omnibar_timestamp {
-    color: #e5c07b;
+  color: var(--info-fg);
 }
+
 .sk_theme .omnibar_visitcount {
-    color: #98c379;
+  color: var(--accent-fg);
 }
+
 .sk_theme #sk_omnibarSearchResult ul li:nth-child(odd) {
-    background: #303030;
+  background: var(--bg-dark);
 }
+
 .sk_theme #sk_omnibarSearchResult ul li.focused {
-    background: #3e4452;
+  background: var(--border);
 }
-#sk_status, #sk_find {
+
-    font-size: 20pt;
+.sk_theme #sk_omnibarSearchArea {
-}`;
+  border-top-color: var(--border);
-// click `Save` button to make above settings to take effect.</ctrl-i></ctrl-y>
+  border-bottom-color: var(--border);
+}
+
+.sk_theme #sk_omnibarSearchArea input,
+.sk_theme #sk_omnibarSearchArea span {
+  font-size: var(--font-size);
+}
+
+.sk_theme .separator {
+  color: var(--accent-fg);
+}
+
+/* ---------- Popup Notification Banner ---------- */
+#sk_banner {
+  font-family: var(--font);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  background: var(--bg);
+  border-color: var(--border);
+  color: var(--fg);
+  opacity: 0.9;
+}
+
+/* ---------- Popup Keys ---------- */
+#sk_keystroke {
+  background-color: var(--bg);
+}
+
+.sk_theme kbd .candidates {
+  color: var(--info-fg);
+}
+
+.sk_theme span.annotation {
+  color: var(--accent-fg);
+}
+
+/* ---------- Popup Translation Bubble ---------- */
+#sk_bubble {
+  background-color: var(--bg) !important;
+  color: var(--fg) !important;
+  border-color: var(--border) !important;
+}
+
+#sk_bubble * {
+  color: var(--fg) !important;
+}
+
+#sk_bubble div.sk_arrow div:nth-of-type(1) {
+  border-top-color: var(--border) !important;
+  border-bottom-color: var(--border) !important;
+}
+
+#sk_bubble div.sk_arrow div:nth-of-type(2) {
+  border-top-color: var(--bg) !important;
+  border-bottom-color: var(--bg) !important;
+}
+
+/* ---------- Search ---------- */
+#sk_status,
+#sk_find {
+  font-size: var(--font-size);
+  border-color: var(--border);
+}
+
+.sk_theme kbd {
+  background: var(--bg-dark);
+  border-color: var(--border);
+  box-shadow: none;
+  color: var(--fg);
+}
+
+.sk_theme .feature_name span {
+  color: var(--main-fg);
+}
+
+/* ---------- ACE Editor ---------- */
+#sk_editor {
+  background: var(--bg-dark) !important;
+  height: 50% !important;
+  /* Remove this to restore the default editor size */
+}
+
+.ace_dialog-bottom {
+  border-top: 1px solid var(--bg) !important;
+}
+
+.ace-chrome .ace_print-margin,
+.ace_gutter,
+.ace_gutter-cell,
+.ace_dialog {
+  background: var(--bg) !important;
+}
+
+.ace-chrome {
+  color: var(--fg) !important;
+}
+
+.ace_gutter,
+.ace_dialog {
+  color: var(--fg) !important;
+}
+
+.ace_cursor {
+  color: var(--fg) !important;
+}
+
+.normal-mode .ace_cursor {
+  background-color: var(--fg) !important;
+  border: var(--fg) !important;
+  opacity: 0.7 !important;
+}
+
+.ace_marker-layer .ace_selection {
+  background: var(--select) !important;
+}
+
+.ace_editor,
+.ace_dialog span,
+.ace_dialog input {
+  font-family: var(--font);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+}
+`;