One Dark theme and Fira Code font for IDEs
Tags: xcode, fira, vscode, theme
Published: 2018-12-29 07:19:28

---
title: One Dark theme and Fira Code font for IDEs
published: true
description: 
tags: xcode, fira, vscode, theme
---


![](https://cdn-images-1.medium.com/max/2000/1*8vHNdW2w-vvr-wHPen38Ww.jpeg)

A good theme and font can increase your development happiness a lot. Ever since using [Atom](https://atom.io/), I liked its One Dark theme. The background and text colors are just elegant and pleasant to the eyes.

### One Dark

Original designed for Atom, [one-dark-ui](https://atom.io/themes/one-dark-ui) that claims to adapt to most syntax themes, used together with [Fira](https://github.com/mozilla/Fira) Mono font from mozilla.

![](https://cdn-images-1.medium.com/max/3552/0*03uqfI0DFKADizkR)

There is also [Dracula](https://draculatheme.com/) which is popular, but the contrast seem too high for my eyes.

### Fira

I like [FiraCode](https://github.com/tonsky/FiraCode) font the most, it is just beautiful and supports ligatures.

![](https://cdn-images-1.medium.com/max/3408/1*4iJo0-L4cS1OYl_jd3SSXw.png)

Alternatively, you can browse [ProgrammingFonts](https://github.com/ProgrammingFonts/ProgrammingFonts) or other ligature fonts like [Hasklig](https://github.com/i-tu/Hasklig) to see which font suits you.

Theme and font are completely personal taste, but if you like me, please give One Dark and Fira a try, here is how to do that in Xcode, Android Studio and Visual Studio Code, which are editors that I use daily.

## Xcode

Firstly, you need to install the latest compiled font of [FireCode](https://github.com/tonsky/FiraCode/releases)

I used to have my own replication of One Dark, called [DarkSide](https://github.com/onmyway133/DarkSide), this was how I learned how to make Xcode theme. For now, I find [xcode-one-dark](https://github.com/bojan/xcode-one-dark) good enough. Xcode theme is just xml file with .xccolortheme extension and is placed into ~/Library/Developer/Xcode/UserData/FontAndColorThemes

After installing the theme, you should be able to select it from Preferences -> Fonts & Colors

![](https://cdn-images-1.medium.com/max/3648/1*72XHQXThGhqTVpoOcYmF-g.png)

And it looks like below.

![](https://cdn-images-1.medium.com/max/7168/1*Yk1GRdW7ALnU6UcaPyWvRA.png)

## Android Studio

Android Studio defaults to have only Default and Dracula theme. Let’s choose Dracula for now. I hope there will be One Dark support.

![](https://cdn-images-1.medium.com/max/4548/1*SVS1CaXxXH3MvxTLLr4i0w.png)

Also, Android Studio can preferably selects Fira Code, which we should have already installed. Remember to select Enable font ligatures to stay cool

![](https://cdn-images-1.medium.com/max/4548/1*iwKiy_uzCRT5iG9V5luWKQ.png)

It looks like this

![](https://cdn-images-1.medium.com/max/7168/1*MXOaGXuT30B4TNvX4xgGEg.png)

## Visual Studio Code

Installing theme in VSCode is easy with extensions. There is this [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) that we can install directly from Extensions panel in VS Code. Alternatively, you can also choose [Atom One Dark Theme](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark)

![](https://cdn-images-1.medium.com/max/7168/1*Q5L_3MNaJlp1Yz6IpmotEQ.png)

Then go to Preferences -> Settings to specify Fira Code

![](https://cdn-images-1.medium.com/max/6720/1*uVRSZOTCkm1i2VK6CCgXEA.png)

The result should look like this

![](https://cdn-images-1.medium.com/max/7168/1*zqgMt0v_FEGydm67VuUT5w.png)

I hope you find this helpful. May your code continue to compile.

Original post https://medium.com/fantageek/one-dark-theme-and-fira-code-font-for-ides-d67bbe2ac8cb