Background

My Visual Studio Code Setup

Ali Spittel ・ Jul 17 '18

#webdev#beginners#texteditor#vscode

If you've ever seen me respond to a "What theme do you use?" post, you'll know I'm team ✨Fairyfloss✨. Ever since first reading this post by Ali, I've been absolutely in love with the theme - the purples, pinks, mint, yellows, and more purples grabbed my attention and I was hooked.

Flash forward to August 8th and this tweet finds its way into my timeline:

At the time of writing, I like myHyper.js plugins too much to swap over to the Windows Terminal (it is super cool though from what I've played with it) - but this got me thinking... why not update my Hyper theme?

Since then, I've been converting everything to a Fairyfloss theme and this is where I'll be outlining and linking to my 'stylesheets'.

VS Code

VS Code - The place where it all started. This was the easiest to setup since it's bundled nicely as a Extension (link)

One thing I was having issues with in the default theme was theCtrl + F search results and finding where the highlighting was. To correct this, I updated the coloring to my favorite CSS colordeeppink (Hex code#ff1493) and a Vue-ish Green in thissettings.json code block (🚨 Warning: This is very obnoxious):

// settings.json{..."workbench.colorCustomizations":{"editor.selectionBackground":"#ff1493","editor.selectionHighlightBackground":"#ff1493","editor.findMatchBackground":"#ff1493","editor.findMatchHighlightBackground":"#3cb371",},}

Hyper.js Terminal

My full Hyper config file

Hyper has been my terminal of choice for a bit now thanks to the plugins letting me make my terminal do fun things (see the plugins list above - in particularhyper-letters).

Within the Hyper config file (Opened withCtrl + ,) these are the lines needed for theming:

// .hyper.jsmodule.exports={...cursorColor:'#E6C000',cursorAccentColor:'#d5c6f0',foregroundColor:'#fff',backgroundColor:'#5A5475',selectionColor:'#C5A3FF',borderColor:'#C2FFDF',...}

I also use thehyper-active-tab plugin with a ✨ to indicate which tab I'm in, which involves the following two lines:

// .hyper.jsmodule.exports={...// hyper-active-tab symbolactiveTab:'✨'...plugins:[...`hyper-active-tab`,...]}

Desktop

Themer.dev Fairyfloss link

A while back, I remember seeing someone post about how they created a website to generate themes for a bunch of stuff, so I took to twitter and a kind soul knew what I was talking about:

So I went digging through a few Github repositories and foundthe original stylesheet and started dropping colors intothemer.dev until the code sample was close to matching VS Code (more on this later).

Then I downloaded a Prism.js file and the "Block Wave" Desktop wallpaper and used the snipping tool on a fullscreen browser window to fit the wallpaper to my monitor.

Slack

My next target was the Slack sidebar for my personal slack that I use primarily as a brain dump. After playing around a bit with the colors from the style sheet, this is what I ended up with:

#5A5475,#C19FD8,#6C71C4,#FFF352,#C19FD8,#F8F8F0,#FFF352,#FF857F

Dev.to

Dev is nice enough to allow us to customize the link button attached to our account, so I've been rocking with:

Background Color:#5a5475

Text Color:#c2ffdf

Portfolio

In case you haven't been following, Ireally like Fairyfloss, so naturally I wasn't about to stop until I updated mypersonal site.

After I started updating the color scheme for my site, I realized that I hadn't checked the accessibility (a11y from here on) of the colors. I started playing with theContrast Checker and found that not all colors had proper contrast ratios.

After some tweaking of font-size, I added the corresponding comments to my CSS variables for tracking this:

* {  --dark-purple:   hsl(251, 16%, 39%);  /* #5A5475 */ /* All contrasts based on Large text */  --light-purple:  hsl(262, 100%, 82%); /* #C5A3FF */ /* Contrast to dark-purple 3.39 ✔ */  --yellow:  hsl(56, 100%, 66%);  /* #fff352 */ /* Contrast to dark-purple 6.14 ✔✔ */  --mint:          hsl(149, 100%, 88%); /* #C2FFDF */ /* Contrast to dark-purple 6.30 ✔✔ */  --salmon:        hsl(3, 100%, 75%);   /* #FF857F */ /* Contrast to dark-purple 3.01 ✔ */  --pink:          hsl(339, 100%, 86%); /* #FFB8D1 */ /* Contrast to dark-purple 4.41 ✔ */  --text:          hsl(0, 0%, 100%);    /* #FFFFFF */ /* Contrast to dark-purple 7.09 ✔✔ */  --white:         hsl(0, 0%, 100%);    /* #FFFFFF */ /* Contrast to dark-purple 7.09 ✔✔ */  /* ✔ = AA compliant */  /* ✔✔ = AAA compliant */}

Using this, I determined that I should stick to yellow and mint (as much as I want to throw in the pink/salmon colors) and keep my site AAA compliant, other than in my code blocks which use salmon/pink as tertiary colors for syntax highlighting (for now).

Which brings me to syntax highlighting! The last part I needed to figure out before releasing the changes to my site was how to get code blocks to follow suit with everything else. Thankfully, someone pointed me toPrism.js in the previously mentioned Twitter thread - I only needed to figure out how to apply a custom theme to it.

Themer.dev came through once again by generating the base file, which only required minimal tweaking to get in line with the theme. You can find my fullPrism.js file here.

Closing

That's everything that I (currently) have a Fairyfloss theme applied to. My plan is to update this moving forward as I apply the theme to other things.

What about you? Do you have a theme that you're a bit too attached to? What have you applied it to?