Anyway to theme DEV Console of atom?


#1

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


Adding Chrome devtools theme to Atom?
Inspect Element View font is very^2 small
How to set font weight to bold?
#2

Found it here: https://github.com/atom/electron/blob/master/docs/tutorial/devtools-extension.md


#3

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

  • Download your favourite chrome dev tools http://devthemez.com/themes/chrome-developer-tools
  • Extract it to easy to remember place , for this example ```~/.atom/devthemez/
  • Inside ~/.atom/init.coffee 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

#4

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:
http://devthemez.com/themes/readable-chromedevthemes

and CSS I need is
here:
https://raw.githubusercontent.com/Augus/Readable-ChromeDevThemes/master/Custom.css

I tried this:

curl -o ~/home/foffb/.atom/Custom.css
https://raw.github.com/Augus/Readable-ChromeDevThemes/master/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
https://raw.githubusercontent.com/Augus/Readable-ChromeDevThemes/master/Custom.css

into ~/.atom as this:
~//home/foffb/.atom/devthemez/Readable-ChromeDevThemes.css

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

\#  6/9/2015: Added for Readable-ChromeDevThemes.css
\# from http://devthemez.com/themes/readable-chromedevthemes
\# available at https://github.com/Augus/Readable-ChromeDevThemes

require('remote').require('browser-window').addDevToolsExtension('~/home/foffb/.atom/devthemez/Readable-ChromeDevThemes.css')

When I restart atom,
I got these errors:

Failed
to load /home/foffb/.atom/init.coffee

ENOENT:
no such file or directory, open
'~/home/foffb/.atom/devthemez/Readable-ChromeDevThemes.css/manifest.json'

Error:
ENOENT: no such file or directory, open
'~/home/foffb/.atom/devthemez/Readable-ChromeDevThemes.css/manifest.json'

at Error (native) 
at Object.fs.openSync (fs.js:544:18)
at Object.module.(anonymous function) [as openSync]
(ATOM_SHELL_ASAR.js:118:20)
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
(/usr/share/atom/resources/atom.asar/browser/lib/chrome-extension.js:108:23)
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 ……
Why
does atom look for manifest.json under in folder ( actually a file )
~/home/foffb/.atom/devthemez/Readable-ChromeDevThemes.css

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

Addendum:

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?


#5

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.


#6

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.


#7

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:

/home/foffb/home/foffb/.atom/Custom.css

I suspect you wanted a different file name:

/home/foffb/.atom/Custom.css

In another spot you mention this file name:

~//home/foffb/.atom/devthemez/Readable-ChromeDevThemes.css

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:

/home/foffb/home/foffb/.atom/devthemez/Readable-ChromeDevThemes.css
/home/foffb/.atom/devthemez/Readable-ChromeDevThemes.css

Subtle but important difference.


#8

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


#9

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


#10

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!

Ex:

nightlion