Skip to main content

Documentation Index

Fetch the complete documentation index at: https://urzeye.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

Ophel gives you full control over how the panel looks. Appearance and theme settings — theme preview and switcher From a quick mode toggle to a palette of 24 built-in presets and an open CSS editor for pixel-level customization. All changes apply instantly without reloading the page.

​
Light, dark, and system mode

Ophel supports three color modes:
  • Light — always use a light theme
  • Dark — always use a dark theme
  • System — automatically match your operating system preference
How to switch modes:
Press Alt+D (Mac: Option+D) to cycle between light and dark mode.

​
Sync native page colors

When this option is enabled, Ophel also adjusts some native element colors on the AI platform page to match the current light or dark mode — for example, input fields and scrollbars that the platform exposes as themeable. This works only on supported sites. Setting: Settings → Appearance → Sync Native Page Colors (enabled by default)
The site’s light/dark mode always follows Ophel’s active mode. This setting controls only the additional adjustment of native element colors on the page — disable it if you notice visual conflicts on a particular site.

​
Built-in theme presets

Each mode comes with 12 presets. Click any preset card in Settings → Appearance to preview and apply it — the transition uses a radial animation that expands from the point you clicked.
NameDescription
Google Gradient (default)Clean white with a blue-green gradient header
VioletSoft purple accent palette
Ocean BlueCalm sea-blue tones
SakuraDelicate pink blossom palette
MintFresh mint-green highlights
Nordic FrostCool Nordic minimalism
Lemon SodaCheerful yellow-citrus palette
Ancient ScrollWarm parchment and sepia tones
Mono ProMinimal black-and-white typography
Blue-and-White PorcelainClassic Chinese porcelain blue
ShortbreadWarm cream and biscuit tones
Unicorn DreamPastel gradient dream theme

​
Choosing a theme

  1. Open Settings (Alt+,, Mac: Option+,)
  2. Go to Appearance
  3. Select Light or Dark from the mode tabs
  4. Click any preset card to preview and apply it

​
Custom CSS

For complete control over the panel’s appearance, go to Settings → Appearance → Custom CSS and write your own CSS rules. The panel runs inside a Shadow DOM, which means your custom CSS is isolated from the AI platform’s page styles — your rules only affect the Ophel panel, nothing else on the page. The panel’s built-in styles use CSS variables prefixed with --gh-. Override any of them inside a :host block: 
:host {
  --gh-bg: #1a1a2e;
  --gh-primary: #e94560;
  --gh-text: #eaeaea;
}
Changes to custom CSS apply instantly. You do not need to reload the page or restart the extension.

​
Key CSS variables

VariableControls
--gh-bgMain panel background
--gh-bg-secondarySecondary background (sidebars, alternating rows)
--gh-textPrimary text color
--gh-text-secondaryMuted text color
--gh-primaryAccent / active color (buttons, highlights)
--gh-borderBorder color
--gh-shadowPanel drop shadow
--gh-header-bgPanel header background (supports gradients)
--gh-dangerDelete / destructive action color
--gh-hoverRow hover background
--gh-header-bg accepts any valid CSS value, including linear-gradient(...). Use it to give the panel header a custom gradient that matches your preferred aesthetic.
Last modified on May 7, 2026