Change UI font-size in Atom

Question

Im using the material-UI theme in Atom (MacBook Pro, 2021). I wish to make some of the UI text bigger, ex the text on tabs, menus, buttons, welcome page and so on. (note: I don't mean the text/code in the actual editor!).

For example, I wish to make the text of these menu options larger. (print-screen from Atom):

I can't find this option in neither the atom settings, nor the material settings. I've looked at the material less-files but I don't understand them. Searched google and SO but I haven't found a solution that works for me.

Please keep in mind that I am a beginner if you have an answer!

Answer 1

Atom comes with a user stylesheet that one can use to override almost all parts of the UI. For example, you can add the following to increase the font-size of all DOM nodes by 120% – except the text editor itself:

html:not(atom-text-editor) {
    font-size: 120% !important;
}

If you want to make more granular changes, you will need to use more specific CSS selectors. Fortunately, you can use Atom's built-in developer tools to inspect the selectors of the editor.