Living the Fairyfloss life ✨
Tags: theming, showdev, portfolio
Published: 2019-10-02 14:17:56

---
title: Living the Fairyfloss life ✨ 
published: true
description: I'm applying the Fairyfloss theme to lots of places, and now you can too!
tags: theming, showDev, portfolio
---

# Background

{% link https://dev.to/aspittel/my-visual-studio-code-setup-1emn %}

If you've ever seen me respond to a "What theme do you use?" post, you'll know I'm team ✨[Fairyfloss](https://marketplace.visualstudio.com/items?itemName=nopjmp.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:

{% twitter 1159607326841757697 %}

At the time of writing, I like my [Hyper.js](https://hyper.is/) 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](https://marketplace.visualstudio.com/items?itemName=nopjmp.fairyfloss))

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): 

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

# Hyper.js Terminal

[My full Hyper config file](https://github.com/12vanblart/Useful-Snippets-12vanblart/blob/master/hyper-config.js)

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`](https://hyper.is/plugins/hyper-letters)). 

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

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

I also use the [`hyper-active-tab`](https://hyper.is/plugins/hyper-active-tab) plugin with a ✨ to indicate which tab I'm in, which involves the following two lines:

```js
// .hyper.js
module.exports = {
  ...    
  // hyper-active-tab symbol
  activeTab: '✨'
  ...
  plugins: [
    ...
    `hyper-active-tab`,
    ...
  ]
}
```

# Desktop

[Themer.dev Fairyfloss link](https://themer.dev/?colors.dark.accent0=%23FF857F&colors.dark.accent1=%23F28144&colors.dark.accent2=%23FFF352&colors.dark.accent3=%23FFF352&colors.dark.accent4=%23C2FFDF&colors.dark.accent5=%23FFB8D1&colors.dark.accent6=%23FFB8D1&colors.dark.accent7=%23C2FFDF&colors.dark.shade0=%235A5475&colors.dark.shade1=%23474247&colors.dark.shade2=%23656066&colors.dark.shade3=%23E6C000&colors.dark.shade4=%23A29DA3&colors.dark.shade5=%23fff&colors.dark.shade6=%23fff&colors.dark.shade7=%23ffffff&colors.light.accent0=%23F03E4D&colors.light.accent1=%23F37735&colors.light.accent2=%23EEBA21&colors.light.accent3=%2397BD2D&colors.light.accent4=%231FC598&colors.light.accent5=%2353A6E1&colors.light.accent6=%23BF65F0&colors.light.accent7=%23EE4EB8&colors.light.shade0=%23FFFCFF&colors.light.shade1=%23E0DCE0&colors.light.shade2=%23C1BCC2&colors.light.shade3=%23A29DA3&colors.light.shade4=%23847E85&colors.light.shade5=%23656066&colors.light.shade6=%23474247&colors.light.shade7=%23282629&activeColorSet=dark&calculateIntermediaryShades.dark=true&calculateIntermediaryShades.light=false)
 
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: 

{% twitter 1167829356346920967 %}

So I went digging through a few Github repositories and found [the original stylesheet](https://github.com/sailorhg/fairyfloss/blob/gh-pages/styles/base.less) and started dropping colors into [themer.dev](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](https://tyler.vanblargan.dev).

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](https://webaim.org/resources/contrastchecker/) 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](https://prismjs.com/) in the previously mentioned Twitter thread - I only needed to figure out how to apply a custom theme to it. 

[Themer.dev](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](https://github.com/12vanblart/tyler-vanblargan/blob/fairy/src/prismjs/themes/fairyfloss-prism.css). 

# 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?*