Visual Care Auto Theme - Visual Studio Marketplace

👁️ Visual Care — Dark & Light

AA 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

🎨 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

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

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

📄 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 [RobertBenitez9805], 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.

📊 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

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

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:

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