Customization
Glide provides extensive customization options through TypeScript configuration. This guide covers appearance, behavior, and preference management.
CSS Customization
Styles API
Add custom CSS to the browser UI using glide.styles:
glide.styles.add(css`
#TabsToolbar {
visibility: collapse !important;
}
`);
css template tag is optional but provides syntax highlighting in editors.
Managing Styles
Add styles with an ID for later removal:
glide.styles.add(css`
#nav-bar {
background: #1a1a1a !important;
}
`, { id: 'dark-navbar' });
// Later, remove the styles
glide.styles.remove('dark-navbar');
if (glide.styles.has('dark-navbar')) {
console.log('Dark navbar is active');
}
const css = glide.styles.get('dark-navbar');
console.log(css);
Overwriting Styles
By default, adding styles with a duplicate ID throws an error:
glide.styles.add(css`...`, { id: 'theme' });
// This will throw an error
glide.styles.add(css`...`, { id: 'theme' });
overwrite option to replace existing styles:
glide.styles.add(css`
/* New styles */
`, { id: 'theme', overwrite: true });
Common Customizations
Hide Tab Bar
glide.styles.add(css`
#TabsToolbar {
visibility: collapse !important;
}
`);
Auto-hide Tab Bar
glide.o.native_tabs = "autohide";
glide.styles.add(css`
:root {
--uc-tab-collapsed-width: 2px;
}
`);
Custom Colors
glide.styles.add(css`
:root {
--toolbar-bgcolor: #2d2d2d !important;
--toolbar-color: #ffffff !important;
}
#nav-bar {
background-color: var(--toolbar-bgcolor) !important;
}
`);
Focus Indicators
glide.styles.add(css`
:focus-visible {
outline: 2px solid #0066cc !important;
outline-offset: 2px !important;
}
`);
Behavior Options
Global Options
Configure global behavior with glide.o:
// Mapping timeout for insert mode
glide.o.mapping_timeout = 200; // milliseconds
// Which-key popup delay
glide.o.which_key_delay = 300; // milliseconds
// Yank highlight settings
glide.o.yank_highlight = "#ff6b35";
glide.o.yank_highlight_time = 150; // milliseconds
// Jumplist configuration
glide.o.jumplist_max_entries = 100;
// Mode switching on focus
glide.o.switch_mode_on_focus = true;
// Scroll implementation
glide.o.scroll_implementation = "keys"; // or "legacy"
// Native tabs behavior
glide.o.native_tabs = "show"; // "hide" | "autohide"
// New tab URL
glide.o.newtab_url = "about:newtab";
Buffer-Specific Options
Set options for the current buffer only:
glide.autocmds.create("UrlEnter", { hostname: "example.com" }, () => {
glide.bo.mapping_timeout = 500; // Only for this buffer
});
const timeout = glide.options.get("mapping_timeout");
Custom Options
Define your own options with type safety:
declare global {
interface GlideOptions {
my_custom_option?: boolean;
theme_variant?: "light" | "dark";
}
}
glide.o.my_custom_option = true;
glide.o.theme_variant = "dark";
Preferences (about:config)
Manage Firefox preferences from your config:
// Set preferences
glide.prefs.set("browser.startup.homepage", "https://example.com");
glide.prefs.set("privacy.resistFingerprinting", true);
glide.prefs.set("browser.tabs.loadInBackground", false);
// Get preference values
const homepage = glide.prefs.get("browser.startup.homepage");
// Reset to default
glide.prefs.clear("browser.startup.homepage");
Preferences should be set at the top level of your config. Setting them in callbacks may not apply correctly. Some preferences require a restart to take effect.
Buffer-Specific Preferences
Set preferences for specific buffers:
glide.autocmds.create("UrlEnter", { hostname: "example.com" }, () => {
glide.buf.prefs.set("privacy.resistFingerprinting", false);
// Automatically reset when navigating away
});
Scoped Preferences
Temporarily set preferences using the using keyword:
{
using prefs = glide.prefs.scoped();
prefs.set("foo", true);
// foo is true inside this block
}
// foo is reset to previous value outside the block
Hints Customization
Hint Appearance
// Font size
glide.o.hint_size = "11px";
// Character set for labels
glide.o.hint_chars = "hjklasdfgyuiopqwertnmzxcvb";
Label Generator
Customize hint label generation:
// Use numeric labels
glide.o.hint_label_generator = glide.hints.label_generators.numeric;
// Custom generator
glide.o.hint_label_generator = ({ hints }) => {
return Array.from({ length: hints.length }, (_, i) => String(i + 1));
};
Page-Specific Patterns
Configure next/previous page detection:
glide.o.go_next_patterns = [
"next", "more", "newer", ">", "›", "→", "»", "≫", ">>"
];
glide.o.go_previous_patterns = [
"prev", "previous", "back", "older", "<", "‹", "←", "«", "≪", "<<"
];
Keyboard Layout
Physical Layout Support
Use physical key codes for consistent mappings across keyboard layouts:
glide.o.keyboard_layout = "qwerty";
glide.o.keymaps_use_physical_layout = "force";
keymaps_use_physical_layout:
"never" - Always use event.key (default for non-macOS)"force" - Always use event.code"for_macos_option_modifier" - Use event.code only with Option key on macOS
Custom Keyboard Layouts
Define your own keyboard layout:
declare global {
interface GlideKeyboardLayouts {
dvorak: GlideKeyboardLayout;
}
}
glide.o.keyboard_layouts.dvorak = {
Minus: ["[", "{"],
Equal: ["]", "}"],
// ... more mappings
};
glide.o.keyboard_layout = "dvorak";
Theme Customization
Browser Theme
Change the browser theme using the WebExtensions API:
glide.keymaps.set("normal", "<leader>td", async () => {
await browser.theme.update({
colors: {
frame: "#1a1a1a",
tab_background_text: "#ffffff",
toolbar: "#2d2d2d",
toolbar_text: "#ffffff",
}
});
});
await browser.theme.reset();
Global Variables
Store custom data in glide.g with type safety:
declare global {
interface GlideGlobals {
my_data?: string[];
theme_mode?: "light" | "dark";
}
}
glide.g.my_data = ["foo", "bar"];
glide.g.theme_mode = "dark";
Leader Key
Configure the leader key:
glide.g.mapleader = "<Space>"; // default
glide.keymaps.set("normal", "<leader>r", "config_reload");
Site-Specific Customization
Apply customizations for specific websites:
glide.autocmds.create("UrlEnter", { hostname: "github.com" }, () => {
// Custom styles for GitHub
glide.styles.add(css`
.Header {
background: #1a1a1a !important;
}
`, { id: 'github-dark' });
// Custom keymaps
glide.buf.keymaps.set("normal", "<leader>gi", async () => {
const url = glide.ctx.url;
const parts = url.pathname.split("/").filter(Boolean);
url.pathname = `/${parts[0]}/${parts[1]}/issues`;
await browser.tabs.update({ url: url.toString() });
});
// Cleanup on navigation away
return () => {
glide.styles.remove('github-dark');
};
});
Advanced Patterns
Dynamic Themes
Switch between themes:
declare global {
interface GlideGlobals {
current_theme?: "light" | "dark";
}
}
function apply_theme(theme: "light" | "dark") {
glide.g.current_theme = theme;
if (theme === "dark") {
glide.styles.add(css`
:root {
--toolbar-bgcolor: #1a1a1a !important;
--toolbar-color: #ffffff !important;
}
`, { id: 'theme', overwrite: true });
} else {
glide.styles.add(css`
:root {
--toolbar-bgcolor: #f5f5f5 !important;
--toolbar-color: #000000 !important;
}
`, { id: 'theme', overwrite: true });
}
}
glide.keymaps.set("normal", "<leader>tt", () => {
const current = glide.g.current_theme ?? "light";
apply_theme(current === "light" ? "dark" : "light");
});
apply_theme("dark");
Conditional Configuration
Apply settings based on OS:
if (glide.ctx.os === "macosx") {
glide.o.keymaps_use_physical_layout = "for_macos_option_modifier";
} else {
glide.o.keymaps_use_physical_layout = "force";
}
Loading External Stylesheets
glide.autocmds.create("ConfigLoaded", async () => {
try {
const css_content = await glide.fs.read("custom.css", "utf8");
glide.styles.add(css_content, { id: 'external-styles' });
} catch (err) {
console.warn("Could not load custom.css:", err);
}
});
Use the Browser Toolbox to inspect the browser UI and identify element selectors for styling. Excessive CSS styles can impact browser performance. Remove unused styles with glide.styles.remove() when they’re no longer needed.
See Also