Theming for Atom and Electron developer tools

After switching from the netbeans IDE to github's atom, I realized that some necessary features were missing. Unable to find a suitable package, I decided to try customizing it myself, gaining valuable insight into the editor in the process.

However, one major issue I encountered was the minuscule font size in the 'developer tools' window of atom. Despite attempting to install various CSS themes, including the 'dev tools theme' package for atom, none seemed to take effect. Although I have enabled "Allow custom UI themes," these themes work perfectly fine in the Chrome browser (version 60.0).

I'm wondering if it's possible to inspect the inspector within atom like in chrome, where you can undock the devtools window and press CTL SHIFT I. This would allow me to identify the specific classes that need customization and confirm whether they have been applied correctly.

Also, how can I determine which version of Chrome/Chromium atom is utilizing? It's conceivable that certain features have changed since Google's instructional guides were published.

Lastly, how do I go about manually installing a devtools theme into atom?

If you're facing similar challenges, check out this related question, which offers a solution that works in the browser but not in atom.

cssgoogle-chromeelectronatom-editor

Answer №1

Although I don't typically enjoy answering my own questions, I wanted to share this helpful information for anyone facing similar issues.

If you need to inspect the devTools window in Atom, there are three key steps to follow:

  1. To begin, launch atom via electron by executing the command 
    electron --remote-debugging-port=9222 /usr/lib/atom
    . The port number can vary, and the file paths might differ based on your operating system.
  2. Once Atom opens, toggle the developer tools window and undock it for easier access.
  3. Next, open a separate chrome (or possibly chromium) browser and go to chrome://inspect. Here, you should find 2 or 3 'Remote Target' entries. Clicking inspect will link the browser's devTools window to Atom.

When it comes to installing a theme, start by locating a suitable chrome extension. Test it in your browser before adding it to Atom. Personally, I recommend using Devtools Author, which offers various built-in themes and includes an easy font-size adjustment feature.

To proceed with installation, adhere to these instructions:

  1. Download and extract/build the sources. Store them in a designated location like ~/atom/devTools for organization. If utilizing the aforementioned package, install the required npm dependencies and execute grunt.
  2. In Atom, toggle the developer tools window and navigate to 'Settings -> Experiments -> Allow Custom UI Themes'. Ensure that the default dark theme is disabled as well.
  3. In the devTools window, access the 'console' tab and input the command 
    require('remote').require('browser-window').addDevToolsExtension('/path/to/your/theme')
    . A successful execution will display the theme name, or undefined if any issues arise.
  4. Relaunch the devTools window to witness the theme in action. It will persist even after closing/opening the main window and system reboots.

If you opt for the specified theme, it will introduce an 'Author Settings' tab in devTools where you can customize the theme and adjust the font size.

To remove the theme, utilize the command 

require('remote').require('browser-window').removeDevToolsExtension('theme name')
. To view available theme names, run 
require('remote').require('browser-window').getDevToolsExtensions()
.

Regarding my inquiry about the version of chrome being utilized, unfortunately, I have yet to resolve that specific issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating horizontal scrolling in the div element

I'm working with a div element that looks like this: <div id="tl" style="float:right;width: 400px; height:100px; background-color:Green; overflow-x: scroll;overflow-y: hidden;"> <div id='demo' style="float:left;height ...

jqueryhtmlcss

Shifted picture next to the accompanying words

I have successfully created a slideshow of images using JavaScript. <html> <head> <script language="JavaScript"> var i = 0; var path = new Array(); path[0] = "one.jpg"; path[1] = "two.jpg"; function swapImage() { document.slide ...

javascripthtmlcss

What are some strategies for disregarding the effects of the !important rule

After incorporating some HTML and CSS styling into a third-party site, I encountered an issue where their styling was conflicting with mine, specifically due to certain !important declarations. I want to avoid this conflict without resorting to using !impo ...

htmlcss

Tips for incorporating razor isolated/code behind CSS classes into MudBlazor components

Within my codebehind file, I have defined a CSS class. When I use the "class" attribute on normal HTML elements, the style is applied correctly. However, if I apply the class to a MudElement using the "Class" attribute, the style does not get pulled. Altho ...

cssblazormudblazor

Having trouble properly implementing variable updates when creating a multi-theme website

I have a Next.js app and a globals file containing all the themes: body { margin: 0; font-family: Inconsolata, monospace; background-color: var(--bg-color); } :root { --bg-color: #262a33; --main-color: #43ffaf; --sub-color: #526777; --sub-al ...

javascriptcssreactjsnext.js

Assign a CSS class to a DIV depending on the vertical position of the cursor

The website I am currently developing is located at Within the site, there is a collection of project titles. When hovering over a project title, the featured image is displayed directly below it. I would like to change the positioning of these images to ...

javascriptjquerycss

Requesting an image from the live website using a GET method

Recently, I registered a domain for my personal website. While the site is still a work in progress, I noticed that the logo image fails to display when viewed through the browser on the site. Surprisingly, it shows up perfectly fine when accessed via loca ...

htmlcssftp

Looking for an Angular Material component that displays a list of attributes?

I am trying to create a dynamic list of properties in Angular using Material Design that adjusts for different screen sizes. For example, something similar to this design: https://i.stack.imgur.com/EUsmV.png If the screen size decreases, the labels shou ...

cssangularangular-materialmaterial-designkey-value

Could not locate the CSS file within the HTML document (404)

I've searched high and low on YouTube but can't seem to find a solution to this problem. Every time I run the code, it gives me an error message saying GET net::ERR_ABORTED 404 (NOT FOUND) <html> <head> <title>itays websit ...

htmlcss

Arranging HTML Lists in Perfect Order

I am working with an HTML list that contains links styled as background images rather than text. The container is 200px tall and I would like the links to be centered inline within the container. Usually, I would use line-height:200px; for text to achieve ...

htmlcsshtml-lists

Designing the KendoUI combo box with a touch of style

Is there a way to customize the style of required and invalid fields for KendoUI elements, such as changing the background color of a required input field? I have been using the following styles: .k-textbox>input[required], .k-picker-wrap .k-input[re ...

cssvalidationstyleskendo-uikendo-combobox

Background: Cover causing image to be cut off

I'm having trouble trying to display the top part of a background image under my current navigation bar. I've been unable to identify what mistake I may be making here. Here is my HTML code: <section class="jumbotron"> <div class=" ...

htmlcsstwitter-bootstrap

A missing semicolon is encountered while compiling a React application

I am currently working on my app using Create React App and incorporating scss. I have used a vscode plugin to convert the scss to css, but I keep encountering an error when running npm run build. The error message reads as follows: [email protected ...

cssreactjssassbuild

The rotation of an image in Microsoft Edge results in an HTML file display

One of the images on my website is sourced like this: <p> <img src="images/image.jpg" style="width: 50%;" /> </p> Surprisingly, in Chrome and Firefox, the image looks fine (just how I uploaded it to the server). H ...

htmlcssimageorientation

Tips on how to update the styling of an active link

http://jsfiddle.net/G8djC/2/ Looking to create a tabbed area where content changes based on the tab clicked. The Javascript function switches the link class to active upon clicking. However, struggling to change the color of the active tab beyond the firs ...

javascripthtmlcssclasstabs

Is there a way to locate ComputedStyle elements using Nokogiri?

I am currently using Ruby along with Nokogiri to parse through HTML documents. I am looking to select all nodes that match a CSS class with the style attribute display: none, but the CSS class is unknown in advance. For example: <html> <body&g ...

cssrubynokogiri

Is there a way to position the search bar on a new line within the navigation bar when the screen size is at its maximum width for mobile

I have a search bar on my navigation bar, but I am looking to move it to the next line within a maximum width if the screen display is extra small (xs) or for mobile devices. Below is the code snippet: <nav class="navbar navbar-expand-md fixed-top ...

htmlcsssearchlayoutbootstrap-4

What is the best way to center align the div container horizontally?

Trying to center the #container but all methods have failed. How can I achieve centering using only CSS? body { text-align:center; } <div id="app"> <div id="container"><div id="container_red" style="position:absolute;left:0"> ...

css

Utilize CSS to ensure divs display inline-block, but stack them only if they overlap

Below are the div elements I have: .parent { padding: 10px; background: grey; } .child { background: green; display: block; position: relative; width: 50px; } .stacked { left: 0px; } .three { left: 200px; } <div class="parent"&g ...

htmlcssdisplay

Does CSS padding-top: 100% take into account the parent's width?

I'm a bit perplexed by this discovery and I can't quite comprehend the rationale behind it. The provided code snippet showcases two nested DIVs. The outer DIV has specific dimensions and a relative position set, while the inner DIV also has fixe ...

htmlcsspaddingstyling