Skip to content

Instantly share code, notes, and snippets.

@bdbch
Last active February 11, 2026 11:31
Show Gist options
  • Select an option

  • Save bdbch/8302f2608dbf9e482070bf1a1799236f to your computer and use it in GitHub Desktop.

Select an option

Save bdbch/8302f2608dbf9e482070bf1a1799236f to your computer and use it in GitHub Desktop.
Fluxer Themes
/* -------------------------------------------------------------------------- */
/* FLUXER THEME */
/* Style: GitHub Dark (Fixed Elevations) */
/* -------------------------------------------------------------------------- */
/* Typography */
:root { --font-sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serife; }
:root { --font-mono: 'ui-monospace', 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace; }
/* App Backgrounds & Structure - Darkened for consistency */
:root { --background-primary: #0d1117; }
:root { --background-secondary: #010409; }
:root { --background-secondary-alt: #010409; }
:root { --background-secondary-lighter: #0d1117; }
:root { --background-tertiary: #010409; }
:root { --background-textarea: #0d1117; }
:root { --background-header-primary: #0d1117; }
:root { --background-header-primary-hover: #161b22; }
:root { --background-header-secondary: #21262d; }
:root { --channel-header-background: #0d1117; }
:root { --background-modifier-hover: #161b22; }
:root { --guild-list-foreground: #c9d1d9; }
:root { --background-modifier-selected: #21262d; }
:root { --background-modifier-accent: #30363d; }
:root { --background-modifier-accent-focus: #8b949e; }
/* Brand & Accents (GitHub Blue) */
:root { --brand-primary: #2f81f7; }
:root { --brand-secondary: #1f6feb; }
:root { --brand-primary-light: #58a6ff; }
:root { --brand-primary-fill: #0d1117; }
/* Status Indicators */
:root { --status-online: #3fb950; }
:root { --status-idle: #d29922; }
:root { --status-dnd: #f85149; }
:root { --status-offline: #484f58; }
:root { --status-danger: #f85149; }
/* Text Typography */
:root { --text-primary: #c9d1d9; }
:root { --text-secondary: #8b949e; }
:root { --text-tertiary: #6e7681; }
:root { --text-primary-muted: #484f58; }
:root { --text-chat: #c9d1d9; }
:root { --text-chat-muted: #8b949e; }
:root { --text-link: #58a6ff; }
:root { --text-on-brand-primary: #ffffff; }
:root { --text-tertiary-muted: #484f58; }
:root { --text-tertiary-secondary: #6e7681; }
/* Borders */
:root { --border-color: #30363d; }
:root { --border-color-hover: #8b949e; }
:root { --border-color-focus: #1f6feb; }
/* Specialized Accents */
:root { --accent-primary: #2f81f7; }
:root { --accent-success: #3fb950; }
:root { --accent-warning: #d29922; }
:root { --accent-danger: #f85149; }
:root { --accent-info: #58a6ff; }
:root { --accent-purple: #bc8cff; }
/* Alerts */
:root { --alert-note-color: #58a6ff; }
:root { --alert-tip-color: #3fb950; }
:root { --alert-important-color: #bc8cff; }
:root { --alert-warning-color: #d29922; }
:root { --alert-caution-color: #f85149; }
/* Mentions & Interactive */
:root { --markup-mention-text: #58a6ff; }
:root { --markup-mention-fill: #111b27; }
:root { --markup-interactive-hover-text: #58a6ff; }
:root { --markup-interactive-hover-fill: #161b22; }
/* Buttons */
:root { --button-primary-fill: #238636; }
:root { --button-primary-active-fill: #2ea043; }
:root { --button-primary-text: #ffffff; }
:root { --button-secondary-fill: #21262d; }
:root { --button-secondary-active-fill: #30363d; }
:root { --button-secondary-text: #c9d1d9; }
:root { --button-danger-fill: #da3633; }
:root { --button-danger-active-fill: #f85149; }
:root { --button-danger-text: #ffffff; }
:root { --button-danger-outline-border: #da3633; }
:root { --button-danger-outline-text: #f85149; }
:root { --button-danger-outline-active-fill: #da3633; }
:root { --button-danger-outline-active-border: #f85149; }
/* Other Button Styles */
:root { --button-ghost-text: #c9d1d9; }
:root { --button-inverted-fill: #ffffff; }
:root { --button-inverted-text: #0d1117; }
:root { --button-outline-border: #30363d; }
:root { --button-outline-text: #c9d1d9; }
:root { --button-outline-active-fill: #30363d; }
:root { --button-outline-active-border: #8b949e; }
/* General UI Elements */
:root { --bg-primary: #0d1117; }
:root { --bg-secondary: #010409; }
:root { --bg-tertiary: #161b22; }
:root { --bg-hover: #161b22; }
:root { --bg-active: #21262d; }
/* Code & Tables */
:root { --bg-code: #161b22; }
:root { --bg-code-block: #161b22; }
:root { --bg-blockquote: #161b22; }
:root { --bg-table-header: #21262d; }
:root { --bg-table-row-odd: #0d1117; }
:root { --bg-table-row-even: #161b22; }
/* -------------------------------------------------------------------------- */
/* FLUXER THEME */
/* Style: Vercel / shadcn (Dark) */
/* -------------------------------------------------------------------------- */
/* Typography */
:root { --font-sans: 'Geist', 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serife; }
:root { --font-mono: 'Geist Mono', 'IBM Plex Mono', 'JetBrains Mono', monospace; }
/* App Backgrounds & Structure */
:root { --background-primary: #09090b; }
:root { --background-secondary: #000000; }
:root { --background-secondary-alt: #0a0a0a; }
:root { --background-secondary-lighter: #0c0c0e; }
:root { --background-tertiary: #18181b; }
:root { --background-textarea: #09090b; }
:root { --background-header-primary: #09090b; }
:root { --background-header-primary-hover: #27272a; }
:root { --background-header-secondary: #27272a; }
:root { --channel-header-background: #09090b; }
:root { --background-modifier-hover: #27272a; }
:root { --guild-list-foreground: #fafafa; }
:root { --background-modifier-selected: #27272a; }
:root { --background-modifier-accent: #27272a; }
:root { --background-modifier-accent-focus: #3f3f46; }
/* Brand & Accents (Monochrome Primary) */
:root { --brand-primary: #ffffff; }
:root { --brand-secondary: #a1a1aa; }
:root { --brand-primary-light: #e4e4e7; }
:root { --brand-primary-fill: #000000; }
/* Status Indicators */
:root { --status-online: #22c55e; }
:root { --status-idle: #eab308; }
:root { --status-dnd: #ef4444; }
:root { --status-offline: #71717a; }
:root { --status-danger: #ef4444; }
/* Text Typography */
:root { --text-primary: #fafafa; }
:root { --text-secondary: #a1a1aa; }
:root { --text-tertiary: #71717a; }
:root { --text-primary-muted: #52525b; }
:root { --text-chat: #fafafa; }
:root { --text-chat-muted: #71717a; }
:root { --text-link: #3b82f6; }
:root { --text-on-brand-primary: #000000; }
:root { --text-tertiary-muted: #52525b; }
:root { --text-tertiary-secondary: #71717a; }
/* Borders (General UI) */
:root { --border-color: #27272a; }
:root { --border-color-hover: #3f3f46; }
:root { --border-color-focus: #71717a; }
/* Specialized Accents */
:root { --accent-primary: #ffffff; }
:root { --accent-success: #22c55e; }
:root { --accent-warning: #eab308; }
:root { --accent-danger: #ef4444; }
:root { --accent-info: #3b82f6; }
:root { --accent-purple: #a855f7; }
/* Alerts */
:root { --alert-note-color: #3b82f6; }
:root { --alert-tip-color: #22c55e; }
:root { --alert-important-color: #a855f7; }
:root { --alert-warning-color: #eab308; }
:root { --alert-caution-color: #ef4444; }
/* Mentions & Interactive */
:root { --markup-mention-text: #3b82f6; }
:root { --markup-mention-fill: #1d283a; }
:root { --markup-interactive-hover-text: #60a5fa; }
:root { --markup-interactive-hover-fill: #1d283a; }
/* Buttons */
:root { --button-primary-fill: #ffffff; }
:root { --button-primary-active-fill: #e4e4e7; }
:root { --button-primary-text: #000000; }
:root { --button-secondary-fill: #27272a; }
:root { --button-secondary-active-fill: #3f3f46; }
:root { --button-secondary-text: #fafafa; }
:root { --button-danger-fill: #ef4444; }
:root { --button-danger-active-fill: #dc2626; }
:root { --button-danger-text: #ffffff; }
:root { --button-danger-outline-border: #ef4444; }
:root { --button-danger-outline-text: #ef4444; }
:root { --button-danger-outline-active-fill: #ef4444; }
:root { --button-danger-outline-active-border: #ef4444; }
:root { --button-ghost-text: #fafafa; }
:root { --button-inverted-fill: #000000; }
:root { --button-inverted-text: #ffffff; }
:root { --button-outline-border: #3f3f46; }
:root { --button-outline-text: #fafafa; }
:root { --button-outline-active-fill: #27272a; }
:root { --button-outline-active-border: #fafafa; }
/* General UI Elements */
:root { --bg-primary: #09090b; }
:root { --bg-secondary: #000000; }
:root { --bg-tertiary: #18181b; }
:root { --bg-hover: #27272a; }
:root { --bg-active: #3f3f46; }
/* Code & Tables */
:root { --bg-code: #18181b; }
:root { --bg-code-block: #18181b; }
:root { --bg-blockquote: #18181b; }
:root { --bg-table-header: #18181b; }
:root { --bg-table-row-odd: #09090b; }
:root { --bg-table-row-even: #121214; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment