Grok Catppuccin Mocha Sapphire

ublock.filter

! Oct 24, 2025 https://grok.com
grok.com##.py-1.justify-center.flex.h-subheader-height.duration-200.transition-\[width\,transform\,opacity\].shrink-0.px-1\.5.flex-col.min-w-0.w-full.relative
grok.com##.py-2\.5.px-3.data-\[disabled\]\:pointer-events-auto.data-\[disabled\]\:opacity-100.cursor-pointer.p-0.bg-surface-l3.border-border-l2.border-2.rounded-2xl.items-start.flex-col.flex.mb-1.relative.group\/model-mode-select-upsell.aria-disabled\:cursor-not-allowed.aria-disabled\:opacity-50.focus\:bg-button-ghost-hover.outline-none.text-sm.select-none
grok.com##.pr-2.opacity-75.text-secondary.items-center.flex-row.flex.ps-2\.5.py-1\.5.rounded-xl.select-none.cursor-pointer.aria-disabled\:cursor-not-allowed.aria-disabled\:opacity-50.focus\:bg-button-ghost-hover.outline-none.text-sm.px-3.relative
grok.com##div.aria-disabled\:cursor-not-allowed.aria-disabled\:opacity-50.focus\:bg-button-ghost-hover.outline-none.text-sm.rounded-xl.py-2.px-3.cursor-pointer.items-center.select-none.flex.relative:nth-of-type(5)
grok.com##div.px-3.gap-4.w-full.justify-between.items-center.flex-row.flex:nth-of-type(3)
grok.com##.w-full.h-full.aspect-square
grok.com##.items-center.justify-center.\@sm\:gap-2.gap-2.w-full.flex-wrap.flex-row.flex

userstyle.css

/* ==UserStyle==
@name           Grok
@namespace      userstyles.fptbb.grok
@version        1.0.0
@description    Just grok but with pastel cats.
@author         fptbb
==/UserStyle== */

:root {
  --rosewater: 9 55% 91%;
  --flamingo: 0 58% 87%;
  --pink: 316 71% 86%;
  --mauve: 267 83% 80%;
  --red: 343 81% 74%;
  --maroon: 350 65% 77%;
  --peach: 22 92% 75%;
  --yellow: 41 86% 83%;
  --green: 115 54% 76%;
  --teal: 170 57% 73%;
  --sky: 189 71% 72%;
  --sapphire: 198 75% 69%;
  --blue: 217 91% 75%;
  --lavender: 231 97% 85%;
  --text: 226 63% 88%;
  --subtext1: 226 35% 80%;
  --subtext0: 227 23% 71%;
  --overlay2: 228 16% 63%;
  --overlay1: 229 12% 55%;
  --overlay0: 230 10% 47%;
  --surface2: 232 12% 39%;
  --surface1: 234 13% 31%;
  --surface0: 236 16% 22%;
  --base: 240 21% 14%;
  --mantle: 240 21% 11%;
  --crust: 240 22% 8%;
}

canvas {
  display: none !important;
}

.hover\:scale-\[1\.01\].dark.gap-4.flex.text-left.group.rounded-3xl.min-\[384px\]\:min-w-52.min-\[384px\]\:w-max.border-card.cursor-pointer.border.text-white.text-xs.bg-black.w-\[calc\(100\%-16px\)\].items-center.py-4.px-5.sm\:right-2.sm\:bottom-2.sm\:fixed.relative.upsell-small {
  display: none !important;
}
.will-change-transform.hover\:scale-\[1\.01\].ease-in-out.duration-300.transition-all.sm\:-mb-4.-mb-10.dark.gap-4.flex.text-left.group.rounded-3xl.border-card.cursor-pointer.border.text-white.text-xs.bg-black.items-center.w-full.py-3\.5.px-4.relative {
  display: none !important;
}

.dark {
  color-scheme: dark;

  /* Neutral scale based on Catppuccin */
  --neutral-50: 226 63% 88%;
  --neutral-100: 226 35% 80%;
  --neutral-200: 227 23% 71%;
  --neutral-300: 228 16% 63%;
  --neutral-400: 229 12% 55%;
  --neutral-500: 230 10% 47%;
  --neutral-600: 232 12% 39%;
  --neutral-700: 234 13% 31%;
  --neutral-800: 236 16% 22%;
  --neutral-900: 240 21% 11%;
  --neutral-950: 240 21% 14%;
  --neutral-1000: 240 22% 8%;

  /* Gray scale matching neutral */
  --gray-50: 226 63% 88%;
  --gray-100: 226 35% 80%;
  --gray-200: 227 23% 71%;
  --gray-300: 228 16% 63%;
  --gray-400: 229 12% 55%;
  --gray-500: 230 10% 47%;
  --gray-600: 232 12% 39%;
  --gray-700: 234 13% 31%;
  --gray-800: 236 16% 22%;
  --gray-900: 240 21% 11%;
  --gray-950: 240 21% 14%;
  --gray-1000: 240 22% 8%;

  /* Core theme variables */
  --white: 226 63% 88%;
  --black: 240 22% 8%;
  --surface-inset: 240 22% 8%;
  --surface-base: 240 21% 14%;
  --surface-l1: 240 21% 11%;
  --surface-l1-hover: 236 16% 22%;
  --surface-l2: 236 16% 22%;
  --surface-l3: 234 13% 31%;
  --surface-l4: 232 12% 39%;
  --surface-l4-hover: 232 12% 39%;
  --surface-invert: 226 63% 88%;
  --overlay: hsla(240 21% 14% / 50%);
  --popover: 234 13% 31% !important;
  --button-filled: 226 63% 88%;
  --button-filled-hover: 226 35% 80%;
  --button-filled-active: 227 23% 71%;
  --button-ghost-hover: hsla(226 63% 88% / 8%);
  --button-ghost-active: hsla(226 63% 88% / 10%);
  --border-l1: hsla(226 63% 88% / 8%);
  --border-l2: hsla(226 63% 88% / 14%);
  --border-l3: hsla(226 63% 88% / 20%);
  --ring: 198 75% 69%;
  --fg-primary: 226 63% 88%;
  --fg-secondary: 226 35% 80%;
  --fg-tertiary: 227 23% 71%;
  --fg-invert: 217 92% 76%;
  --fg-danger: 343 81% 74%;
  --fg-positive: 170 57% 73%;

  /* Input styles */
  --input-background: 236 16% 22%;
  --input-background-hover: 234 13% 31%;
  --input-button-background: 236 16% 22%;
  --input-button-background-hover: 234 13% 31%;
  --input-button-background-selected: 232 12% 39%;
  --input-button-border: 230 10% 47%;
  --input-button-border-hover: 229 12% 55%;

  /* Incognito (tinted with mauve for variety) */
  --incognito: 267 20% 15%;
  --incognito-input-background: hsla(267 20% 15% / 80%);
  --incognito-input-background-hover: hsla(267 20% 15% / 85%);
  --incognito-input-button-background: hsla(267 20% 15% / 80%);
  --incognito-input-button-background-hover: hsla(267 20% 15% / 85%);
  --incognito-input-button-background-selected: hsla(267 20% 15% / 90%);
  --incognito-input-button-border: hsla(267 20% 15% / 60%);
  --incognito-input-button-border-hover: hsla(267 20% 15% / 70%);

  /* Background and foreground */
  --background-color: 240 21% 14%;
  --background: 240 21% 14%;
  --background-secondary: 240 21% 11%;
  --foreground: 226 63% 88%;
  --highlight: hsla(228 16% 63% / 30%);
  --gradient: hsla(229 12% 55% / 10%);
  --gradient-bg: 236 16% 22%;
  --important: 230 10% 47%;
  --important-hover: 229 12% 55%;

  /* Button styles */
  --button-primary: hsla(198 75% 69% / 90%);
  --button-primary-hover: 198 75% 69%;
  --button-secondary: hsla(230 10% 47% / 12%);
  --button-secondary-hover: hsla(230 10% 47% / 20%);
  --button-secondary-selected: hsla(230 10% 47% / 30%);
  --button-text-hover: hsla(228 16% 63% / 8%);
  --button-outline-border: hsla(228 16% 63% / 8%);

  /* Input and interactive elements */
  --input: 226 63% 88%;
  --input-glow: hsla(229 12% 55% / 20%);
  --input-border: hsla(228 16% 63% / 4%);
  --input-hover: 226 63% 88%;
  --input-border-focus: hsla(226 63% 88% / 16%);
  --input-foreground-hover: 227 23% 71%;
  --toggle-border: hsla(226 63% 88% / 9%);
  --toggle-hover: hsla(226 63% 88% / 6%);
  --toggle-selected: hsla(226 63% 88% / 24%);
  --toggle-disabled: hsla(226 63% 88% / 8%);
  --popover-border: hsla(228 16% 63% / 4%);
  --popover-hover: hsla(228 16% 63% / 4%);
  --card: hsla(228 16% 63% / 8%);
  --card-hover: hsla(228 16% 63% / 6%);
  --card-focus: hsla(228 16% 63% / 14%);
  --card-border: hsla(228 16% 63% / 4%);
  --card-border-focus: hsla(228 16% 63% / 4%);
  --chip: hsla(228 16% 63% / 5%);
  --link: 217 91% 75%;
  --link-hover: 198 75% 69%;

  /* Primary and secondary */
  --primary: 198 75% 69%;
  --secondary: 231 97% 85%;

  /* Incognito details */
  --input-incognito: hsla(267 20% 15% / 4%);
  --input-glow-incognito: hsla(267 20% 15% / 25%);
  --input-border-incognito: hsla(267 20% 15% / 35%);
  --input-hover-incognito: hsla(267 20% 15% / 7%);
  --input-border-focus-incognito: hsla(267 20% 15% / 55%);
  --border-incognito: 267 20% 15%;
  --ring-incognito: 267 20% 15%;

  /* Shadcn/UI variables */
  --card-foreground: 226 63% 88%;
  --popover-foreground: 226 63% 88%;
  --primary-foreground: 240 21% 14%;
  --secondary-foreground: 226 63% 88%;
  --muted: 240 21% 11%;
  --muted-foreground: 228 16% 63%;
  --accent: 236 16% 22%;
  --accent-foreground: 226 63% 88%;
  --destructive: 343 81% 74%;
  --destructive-foreground: 226 63% 88%;
  --border: hsla(230 10% 47% / 50%);
  --chart-1: 198 75% 69%;
  --chart-2: 22 92% 75%;
  --chart-3: 115 54% 76%;
  --chart-4: 267 83% 80%;
  --chart-5: 41 86% 83%;
  --sidebar-foreground: 226 35% 80%;
  --sidebar-primary: 198 75% 69%;
  --sidebar-primary-foreground: 226 63% 88%;
  --sidebar-accent: 236 16% 22%;
  --sidebar-accent-foreground: 226 35% 80%;
  --sidebar-border: hsla(230 10% 47% / 50%);
  --sidebar-ring: 198 75% 69%;

  /* Custom app colors themed */
  --color-jet: 240 22% 8%;
  --color-umbra: 240 21% 11%;
  --color-ink: 240 21% 14%;
  --color-ash: 236 16% 22%;
  --color-iron: 234 13% 31%;
  --color-steel: 232 12% 39%;
  --color-tin: 230 10% 47%;
  --color-fog: 229 12% 55%;
  --color-silver: 228 16% 63%;
  --color-pewter: 226 63% 88%;
  --color-dove: 227 23% 71%;
  --color-nimbus: 226 35% 80%;
  --color-ivory: 226 63% 88%;
  --color-white: 226 63% 88%;
  --color-midnight: 240 22% 8%;
  --color-evenfall: 236 16% 22%;
  --color-breeze: 198 75% 69%;
  --color-cobalt: 198 75% 45%;
  --color-gale: 189 71% 72%;
  --color-dawn: 22 92% 75%;
  --color-sunset: 22 92% 75%;
  --color-rust: 22 92% 37%;
  --color-dusk: 267 83% 50%;
  --color-twilight: 316 71% 76%;

  /* Scrollbar for dark mode */
  --scrollbar-thumb-dimmed: hsla(226 63% 88% / 0.05);
  --scrollbar-thumb: hsla(226 63% 88% / 0.15);
  --scrollbar-track: transparent;

  /* Accent colors (Sapphire as primary blue) */
  --blue-500: 198 75% 69%;
  --teal-300: 170 57% 73%;
  --teal-500: 170 57% 73%;
  --red-300: 343 81% 74%;
  --red-500: 343 81% 50%; /* Darker for destructive */
}

/* Ensure dark mode is applied */
@media (prefers-color-scheme: light) {
  .dark {
    /* Force dark overrides even in light scheme */
  }
}

/* Additional styles if needed */
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-dimmed) var(--scrollbar-track);
  border-color: var(--border-l1);
}

/* Fixes for transparent popup menus */
.dark [role="menu"],
.dark .popover,
.dark .dropdown-menu,
.dark .menu-popup,
.dark [role="dialog"],
.dark .modal,
.dark .overlay,
.dark .tooltip {
  background-color: hsl(var(--surface-l2)) !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}

.dark [role="menuitem"],
.dark .popover * ,
.dark .dropdown-menu * {
  background-color: transparent !important;
  color: hsl(var(--fg-primary)) !important;
}