Hermes Agent Theme Override

hermes-agent-usability.user.js

// ==UserScript==
// @name         Hermes Agent Theme Override
// @namespace    local.hermes.theme-override
// @version      2.0.0
// @description  Overrides Hermes Agent's teal/cream theme tokens with a usable dark theme
// @match        http://127.0.0.1:9119/*
// @match        http://localhost:9119/*
// @run-at       document-start
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  const css = `
    :root {
      color-scheme: dark !important;

      /* Hermes / Nous design-system tokens */
      --background-base: #0b0f14 !important;
      --background: #0b0f14 !important;
      --background-alpha: 1 !important;

      --midground-base: #e5e7eb !important;
      --midground: #e5e7eb !important;
      --midground-alpha: 1 !important;

      --foreground-base: #f9fafb !important;
      --foreground: #f9fafb !important;
      --foreground-alpha: 1 !important;

      --warm-glow: transparent !important;
      --noise-opacity-mul: 0 !important;
      --theme-asset-bg: none !important;

      --component-backdrop-filler-opacity: 0 !important;
      --component-backdrop-filler-blend-mode: normal !important;

      /* shadcn/Tailwind compatibility tokens */
      --color-background: #0b0f14 !important;
      --color-foreground: #f9fafb !important;
      --color-card: #111827 !important;
      --color-card-foreground: #f9fafb !important;
      --color-popover: #111827 !important;
      --color-popover-foreground: #f9fafb !important;
      --color-primary: #93c5fd !important;
      --color-primary-foreground: #0b0f14 !important;
      --color-secondary: #1f2937 !important;
      --color-secondary-foreground: #f9fafb !important;
      --color-muted: #1f2937 !important;
      --color-muted-foreground: #cbd5e1 !important;
      --color-accent: #1f2937 !important;
      --color-accent-foreground: #f9fafb !important;
      --color-border: rgba(255, 255, 255, 0.16) !important;
      --color-input: rgba(255, 255, 255, 0.18) !important;
      --color-ring: #93c5fd !important;
    }

    html,
    body,
    #root,
    #app {
      background: #0b0f14 !important;
      color: #f9fafb !important;
      text-shadow: none !important;
    }

    * {
      text-shadow: none !important;
    }

    body::before,
    body::after,
    html::before,
    html::after,
    .theme-default-filler {
      display: none !important;
    }

    /* Disable decorative backdrop layers while keeping app content intact */
    [style*="mix-blend-mode"],
    [style*="color-dodge"],
    [style*="lighten"],
    [style*="difference"] {
      mix-blend-mode: normal !important;
      background-image: none !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    body {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
      font-size: 16px !important;
      line-height: 1.55 !important;
      letter-spacing: 0 !important;
      font-weight: 400 !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
      font-weight: 650 !important;
      letter-spacing: 0.02em !important;
      color: #f9fafb !important;
      text-transform: none !important;
    }

    h1 {
      font-size: 22px !important;
      line-height: 1.25 !important;
      margin-bottom: 16px !important;
    }

    h2 {
      font-size: 19px !important;
      line-height: 1.3 !important;
    }

    h3,
    h4,
    h5,
    h6 {
      font-size: 17px !important;
      line-height: 1.35 !important;
    }

    p,
    span,
    div,
    li,
    td,
    th,
    label {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
      letter-spacing: 0 !important;
      line-height: 1.5 !important;
    }

    small,
    time,
    .text-xs,
    .text-sm,
    [class*="text-xs"],
    [class*="text-sm"],
    [class*="text-[10"],
    [class*="text-[11"],
    [class*="text-[12"],
    [class*="text-[13"] {
      font-size: 15px !important;
      line-height: 1.55 !important;
      color: #cbd5e1 !important;
      letter-spacing: 0 !important;
    }

    [class*="uppercase"],
    .uppercase,
    [style*="text-transform"],
    [class*="tracking"] {
      text-transform: none !important;
      letter-spacing: 0.01em !important;
    }

    * {
      text-transform: none !important;
    }

    a {
      color: #93c5fd !important;
      text-decoration-thickness: 1px !important;
      text-underline-offset: 3px !important;
    }

    /* Scheduled job cards */
    main article,
    main section > div,
    [role="main"] article,
    [role="main"] section > div {
      border-color: rgba(255, 255, 255, 0.16) !important;
    }

    /* Job titles */
    main article h1,
    main article h2,
    main article h3,
    main article h4,
    main section h1,
    main section h2,
    main section h3,
    main section h4 {
      font-size: 16px !important;
      font-weight: 650 !important;
      letter-spacing: 0.01em !important;
    }

    /* Reduce unreadable terminal styling */
    [class*="tracking"],
    [style*="letter-spacing"] {
      letter-spacing: 0.01em !important;
    }

    .text-sm,
    [class*="text-sm"] {
      font-size: 15px !important;
      line-height: 1.55 !important;
    }

    /* Status pills stay compact but readable */
    [class*="border"] span,
    button span,
    a span {
      line-height: 1.25 !important;
    }

    button,
    input,
    textarea,
    select {
      background-color: #111827 !important;
      color: #f9fafb !important;
      border-color: rgba(255, 255, 255, 0.18) !important;
    }

    pre,
    code {
      background-color: #111827 !important;
      color: #f9fafb !important;
    }
  `;

  function inject() {
    const existing = document.getElementById('hermes-theme-override');
    if (existing) existing.remove();

    const style = document.createElement('style');
    style.id = 'hermes-theme-override';
    style.textContent = css;
    document.documentElement.appendChild(style);
  }

  inject();
  window.addEventListener('DOMContentLoaded', inject);
})();