🕉️ Conscious Code — Pancha Bhoota Themes Pack

Six exceptionally readable color themes + six matching icon sets inspired by Shiva and the Five Elements (Earth, Water, Fire, Air, Space) — engineered to reduce eye strain during marathon coding sessions.

🧠 The Philosophy: Why "Conscious"?

Most VS Code themes are designed to look cool in a screenshot. Conscious Code is designed to feel good after your 8th hour of staring at a screen.

Every color, every contrast ratio, every accent was chosen with one question in mind:

"Will this still feel comfortable at 2 AM on hour twelve?"

The answer is always yes — because we follow the science. 👇

🔬 The Science Behind the Colors

🌡️ Color Temperature & Circadian Rhythm

Research from Harvard Medical School shows that blue light (wavelengths 450–495 nm) suppresses melatonin production by up to twice as much as other visible light, disrupting circadian rhythm and causing digital eye fatigue (Harvard Health Publishing, 2020).

What we did:

• 🌙 All four dark themes (Shiva, Earth, Fire, Space) use warm-shifted background tones — not pure black (#000000), not cool blue-gray. Instead, they lean into warm ash (#222220), deep umber (#2A2621), warm charcoal (#2B2323), and navy-violet (#1A1A24).
• ☀️ Both light themes (Water, Air) use off-white tones (#F4F7F8, #F9F8F6) instead of pure white (#FFFFFF), reducing luminance contrast by ~8–12% — enough to significantly reduce glare without sacrificing readability.

👁️ Contrast Ratios & WCAG Standards

The Web Content Accessibility Guidelines (WCAG) 2.1 recommend a minimum contrast ratio of 4.5:1 for standard text and 3:1 for large text (W3C, 2018).

What we did:

• ✅ All foreground-to-background combinations are designed to meet or approach WCAG AA compliance
• ✅ Syntax token colors are muted but distinct — avoiding neon saturation (which causes chromatic aberration where the eye struggles to focus multiple saturated hues simultaneously)
• ✅ UI accent colors are used sparingly — status bar, tab borders, badges — never overwhelming the code area

🧪 Reducing "Chromatic Aberration" Fatigue

A 2019 study published in Optometry and Vision Science found that prolonged exposure to highly saturated, multi-colored displays increases accommodative stress on the ciliary muscle of the eye. This is why "rainbow syntax themes" cause faster fatigue.

What we did:

• 🎨 Token colors within each theme are drawn from a narrow, harmonious palette — no more than 5–8 hues per theme, all within related color families
• 🔇 Instead of screaming neon, syntax highlighting uses earthy, organic tones: ambers, olives, warm corals, soft teals, muted golds
• 🧘 The result is a lower visual cognitive load — your brain processes the code structure without being distracted by the colors themselves

📏 The 20-20-20 Rule — Built Into the Design

The American Academy of Ophthalmology recommends the 20-20-20 rule: every 20 minutes, look at something 20 feet away for 20 seconds. But even between breaks, your theme matters.

What we did:

• 💡 Low-luminance backgrounds reduce pupil constriction fatigue — your iris doesn't have to work as hard
• 🔤 Foreground colors are warm-tinted whites (#E8E6E1, #D9CBB8, #EADADA) instead of pure white — reducing the harsh reflective glare that causes asthenopia (eye strain headaches)
• 📐 Active indent guides and bracket pair colors use the theme's own accent — never an alien color that breaks the visual flow

🎨 The Six Elements

Each theme is a complete visual environment — color theme + matching icon set — tuned to its elemental identity.

🔱 Shiva — The Base (Dark)

Ash-smeared, moonlit, meditative stillness

Best for: Late-night deep-focus sessions 🌙

🌍 Earth — Soft Soil (Dark)

Deep soil, autumn roots, terracotta warmth

Best for: Long workdays where comfort matters ☕

💧 Water — Calm Stream (Light)

Monsoon rivers, pearl shores, ocean depth

Best for: Daytime coding in bright environments ☀️

🔥 Fire — Warm Ember (Dark)

Glowing coals, campfire warmth, not neon rage

Best for: Creative sprints and high-energy coding ⚡

🌬️ Air — Gentle Breeze (Light)

Open skies, whisper clouds, ethereal calm

Best for: Writing documentation, prose-heavy work 📝

🌌 Space — Deep Twilight (Dark)

Cosmic void, nebula glow, starlight whispers

Best for: Immersive coding with music at midnight 🎧

🧩 Smart Developer Features

📐 Active Indent Guides

The vertical line marking your current block scope lights up in the theme's accent color at full opacity. Inactive guides fade to ~6% opacity — visible but never distracting. You'll always know which function you're inside.

🌈 Bracket Pair Colorization (6 Levels)

Each nesting depth of (), {}, [] gets a unique, theme-harmonized color. No more counting brackets — the colors do it for you.

Level 1: Theme accent    Level 2: Complementary    Level 3: Warm secondary
Level 4: Cool accent     Level 5: Nature tone      Level 6: Sky/Ocean tone

🔗 Bracket Pair Guide Lines

Vertical lines connect matching brackets with color-coded guides. Active scope at 50% opacity, inactive at ~10%. The line color matches the bracket color — zero ambiguity.

🎯 Bracket Match Highlighting

Click any bracket and its partner gets a semi-transparent highlight + solid border in the theme's accent. Unmissable.

🖼️ Crisp 16×16 File Icons

Every icon is:

• ✅ Pixel-snapped to a 16×16 viewBox — no sub-pixel blur
• ✅ Flat design — no gradients, no drop shadows
• ✅ Uniquely colored per theme — Earth icons feel earthy, Space icons feel cosmic
• ✅ Distinctly shaped AND colored per file type — TypeScript (blue "T") is never confused with React (cyan atom)

🔧 Recommended Settings

Add these to your settings.json to unlock the full theme experience:

{
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.guides.indentation": true,
  "editor.guides.highlightActiveIndentation": true,
  "editor.matchBrackets": "always"
}

📦 Installation

1. 🔍 Open Extensions sidebar (Ctrl+Shift+X / Cmd+Shift+X)
2. 🔎 Search for Conscious Code Themes Pack
3. 📥 Click Install
4. 🎨 Open Command Palette → Preferences: Color Theme → Select your element
5. 🖼️ Open Command Palette → Preferences: File Icon Theme → Select matching Conscious Icons

📚 References

1. Harvard Health Publishing. (2020). Blue light has a dark side. Harvard Medical School.
2. W3C. (2018). Web Content Accessibility Guidelines (WCAG) 2.1. World Wide Web Consortium.
3. Rosenfield, M. (2011). Computer vision syndrome: a review of ocular causes and potential treatments. Ophthalmic & Physiological Optics, 31(5), 502–515.
4. Sheppard, A. L., & Wolffsohn, J. S. (2018). Digital eye strain: prevalence, measurement and amelioration. BMJ Open Ophthalmology, 3(1).
5. American Academy of Ophthalmology. (2020). Computers, Digital Devices and Eye Strain.

🏷️ Supported File Types

Built with 🧘 mindfulness by Dharani Jayakanthan
🔗 LinkedIn · 🐙 GitHub

Code consciously. Your eyes will thank you. 👁️✨