👁️ Visual Care — Dark & Light

A dual VS Code theme designed for visual comfort, accessibility, and readability during long coding sessions. Created by Sander Díaz and co-developed with [RobertBenitez9805], featuring soft low-glare backgrounds and zero pure black or pure white extremes.

✨ Why Visual Care? Visual Care is a pair of carefully balanced themes — Visual Care Dark and Visual Care Light — built around principles of visual ergonomics, color-perception research, and modern UI design. The goal is simple: a workspace that stays calm and legible whether you code at midnight or midday.

A note on claims: Visual Care is designed to promote visual comfort and readability. It is not a medical device and makes no clinical claims.

📊 Badges & Stats📸 Preview /Visual Care DarkVisual Care Light and Dark

Visual Care Dark	Visual Care Light

🎨 Available Color Variants (v2.1.3)

New Dynamic Palettes feature: An interactive command has been added to instantly customize and unify visual comfort tones across the entire VS Code environment.

How to use it:

Press Ctrl + Shift + P (or Cmd + Shift + P on Mac) to open the Command Palette.

Type and select "Visual Care: Change Visual Comfort Palette."

Choose the tone that best suits your visual comfort from the available categories (Grays, Slate Blues, or Greens).

Preview 1	Preview 2

Included theme variants: Support for dark mode (with multiple ergonomic tones) and light mode, synchronized with your operating system.

🎨 Dark Theme Improvements (v2.0.6)

We have optimized the theme's visual experience to ensure more comfortable reading and balanced contrast:

• Refined color palette: Background tones have been adjusted to reduce eye strain during long coding sessions.
• Improved contrast: Token colors (keywords, variables, and functions) have been optimized to ensure better readability in dark mode.
• Consistency: Colors across the VS Code interface (sidebars, tabs, and panels) have been aligned for a cleaner integration.

🎨 Key Features Ergonomic Base Tones:

Dark Theme: Soft slate base (#1E222A)

Light Theme: Warm "paper" tone (#F9F9F7)

Accessibility First: Body text and core syntax colors meet WCAG AA (≥ 4.5:1) contrast ratios against the editor background. Includes a bundled validator (npm run validate).

Day & Night Pairing: Coordinated set that syncs automatically with your operating system's appearance.

Broad Language Support: Fine-tuned scopes for TypeScript, JavaScript, Python, Go, Rust, C#, Java, C/C++, HTML, CSS/SCSS, JSON, Markdown, YAML, SQL, and more.

Semantic Highlighting: Language-server-driven precision for modern languages.

Fully Themed Workbench: No default colors bleeding through—covers activity bars, sidebars, tabs, terminal (16 ANSI colors), diff views, merge conflicts, Git decorations, and debug surfaces.

Out-of-the-Box Extras: Rainbow brackets and bracket-pair guides included.

🚀 Installation

1.From the Marketplace (Recommended) Open the Extensions panel using Ctrl/Cmd + Shift + X.

Search for Visual Care.

Click Install, then select your preferred theme via Set Color Theme.

Or run via command line:

code --install-extension Sand3R1990.visual-care-theme

2.From a .vsix File Open the Extensions panel (Ctrl/Cmd + Shift + X).

Click the ⋯ menu in the top-right corner and choose Install from VSIX….

Select your .vsix file.

To change themes manually at any time, press Ctrl/Cmd + K then Ctrl/Cmd + T.

🌗 Automatic Day / Night Switching

To have VS Code follow your operating system's theme, add the following configuration to your user settings.json: { "window.autoDetectColorScheme": true, "workbench.preferredDarkColorTheme": "Visual Care Dark", "workbench.preferredLightColorTheme": "Visual Care Light" }

🛠️ Recommended Settings & Customization Pair the theme with these optional settings for the best experience:

{ "editor.bracketPairColorization.enabled": true, "editor.guides.bracketPairs": "active", "editor.semanticHighlighting.enabled": true, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth" }

You can also override specific colors in your settings.json without forking the theme:

{ "workbench.colorCustomizations": { "[Visual Care Dark]": { "editor.background": "#20242C" } }, "editor.tokenColorCustomizations": { "[Visual Care Light]": { "comments": "#9AA0A6" } } }

🗺️ Roadmap [ ] Support for more color variations in specific languages.

[ ] Ultra-high contrast version for extreme accessibility.

[ ] Fine-tuning for the integrated terminal.

♿ Accessibility

The core text and syntax roles target WCAG AA contrast against the editor background. Comments are intentionally de-emphasized (meeting AA-large) so they recede without disappearing. Run the bundled checker any time:

npm run validate It parses both theme files, flags duplicate keys, and prints the contrast ratio for key foreground/background pairs.

🤝 Contributing

Issues and pull requests are welcome at https://github.com/Sand3R1990/vstheme.

Edit the files in themes/. Press F5 in VS Code to launch an Extension Development Host and preview live. Run npm run validate before opening a PR. See CHANGELOG.md for release history.

👥 Authors & Contributors

Sander Diaz - Creator & Maintainer - Sand3R1990

Robert Benitez - Collaborator & Co-developer - RobertBenitez9805

💡 Support & Feedback

If you encounter any bugs, weird token highlights, or have suggestions:

Open an Issue on GitHub https://github.com/Sand3R1990/vstheme.

Reach out or rate the theme on the VS Code Marketplace.

Version Installs Rating License: MIT

2.1.6 - 2026-08-08

New: Added the "Visual Care: Change Visual Rest Palette" interactive command to toggle between shades of gray, slate blue, and green.

Improvement: Automatic unification of the editor, terminal, sidebar, tabs, and notification backgrounds based on the selected palette.

Maintenance: Updated the extension structure to TypeScript and optimized overall performance and dependencies.

2.0.7 - 2026-08-06

• Documentation updates and packaging improvements.

2.0.6 - 2026-08-06

• Fixed TypeScript compilation errors.
• Integrated tsconfig.json for build support.
• Updated type dependencies for VS Code compatibility.

2.0.5

• Complete Interface Unification: Removed gray contrast variations between panels to blend the explorer sidebar, activity bar, top tabs, toolbars, and terminal into a single, continuous dark tone (#1e1e1e).

• Minimalist Design: The environment now offers a view free from jarring breaks or distracting side blocks, creating a clean aesthetic ideal for long coding sessions.

• Syntax and Readability Adjustments: Retained custom color accents within the code and syntax highlighting (semanticTokenColors and tokenColors) to ensure optimal visibility against the new unified background.

2.0.4

• Style updates based on collaborative improvements.
• Terminology corrections in the README.

2.0.2

• Initial release of the Visual Care theme.

📄 License MIT © Sander Díaz

Visual Care — Oscuro y Claro

Un tema doble para VS Code con certificación de accesibilidad AA, diseñado para ofrecer confort visual, accesibilidad y legibilidad durante largas sesiones de programación. Creado por Sander Díaz y desarrollado en colaboración con Robert Benitez, presenta fondos suaves de bajo desl umbramiento y evita los extremos de negro puro o blanco puro.

✨ ¿Por qué Visual Care?

Visual Care es un par de temas cuidadosamente equilibrados —Visual Care Dark y Visual Care Light— construidos sobre principios de ergonomía visual, investigación sobre la percepción del color y diseño moderno de interfaces (UI). El objetivo es sencillo: un espacio de trabajo que se mantenga tranquilo y legible, tanto si programas a medianoche como a mediodía.

Nota sobre las afirmaciones: Visual Care está diseñado para promover el confort visual y la legibilidad. No es un dispositivo médico ni realiza afirmaciones de carácter clínico.

🎨 Variantes de Color Disponibles (v2.0.8)

Este tema incluye múltiples paletas de colores diseñadas para adaptarse a tu estilo y reducir la fatiga visual. Puedes cambiar entre ellas en cualquier momento:

• Visual Care Dark: El tono oscuro clásico y equilibrado para sesiones largas de programación.
• Visual Care Green: Una variante inspirada en tonos verdes relajantes para un entorno más fresco.
• Visual Care Slate Blue: Un estilo basado en azules pizarra que aporta sobriedad y elegancia a tu espacio de trabajo.

¿Cómo cambiar de variante?

1. Abre la paleta de comandos con Ctrl + K y luego Ctrl + T (en Windows/Linux) o Cmd + K y Cmd + T (en macOS).
2. Busca o selecciona la opción Color Theme (Tema de colores).
3. Elige la variante de Visual Care que prefieras de la lista desplegable.

🎨 Mejoras en el Tema Oscuro (v2.1.0)

Nueva función de Paletas Dinámicas: Se añadió el comando interactivo para personalizar y unificar los tonos de descanso visual en todo el entorno de VS Code de forma instantánea.

Cómo usarlo:

Presiona Ctrl + Shift + P (o Cmd + Shift + P en Mac) para abrir la paleta de comandos.

Escribe y selecciona Visual Care: Cambiar Paleta de Descanso Visual.

Elige entre las categorías disponibles (Grises, Azules Pizarra o Verdes) el tono que mejor se adapte a tu comodidad visual.

Variantes de temas incluidos: Soporte para modo oscuro (con múltiples tonos ergonómicos) y modo claro sincronizados con tu sistema operativo.

📊 Insignias y estadísticas 📸 Vista previa: Visual Care Dark / Visual Care Light

🎨 Características clave

Tonos base ergonómicos:

Tema oscuro: Base suave color pizarra (#1E222A)

Tema claro: Tono cálido tipo "papel" (#F9F9F7)

Accesibilidad ante todo: El texto del cuerpo y los colores principales de la sintaxis cumplen con las relaciones de contraste WCAG AA (≥ 4.5:1) respecto al fondo del editor. Incluye un validador integrado (npm run validate).

Combinación día/noche: Conjunto coordinado que se sincroniza automáticamente con la apariencia de tu sistema operativo.

Amplio soporte de lenguajes: Configuraciones optimizadas para TypeScript, JavaScript, Python, Go, Rust, C#, Java, C/C++, HTML, CSS/SCSS, JSON, Markdown, YAML, SQL y más.

Resaltado semántico: Precisión impulsada por servidores de lenguaje (language servers) para lenguajes modernos.

Entorno de trabajo totalmente tematizado: Sin colores predeterminados residuales; abarca barras de actividad, barras laterales, pestañas, terminal (16 colores ANSI), vistas de diferencias (diff), conflictos de fusión, decoraciones de Git y paneles de depuración.

Extras listos para usar: Incluye paréntesis arcoíris (rainbow brackets) y guías visuales para pares de paréntesis.

🚀 Instalación

1. Desde el Marketplace (Recomendado)

Abre el panel de Extensiones usando Ctrl/Cmd + Shift + X.

Busca "Visual Care".

Haz clic en Instalar y luego selecciona tu tema preferido mediante la opción "Set Color Theme" (Establecer tema de color). O ejecútalo desde la línea de comandos:

code --install-extension Sand3R1990.visual-care-theme

1. Desde un archivo .vsix

Abre el panel de Extensiones (Ctrl/Cmd + Shift + X).

Haz clic en el menú ⋯ de la esquina superior derecha y selecciona "Install from VSIX…" (Instalar desde VSIX…).

Selecciona tu archivo .vsix.

Para cambiar de tema manualmente en cualquier momento, presiona Ctrl/Cmd + K y luego Ctrl/Cmd + T.

🌗 Cambio automático entre día y noche

Para que VS Code siga el tema de tu sistema operativo, añade la siguiente configuración a tu archivo settings.json de usuario: { "window.autoDetectColorScheme": true, "workbench.preferredDarkColorTheme": "Visual Care Dark", "workbench.preferredLightColorTheme": "Visual Care Light" }

🛠️ Configuración recomendada y personalización

Combina el tema con estas opciones adicionales para obtener la mejor experiencia:

{ "editor.bracketPairColorization.enabled": true, "editor.guides.bracketPairs": "active", "editor.semanticHighlighting.enabled": true, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth" }

También puedes modificar colores específicos en tu settings.json sin necesidad de crear una bifurcación (fork) del tema:

{ "workbench.colorCustomizations": { "[Visual Care Dark]": { "editor.background": "#20242C" } }, "editor.tokenColorCustomizations": { "[Visual Care Light]": { "comments": "#9AA0A6" } } }

🗺️ Hoja de ruta

[ ] Soporte para más variaciones de color en lenguajes específicos.

[ ] Versión de contraste ultraalto para una accesibilidad extrema.

[ ] Ajustes precisos para la terminal integrada.

♿ Accesibilidad

Los colores principales del texto y la sintaxis cumplen con los estándares de contraste WCAG AA respecto al fondo del editor. Los comentarios tienen una intensidad reducida intencionadamente (cumpliendo con AA-large) para que pasen a un segundo plano sin desaparecer. Puedes ejecutar la herramienta de validación incluida en cualquier momento:

npm run validate Esta herramienta analiza ambos archivos del tema, detecta claves duplicadas y muestra la relación de contraste de las combinaciones clave de primer plano y fondo. 🤝 Contribuciones Las issues y pull requests son bienvenidas en https://github.com/Sand3R1990/vstheme.

Edita los archivos en la carpeta themes/. Presiona F5 en VS Code para iniciar el Extension Development Host y previsualizar los cambios en tiempo real. Ejecuta npm run validate antes de abrir una pull request.

👥 Autores y colaboradores

Sander Diaz - Creador y mantenedor - Sand3R1990

Robert Benitez - Colaborador y codesarrollador - RobertBenitez9805

💡 Soporte y comentarios

Si encuentras errores, resaltados de sintaxis extraños o tienes sugerencias:

Abre una issue en GitHub: https://github.com/Sand3R1990/vstheme.

Ponte en contacto o califica el tema en el VS Code Marketplace.

Versión | Instalaciones | Calificación | Licencia: MIT

Changelog

2.1.6 - 2026-08-08

Nuevo: Incorporación del comando interactivo Visual Care: Cambiar Paleta de Descanso Visual para alternar entre tonos de grises, azules pizarra y verdes.

Mejora: Unificación automática del fondo del editor, terminal, barra lateral, pestañas y notificaciones según la paleta elegida.

Mantenimiento: Actualización de la estructura de la extensión en TypeScript y optimización general del rendimiento y dependencias.

2.0.7 - 2026-08-06

• Actualización de documentación y mejoras de empaquetado.

2.0.6 - 2026-08-06

• Corrección de errores de compilación de TypeScript.
• Integración de tsconfig.json para soporte de compilación.
• Actualización de dependencias de tipos para compatibilidad con VS Code.

2.0.5

• Unificación Completa de la Interfaz: Se eliminaron los contrastes de grises en los paneles para fundir la barra lateral de explorador, la barra de actividad, las pestañas superiores, las barras de herramientas y la terminal en un solo tono oscuro continuo (#1e1e1e).

• Diseño Minimalista: El entorno ahora ofrece una vista sin cortes ni bloques molestos a los lados, logrando una estética limpia ideal para largas sesiones de código.

• Corrección de Sintaxis y Legibilidad: Se mantuvieron los acentos de color personalizados en el código y el resaltado sintáctico (semanticTokenColors y tokenColors) para destacar de forma óptima sobre el nuevo fondo unificado.

2.0.4

• Actualización de estilos basada en mejoras colaborativas.
• Corrección de términos en el README.

2.0.2

• Lanzamiento inicial del tema Visual Care.

📄 Licencia MIT © Sander Díaz