Building a One Dark skin for Learn.co

2017-12-12T05:19:12.995Z

While doing my pre-work for The Flatiron school I fell in love with Github’s Atom editor and particularly the One Dark theme that they have…

While doing my pre-work for The Flatiron school I fell in love with Github’s Atom editor and particularly the One Dark theme that they have created for it. Perhaps indicated by the long standing meme of dark screens for hackers (DOS was my first command line, what was yours?) it turns out that staring at a screen all day can really take a toll on your eyes. I enjoyed the One Dark theme enough that I started looking for ways to get it applied to other applications. Others seem to have had the same desire because if you look around there are actually dark ports for a lot of the most used developer tools out there. (chrome, github, stackoverflow, etc.) As I collected these themes my working experience got more and more homogenous, where I could work for hours without ever having to stare at a bright white, contrasty screen. In fact eventually I got to the point where the only thing I didn’t have a One Dark Theme for was my bootcamp itself. So I decided to make one, and share it with the community.

I actually had the idea before I started the bootcamp, while I was still working my way through the pre work. It fit my rubric of a project I wanted made, that might be useful to others, and I might be able to accomplish myself. It wasn’t until I got through the first week of the program that I took the plunge and started to actually do it.

It turns out all the tools you need to style a website are both simple to use, and right around you already. The most important one is the Developer Tools section of your browser followed closely by the Stylish extension for Chrome.

The process works almost like paint by numbers. You start by downloading the Stylish extension.

Once you have it, navigate to a page you would like to style. You can bring up the extension menu from the small icon that will have appeared to the right of the search bar at the top of your screen.

Next, click on the vertical elipses for the personal styles submenu and click “Create New Style” which will open a new browser tab with a form and a text editor that will allow you to compose and then save a style for the website you have selected.

Once you have this up, you are all set to start assembling your style. From a technical perspective what you are doing is using the extension to overwrite the page’s CSS with some new CSS of your own. Depending on your CSS comfort level you could start by building up a well structured CSS file and then beginning to adjust it to fit the design of the page you are styling, but i found the quick and dirty method below to be both faster and more satisfying.

The next step is to go back to the tab of the page you are styling and open the Developer Tools. On a Mac you can do this with Cmd+Option+I, or by right clicking any part of the page and selecting Inspect. Either way you’ll wind up looking at something like this:

At the top left of this there is a small icon of an arrow over a box. Clicking this turns your pointer into an inspection tool that will identify the HTML and CSS in the DOM that is being used to create the look of any element in the entire page! It’s like having an X-Ray machine for the web.

You can use this to dial in exactly on what you are interested in changing. Want to change the background? Click on it and see the whole screen highlight. Text? Point to the area you want to change. As you hover over various parts of the page you’ll notice that different parts are highlighted in different chunks depending on where they are and how they relate to the elements around them. This is how web pages are built, one element inside another inside another all the way up to the element that holds the entire viewable page in it’s generous frame. By selecting a specific piece with the Inspect tool you will get to see in the left pane of the Developer Tools window exactly where in that giant nest it resides. For us however, the more important piece is in the right pane, where the CSS selectors are displayed.

In the Styles tab of this right pane, you can see every bit of CSS that effects the styling of the element you have selected from the page. The top selector “element.style” is simply a placeholder for the current session and cn be ignored. All of the rest below it show, from top to bottom, which selectors in the CSS stylesheet are applying which effects to the final look of the element. They go from the most specific at the top (and hence most likely to style only the selected element and those like it) to the least specific if you scroll all the way down to the bottom. In the highly specific ones you find things like coloring and formatting that make the element stand out from the page around it. In the lower selectors you find things like font family that are uniform across the page. For our purposes we want as specific as we can get.

If you click on the check boxes near individual style lines you can turn them on and off, and the beauty of Developer Tools will start to show. You can actually change anything you like about the page from here and it will display on the screen for your testing and tinkering delight. It is this property of the Developer Tools that make this process so simple and enjoyable. You do not need to know the underlying logic of the css file, or the layout of the HTML that creates the page, you can just select elements and adjust them on the fly to alter the page to your liking. The tools even give you options to fill out the styles with and easy ways to select between them to let you play.

If this were all there was to it, the web would be everyone’s coloring book. Alas, these changes are only around until your next refresh. Each time the page loads, the DOM is rebuilt and all your careful selecting and editing will be lost. Enter Stylish!

Saving these changes is exactly what Stylish allows us to do! By copying the selectors with their stylings and pasting them into the text editor in the Stylish “New Style” tab you opened earlier you are creating a set of styles that will overwrite the ones generated by the page itself. Now all you have to do is take each change you make and put it into your New Style. Save it there and it will be applied to every page that matches the domain it is specified to (beneath the editor) which in this case should be the page you created it from.

Any time you want to go back to the page as it was originally you can either turn off Stylish all together, or turn off your own Style, from the Stylish icon where we started while you are on the page you’ve styled.

And of course, here is a link to the Learn.co One Dark style that I’ve been building up while working my way through the course. It still has some kinks so please send any feedback my way at sebastian.royer@flatiron-school.com!

And sure, we could have done it from formal CSS and first principles, but it wouldn’t have been as fun. This way we can do it to any site we find!

Happy Styling!