Change the theme of chrome on your Mac

( This is the premise of Mac Chrome)

Use the Chrome debugger directly to write code of the students Gospel, how to set up their own debugger, so that it can apply a variety of themes, to achieve the visual effects of sublime ~ This article on the old and new versions of the Chrome browser can (StackOverflow said the split point is Chrome 33) , straight to the subject:

On Mac for low-version chrome browsers:

1) find a suitable chome theme CSS file (e.g. Obsidian for chrome developer tools)

Direct ~/library/application Support/google/chrome/default/user stylesheets/into the custom.css file;

But the experiment on my Mac for a long time failed, and later in the search answers to find the answer, originally for the high version of the Chrome browser has changed the theme of the program, the following text:

Support for have Custom.css been removed from Chrome in version 32.
This answer provides and methods for easily activating style sheets in the developer tools. The second method is recommended, and only works for Chrome 33+, the first method also works for Chrome 32.

Both methods is Chrome extensions, to use the examples below, follow the following steps:

2. Create a directory and put the following files in it.
4. Go tochrome://extensions
6. Select "Developer Mode"
8. Click on "Load unpacked extension"
10. Select the directory you just created.

True emulation of Custom.css

This section uses one of the techniques described at how to inject JavaScript into Chrome DevTools itself. This extension can easily is generalized to fully emulate custom.css, i.e. activate the style sheet onevery page Like Custom.css.
Note:if you ' re using Chrome 33+, then I-strongly recommend the method in the next sections over this one.

Manifest.json

{ "content_scripts": [{ "js": [ "run_as_devtools.js" ], "matches": [ "<all_urls>" ] }], "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC4r/pUHVPYQTn7vu3YHT52I0SKM15OBOTi0Jii4q5Koxd3Gdc/WXdqC2YgMA25J5PRiSubu/nHFf12Ubp3OZyNqB3j45ZscQ+tH1bwcV+cqdvv/Ik6VQaS6/qLmenLdFPKOCg/g1L1iKZu6Jjny6GlovpBj+7gjWQZBIoGBd70HQIDAQAB", "manifest_version": 2, "name": "Emulate Custom.css", "version": "1.0", "web_accessible_resources": [ "Custom.css" ]}

Run_as_devtools.js

if (location.protocol === ‘chrome-devtools:‘) (function() {    ‘use strict‘;    var l = document.createElement(‘link‘);    l.rel = ‘stylesheet‘;    l.href = chrome.runtime.getURL(‘Custom.css‘);    document.head.appendChild(l);})();

Custom.css

/* whatever you had in your Custom.css */

Official method (Chrome 33+ only)

If you want to customize your devtools style,chrome.devtools.panels.applyStyleSheetHave to is used. This feature is currently hidden behind a flag (--enable-devtools-experiments, requires relaunch of Chrome) and a checkbox (after enabling the flag, open the Devtools, click on the Gears icon, go to Experiments and check "Allow UI themes").

Manifest.json

{  "name": "<name> DevTools Theme",  "version": "1",  "devtools_page": "devtools.html",  "manifest_version": 2}

Devtools.html

 <script src="devtools.js"></script>

Devtools.js

var x = new XMLHttpRequest();x.open(‘GET‘, ‘Custom.css‘);x.onload = function() {    chrome.devtools.panels.applyStyleSheet(x.responseText);};x.send();

Custom.css

/* whatever had in your custom.css */ 

For more info, see https://code.google.com/p/chromium/issues/detail?id=318566

The adjustment effect is as follows:

Change the theme of chrome on your Mac