Anyway to theme DEV Console of atom?

Chrome Developer tools can be themed , and also there is setting for Custom Dev UI Experiment is already checked by default.

Anyway to apply CSS on them? I tried putting CSSs from chrome dev tool dark themes but they didn’t work

Found it here:

1 Like

Hey , those who wondering how to theme DEV Console here are the steps:

  • Download your favourite chrome dev tools
  • Extract it to easy to remember place , for this example ```~/.atom/devthemez/
  • Inside ~/.atom/ point to the extracted folder doing require('remote').require('browser-window' ).addDevToolsExtension('/home/user/.atom/devthemez/theme-extension/')
  • Hack away to your heart content in theme-extension folder

Hello v3ss0n or any Guru:

I am new to atom…
I ran into problems. Obviously …
Description is here:

I was told to come to this (your) posting.

I use Linux Mint 17.1
So I tried your suggestion, but ….

Here is what I did to adjust font for Dev Tools.
Dev Tools default theme is just fine for me.
the problem is its fonts, as shown in above link…

But I am following your suggestion steps …

Chrome Theme screenshots are from here:

and CSS I need is

I tried this:

curl -o ~/home/foffb/.atom/Custom.css

Total % Received % Xferd Average Speed Time Time Time
Current Dload Upload Total Spent Left Speed

0 0 0 0 0 0 0 0 --:–:-- --:–:-- --:–:-- 0

but it does not work. Why?

So I just copy and paste

into ~/.atom as this:

Then I added ONLY this to ~/.atom/ :

\#  6/9/2015: Added for Readable-ChromeDevThemes.css
\# from
\# available at


When I restart atom,
I got these errors:

to load /home/foffb/.atom/

no such file or directory, open

ENOENT: no such file or directory, open

at Error (native) 
at Object.fs.openSync (fs.js:544:18)
at Object.module.(anonymous function) [as openSync]
at Object.fs.readFileSync (fs.js:396:15)
at Object.fs.readFileSync (ATOM_SHELL_ASAR.js:369:29)
at getExtensionInfoFromPath (/usr/share/atom/resources/atom.asar/browser/lib/chrome-extension.js:32:30)
at Function.BrowserWindow.addDevToolsExtension
at callFunction (/usr/share/atom/resources/atom.asar/browser/lib/rpc-server.js:116:18)

at EventEmitter.<anonymous> (/usr/share/atom/resources/atom.asar/browser/lib/rpc-server.js:208:14)
at emitMany (events.js:108:13)

There is no mention
of manifest.json
in your posting ……
does atom look for manifest.json under in folder ( actually a file )

What do I missed?
Please advice. Thank you.

NOTE: Not sure why some strings above are really big and bold… after submitting this post. ( Fixed. See post below.)


All I want to do is to increase the font size of Dev Tools (UI and its editor) so it is readable and same as Atom UI font size that was adjusted with package hidpi.

While it is nice to have, I do not really need to change the theme for Chrome Dev tool.

Since Atom has been released a while, why am I the only one has this Linux problem and I do not thinkthis thread relates to my font problem?

I reformatted your post using code blocks. See my post here for more formatting tips:

The reason why the lines were big and bold is because Discourse uses Markdown for formatting posts. In Markdown, lines that start with a single # become h1 headers in the generated HTML. If you want to start a line with a # without it becoming a heading, you can put a backslash \ in front of it.

you need to point to folder , not to CSS file.
For ChromeDevToolExtensions to work , you need Folder of CSS and JS file.
Please take a look of those themes i pointed in previous post.
CSS only do not work.

correct path will be like : require('remote').require('browser-window').addDevToolsExtension('/home/foffb/.atom/devthemez/Readable-ChromeDevThemes/)

UPDATE: Fixed the broken path , sorry my mistake.

Is it as simple as a misunderstanding about folder names in Unix? “~” refers to your home directory. If your user name is foffb then your home directory is usually /home/foffb. And if that is the case, then the target file name you mention is:


I suspect you wanted a different file name:


In another spot you mention this file name:


Those double slashes can really confuse things. Some programs interpret it as one slash, other programs (notably Emacs) interpret it as a signal to cut off the beginning. So depending on what exactly you did, you may have specified one of these two file names:


Subtle but important difference.

1 Like

Thank you for pointing a correct path , my post was wrongly pointing too.

How to make developer tools in Atom (Ctrl + Shift + I) “One dark” theme?

Hey all, just wanted to come in here and say that I have made a package that adds Developer Tool styling with an automated theme picker :slight_smile:

@kgrossjo There is no ‘atom one dark’ theme yet, unfortunately, but someone may come along and implement it quite easily with this framework!
There are a couple themes already available that are dark, so take a look at those!



1 Like