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 my Hyper.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 the Ctrl + F search results and finding where the highlighting was. To correct this, I updated the coloring to my favorite CSS color deeppink (Hex code #ff1493) and a Vue-ish Green in this settings.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 particular hyper-letters).

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

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

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

// .hyper.js
module.exports = {
  ...    
  // hyper-active-tab symbol
  activeTab: '✨'
  ...
  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 found the original stylesheet and started dropping colors into themer.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, I really like Fairyfloss, so naturally I wasn't about to stop until I updated my personal 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 the Contrast 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 to Prism.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 full Prism.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?