Atom (editor): modify existing theme and save as a new one

Question

I do not want to create the entire theme from the scratch.

1. I want to use the existing theme.
2. I want to make some minor style changes (like color) for a few elements.
3. I don't want to save the changes in the original theme but in its copy.

For example.

1. I've installed the Bade3 Notepad theme.
2. I like the notepad++'s highlighting but in find out the grey string are too light.
3. According to Syntax Highlighting Guide for Atom Syntax Highlighting Guide for Atom I've run Atom in Developer Mode.
4. I've opened file that contains some quoted string.
5. Right click some quoted string and select Inspect Element

6. In the Styles tabs I change the color value in

   .string.quoted.php { color: #8b8b8b; }

7. The changes are applied to the real example code so I can adjust color.

8. Let's say I'm fine with #107000

Now I wish to save this changes.

Answer 1

You can achieve this through your personal style sheet without creating or editing a theme.

1. Your "stylesheet Ctrl-Shift-P and typing Application: Open Your Style Sheet.

2. A file will open in Atom that looks similar to this:

   // style the background color of the tree view
   .tree-view {
     // background-color: whitesmoke;
   }
   
   // style the background and foreground colors on the atom-text-editor-element itself
   atom-text-editor {
     // color: white;
     // background-color: hsl(180, 24%, 12%);
   }
   
   // To style other content in the text editor's shadow DOM, use the ::shadow expression
   atom-text-editor::shadow {
     // Add Your Styles Here
   }
   

3. In the area between atom-text-editor::shadow { (line 13) and the closing } (line 15) add you changed styles:

   .string.quoted.php { color: #8b8b8b; }
   

4. Save the Stylesheet and check it is working as expected in your editor, no need to reload or restart the editor.

Note: if you have the Use Shadow DOM check box unchecked in Atom Settings, accessed through Ctrl-,, then you will need to put your styles between atom-text-editor { (line 7) and the closing } (line 10). Try and work with Atom with the Shadow DOM enabled as the option to disable it will go away in future versions.

Here is a short animation to go through the steps I took to get this to work in Atom 1.8 Beta: