Skip to content

Latest commit

 

History

History
173 lines (146 loc) · 6.46 KB

File metadata and controls

173 lines (146 loc) · 6.46 KB

Code-Friendly Themes

Inspired by #2dd4bf (teal) and #ffa726 (orange) but optimized for comfortable coding

Code Light

Warm, cream-based theme with prominent teal and orange as main characters

# Syntax & Semantic Colors (Teal & Orange as main characters)
keyword: #0d9488          # Closer to original teal - keywords are important!
function: #14b8a6         # Your original teal - functions deserve the spotlight
string: #ea580c           # Closer to original orange - strings are everywhere
variable: #0f766e         # Teal variant for variables
number: #fb923c           # Your original orange for numbers
constant: #d97706         # Orange variant for constants
type: #0d7c66             # Dark teal for types
boolean: #9a3412          # Deep orange for booleans
comment: #78716c          # Warm neutral gray
operator: #6b7280         # Neutral gray
import: #14b8a6           # Teal for imports - very visible
property: #c2410c         # Orange for object properties

# UI Semantic Colors (Your colors in prominent roles)
primary: #14b8a6          # Your original teal
secondary: #fb923c        # Your original orange
success: #059669          # Teal family
warning: #d97706          # Orange family
danger: #dc2626           # Complementary red
info: #0891b2             # Cyan-teal

# Backgrounds & Surfaces (Cool theme with darker backgrounds)
bg-main: #e0e2e0          # Darker cool background
bg-secondary: #d8dbd8     # Much darker cool gray
bg-tertiary: #d0d3d0      # Darker soft cool gray
bg-sidebar: #d8dbd8       # Darker cool sidebar
bg-selection: #e0faf0     # Darker teal selection
bg-current-line: #e8fdf0  # Darker teal current line

# Text Colors
text-main: #1f2937        # Soft black (not pure black)
text-secondary: #4b5563   # Medium gray
text-muted: #9ca3af       # Light gray
text-inverse: #e0e2e0     # Darker cool cream for dark backgrounds
text-comment: #78716c     # Warm comment gray

# Border & Input Colors
border-main: #e5e7eb      # Neutral border
border-focus: #14b8a6     # Your teal for focus
border-error: #dc2626     # Error red
input-bg: #f0f2f0         # Same as main bg
input-bg-focus: #e8fdf0   # Darker teal focus

# Status & Terminal Colors (Teal & Orange prominence)
terminal-bg: #e0e2e0      # Darker cool cream terminal
terminal-text: #1f2937    # Soft black text
terminal-cursor: #14b8a6  # Your teal cursor
terminal-selection: #e0faf0
terminal-prompt: #14b8a6  # Teal prompt
terminal-path: #fb923c    # Orange path
terminal-success: #059669 # Teal success
terminal-error: #dc2626   # Red error

# Neutral Scale (warm-tinted)
neutral-50: #fefcfb
neutral-100: #f7f5f3
neutral-200: #f1f0ee
neutral-300: #e5e7eb
neutral-400: #9ca3af
neutral-500: #6b7280
neutral-600: #4b5563
neutral-700: #374151
neutral-800: #1f2937
neutral-900: #111827

Code Dark

Cool, blue-gray theme with vibrant teal and warm orange as main characters

# Syntax & Semantic Colors (Teal & Orange as main characters)
keyword: #5eead4          # Bright teal - keywords deserve attention!
function: #2dd4bf         # Your original teal - functions are stars
string: #fbbf24           # Bright warm orange - strings everywhere
variable: #7dd3fc         # Light cyan-teal for variables
number: #ffa726           # Your original orange for numbers
constant: #f59e0b         # Bright orange for constants
type: #22d3ee             # Cyan-teal for types
boolean: #fb7185          # Warm coral for booleans
comment: #6b7280          # Blue-gray
operator: #94a3b8         # Light gray
import: #2dd4bf           # Your teal for imports - very visible
property: #fdba74         # Light orange for properties

# UI Semantic Colors (Your colors in prominent roles)
primary: #2dd4bf          # Your original teal
secondary: #ffa726        # Your original orange
success: #34d399          # Bright teal-green
warning: #fbbf24          # Bright orange
danger: #f87171           # Coral red
info: #60a5fa             # Soft blue

# Backgrounds & Surfaces (Nord-inspired coolness)
bg-main: #242933          # Deep blue-gray
bg-secondary: #2e3440     # Lighter blue-gray
bg-tertiary: #353c4a      # Medium blue-gray
bg-sidebar: #2a303c       # Sidebar color
bg-selection: #164e63     # Dark teal selection
bg-current-line: #0f3460  # Subtle blue current line

# Text Colors
text-main: #eceff4        # Soft white
text-secondary: #d8dee9   # Light blue-gray
text-muted: #8b949e       # Medium gray
text-inverse: #242933     # Dark for light backgrounds
text-comment: #6b7280     # Comment blue-gray

# Border & Input Colors
border-main: #4c566a      # Blue-gray border
border-focus: #2dd4bf     # Your teal focus
border-error: #f87171     # Coral red
input-bg: #3b4252         # Secondary background
input-bg-focus: #164e63   # Dark teal focus

# Status & Terminal Colors (Teal & Orange prominence)
terminal-bg: #242933      # Same as main background
terminal-text: #eceff4    # Soft white
terminal-cursor: #2dd4bf  # Your teal cursor
terminal-selection: #164e63
terminal-prompt: #2dd4bf  # Teal prompt
terminal-path: #ffa726    # Orange path
terminal-success: #34d399 # Bright teal-green
terminal-error: #f87171   # Coral error

# Neutral Scale (cool-tinted)
neutral-50: #eceff4
neutral-100: #d8dee9
neutral-200: #c1c9d2
neutral-300: #8b949e
neutral-400: #6b7280
neutral-500: #4c566a
neutral-600: #434c5e
neutral-700: #3b4252
neutral-800: #2e3440
neutral-900: #242933

Design Philosophy (Updated)

Key Changes Made:

  • Teal & Orange as Stars: Used your original colors (#14b8a6, #2dd4bf, #fb923c, #ffa726) for the most important syntax elements
  • Prominent Roles: Functions, keywords, strings, numbers get your signature colors
  • Closer to Originals: Increased saturation while keeping eye-friendly backgrounds
  • Main Character Treatment: Import statements, prompts, and key UI elements use your exact colors

Coding-Specific Roles for Your Colors:

  • Functions: Your exact teal - functions are the stars of code
  • Keywords: Bright teal variants - if/else/const/let deserve attention
  • Strings: Your orange family - strings appear everywhere
  • Numbers: Your exact orange - numbers need to pop
  • Terminal Prompts: Your teal - the command line identity
  • Paths: Your orange - easy wayfinding

Balance Achieved:

  • Your Identity: Teal and orange are clearly recognizable as YOUR colors
  • Eye Comfort: Backgrounds remain gentle for long coding sessions
  • Hierarchy: Most important code elements get the star treatment

Your themes now feel unmistakably like YOUR brand while being sustainable for development work!