A High Contrast Colour Theme for VS Code IDE

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056

Volume: 09 Issue: 09 | Sep 2022 www.irjet.net p-ISSN: 2395-0072

A High Contrast Colour Theme for VS Code IDE

Sanjay Suresh

Undergraduate Student, Department of ECE, PSG College of Technology, Tamilnadu, India ***

Abstract - This project named “Rev Blaze High Contrast”, is a high contrast colour theme extension for Visual Studio Code Integrated Development Environment (IDE) aimed at developers with a colour visiondeficiencycalledDeuteranopia. Constant inputs from the visually challenged were taken into account during the development of this theme. Development is done and tested on the same IDE. The extension is then made publicly available to download on the VS Code Marketplace. The steps to deploy the theme on the marketplace are also outlined in this paper. Results from the Analytics dashboard are also given in the paper to show the success of this extension.

Key Words: VS Code, Colour Theme, VS Code extension, Colour Blindness, Deuteranopia, Development, Visual Studio Code

1. INTRODUCTION

Rev Blaze High Contrast is a VS Code extension that is currently publicly available to developers on the VS Code Marketplace. This open-source project is targeted at developers with Deuteranopia which is a type of colour blindness.Theextensionismeanttohelpthemdistinguish between subtle differences in the editor window of the widely used Integrated Development Environment (IDE) Visual Studio Code usingthecolourpalettetheirperceptionis restrictedto.

2. LITERATURE SURVEY

Theabilitytoseecolourdependsonthreegenes: OPN1LW (red pigment), OPN1MW (green pigment), and OPN1SW (blue pigment). These genes produce light receptor cells. These cells have two components: rods and cones. Deuteranopia (red-green colour blindness) arises due to deficiency in the green pigments OPN1MW or the red pigments OPN1LW [6].

Deuteranopia is, by far, the most common colour vision deficiency[5].Peoplewiththisdisabilityoftenhavetrouble perceivingthered-greenspectrumclearly.

Listed below are several reasons why this type of colour blindnessisprevalent.

Retinaldiseases

Issueswiththeopticnerve

Age-relatedconditions

Exposuretohighorganicsolvents

Sideeffectsofcertaindrugs

Geneticmutations

Inmostcases,thecauseofDeuteranopiaisgenetic.Studies show[3]thatsomeformofcolourblindnessispresentin8% ofallmenand0.5%ofallwomen,withDeuteranopiabeing themostcommon.Correlationofthisdatawiththedataof thenumberofdevelopers[4],andthegenderspread,shows that over 120,000 software developers have this form of colourvisiondeficiencytoday.

3. CODE EDITOR

Inorderfortheextensiontohavethelargestimpact,itmade sensetoselectanIDEthatalreadyhadalargecommunity built around it. Visual Studio Code was selected as it is currentlyoneofthebestfree-to-usecodeeditors[1]inthe market. It is consistently highly ranked, and has good support from the community and for third-party opensource extensions. The 2022 Stack Overflow Developer Survey[9]resultsshowthatcloseto74.48%ofdevelopers useVSCode.Thisnumberisa3.42percentagepointincrease overthepreviousyear’ssurvey[2].

VisualStudioCode,alsocommonlyreferredtoasVSCode,is asource-code editor that was developed and currently maintainedbyMicrosoft.Salientfeaturesofthiscodeeditor include support for debugging,syntax highlighting,intelligent code completion,snippets,code refactoring, and embeddedGit [10]. Users can customize their editor experience using colour themes,keyboard shortcuts, preferences, and installextensionsthat add additionalfunctionality.RevBlazeHighContrastisonesuch colourthemeextensionthatismeanttoprovideaspecific communityofuserswithasuperiorcodingexperience.

International Research Journal of Engineering and Technology (IRJET)

e-ISSN: 2395-0056

Volume: 09 Issue: 09 | Sep 2022 www.irjet.net p-ISSN: 2395-0072

4.2 Project Setup

Theprojectwassetupbyrunningthefollowingcommandin theintegratedterminalonVSCode.

yo code

Thiswillgothroughaseriesofstepsrequiringinputsfrom the user at each stage. The New Colour Theme option is selectedandthentheoption No, start fresh isselected.This will then go through the different details required for the automaticcreationofthebasetemplatetostartoffwith.

Fig -1:TheVSCodeeditorwindowalongwiththeVSCode marketplacefordownloadingthirdpartextensions

This code editor can be installed from the official website https://code.visualstudio.com/downloadandissupported bymultipleoperatingsystems.

4. SETUP

4.1 Installing dependencies

To begin, all development dependencies required were installed.TheNPMpackagemanagerisrequiredtoinstallthe projectdependencies.Thispackagemanagercomesinstalled along with Node.js. Node.js is a local Java Script runtime environment for server-sided applications. Once the NPM packagemanagerissetup,therearethreedependenciesthat needtobeinstalledusingit.

5. DEVELOPMENT

Creation of an extension requires knowledge of basic terminalcommands,scripting,AzureDevOps,hexadecimal colour codes and JSON files. Each element of the editor windowcanbecustomizedintermsofcolourinamainJSON file.TheVSCodecolourthemeextensionAPIdocumentation wasusedforreference[8].

generator-code

All of these packages can be installed using the command npm install –g <package name> ontheterminalintegratedin VS Code. The –g flag is added before the package name to installitgloballyonthesystemandalsoaddtherequiredfile locationtothePATHenvironmentvariable.

Colourcombinationslikeblackandlime,anddeepblueand yellowweretested.Uponresearchandpropertuningbased on the reviews obtained, maroon proved to be a good candidateforthebackgroundcolour.Hence,itwasdecided that an off-brown maroon would be the base colour, with limetocontrastit.Thismayseemtobecounter-intuitiveas Deuteranopiaaffectstheperceptionofthecoloursredand green. But care was taken to ensure that different panes were of different shades and that the difference between thoseshadesweresufficientforuserstobeabletodiscern betweenthedifferentelementsintheeditor window. The maroon and lime combination, ensured a proper contrast wasmaintainedbetweenthepanesinthewindowandalso received good feedback. Various shades of maroon were used in different panes and the terminal, while lime was usedinthemenus,andintheborders.

Fig -2:InstallationofvscepackageontheVSCode integratedterminal

Fig -3:Shadesofmaroonusedintheeditorwindow

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056

Thesetwoshadesofmarooncanbemistakenforthesame colour, but work well when combined with the contrast colourelementlime.

6.3 Creating a Publisher on VS Code Marketplace

OnceaPAThasbeencreatedontheAzureDevOpsportal,a publisherhastobecreatedontheVSCodemarketplacein ordertopublishtheextension.Thepublisherdetailswillbe visibleexternally.

6.4 Pushing into Production

OnceapublisherandaPATiscreated,theextensioncannow be pushed to production. On the integrated terminal, the publisheristhenloggedinusingthevscepackageandthe PAT.

vsce login <publisher name>

Fig -4:Shadesoflimeusedintheeditorwindow

Uponenteringthiscommand,itwillthenaskfora PAT.Afterthisisentered,theconcernedpublisherwouldbe loggedintotheAzureDevOpsportalprogrammatically. Next,theextensioncreatedispackagedusing vsce package

The extensioncanthen be published bysimplytypingthe command vsce publish

7. ANALYTICS

Fig -5:MainJSONfileforcolourcustomization

6. DEPLOYMENT

6.1 Microsoft Account Creation

VS code is a source-code editor made by Microsoft. Even though it is open-source now, Microsoft provides support and also maintains the extensions. Hence, a Microsoft AccountisrequiredtopublishanextensionontotheVisual StudioCodeMarketplace.

6.2 Creation of PAT on Azure DevOps portal

ExtensionsinVSCodearepushedintoproductionthrough the Azure DevOps pipeline. In order to make use of this pipeline,aPersonalAccessToken(PAT)mustbecreatedon theAzureDevOpsPortal.Theallowedpermissionsforthe PATmustincludeMarketplaceaccessandmanagement.

The status of published extensions can be viewed on the publisher dashboard. Once an extension passes all verificationchecks,itthenmovesthroughthepipelinetobe deployedintoproduction.Theextensioncanbeseeninthe VSCodemarketplaceatthispoint.

Fig

-6:

RevBlazeHighContrastVSCodecolourthemeon theVSCodeMarketplacewithintheeditor

Thepublisherdashboardalsohasprovisionstoviewother analyticsonapublishedextension.Theconversionfunnel, ratingsandreviews,andthechangelogofanextensioncan beviewed.

Volume: 09 Issue: 09 | Sep 2022 www.irjet.net p-ISSN: 2395-0072 © 2022, IRJET | Impact Factor value: 7.529 | ISO 9001:2008 Certified Journal | Page1299

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056

Volume: 09 Issue: 09 | Sep 2022 www.irjet.net p-ISSN: 2395-0072

9. RESULTS & CONCLUSIONS

RevBlazeHighContrastisaVSCodecolourthemeextension inhighcontrastthathasbeenconsciouslydevelopedtoaid developerswithDeuteranopiacolourvisiondeficiency.The extensionhasbeenwellreceivedwithover200downloads fromthemarketplaceasofAugust2022.

Link to download and install the colour theme: https://marketplace.visualstudio.com/items?itemName=rev matcher01.rev-blaze-high-contrast

Link to the source code of this color theme extension: https://github.com/RapidCompiler/rev-blaze-high-contrast

ACKNOWLEDGEMENT

IwishtothankmyprofessorDr.VisalakshifromPSGCollege of Technology for her constant support and guidance throughoutthisprojectandmycourseofstudy.

REFERENCES

[1] Best Code Editors 2022, creativebloq.com, https://www.creativebloq.com/advice/best-codeeditors

[2] 2021 Stack Overflow Developer Survey, insights.stackoverflow.com, https://insights.stackoverflow.com/survey/2021

[3] ColourBlindnessStatistics,colourblindawareness.org, https://www.colourblindawareness.org/colourblindness/types-of-colourblindness/#:~:text=The%208%25%20of%20colour%2 0blind,moderate%20or%20severe%20anomalous%20c onditions

[4] Developer Statistics, future-processing.com, https://www.future-processing.com/blog/how-manydevelopers-are-there-in-the-world-in2019/#:~:text=According%20to%20the%2020th%20e dition,20%25%20compared%20to%20mid%202020

[5] Deuteranopia, Red-Green Colour Blindness, colorblindness.com, https://www.colorblindness.com/deuteranopia-red-green-colorblindness/

[6] Deuteranopia:HowtotellifyouhaveRed-GreenColor Blindness, https://www.healthline.com/health/deuteranopia#:~:t ext=Red%2Dgreen%20color%20blindness%20is%20ty pically%20caused%20by%20genetic%20mutations,OP N1MW%20(green%20pigment)%20genes.

International Research Journal of Engineering and Technology (IRJET) e-ISSN: 2395-0056

[7] CreatingaVSCodeTheme,css-tricks.com,https://csstricks.com/creating-a-vs-code-theme/

[8] Visual Studio Code Colour Theme extension API, code.visualstudio.com, https://code.visualstudio.com/api/references/themecolor

[9] 2022 Stack Overflow Developer Survey, https://survey.stackoverflow.co/2022

[10] Visual Studio Code, Wikipedia, https://en.wikipedia.org/wiki/Visual_Studio_Code

Volume: 09 Issue: 09 | Sep 2022 www.irjet.net p-ISSN: 2395-0072 © 2022, IRJET | Impact Factor value: 7.529 | ISO 9001:2008 Certified Journal |