Looker Connect Training

Help Center

Documentation

Community

Cloud Certifications

Customizing the IDE

mguindon
Userlevel 3

I’m a big fan of Looker, but I’m not a fan of code editors with a white background. I’m sure I’m not the only one 😄 And the default font size is a bit small on my 4K monitor. Unfortunately, Looker does not have any feature yet to customize the IDE. But hey, good news, this is a web app. We can easily override CSS!



As I didn’t find anyone sharing this previously, I thought I would. The customized styles are based on the popular Solarized Dark color scheme with a bit of customization. I also set Inconsolata as the default font (my favorite development font), and increased the font size to 18px.





Note: This was done quickly, it’s not perfect… Feel free to refine, and post your thoughts/improvements here.



HOW TO:



1- If you don’t have one already, install a browser extension that allows you to override styles (such as Stylebot for Chrome).



2- Add a rule for your Looker instance URL, copy the styles found on the Github repo, and customize to your liking!



3- Enjoy!



POST EDIT 05/24/18: Updated stylesheet to reflect changes discussed below.


POST EDIT 04/04/19: Updated post to link to Github repo.

26 replies

mguindon
Userlevel 3

@Andre_Rangel I’ve never tried the User CSS extension. If you can, I’d try out the Stylebot extension instead, see if that works.


If you want to stay with User CSS, maybe try adding !important in each style for each attribute, that seemed to have fixed issues with the Stylus extension on Firefox. Maybe that would do the trick too in User CSS, eg:


.ace_editor {

    background-color: #232323 !important;

    color: #93A1A1 !important;

    font-size: 12px !important;

    font-family: 'Inconsolata','Menlo' !important;

}

(...etc... continued for all styles)

Reply


Terms of Service