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

Jiro
Rank
Userlevel 2

Thank you for sharing @mguindon! You’re definitely not the only one with this preference, a few of our engineers threw together some CSS themes like this as a “hackday” project.


Doesn’t look like there are any committed timelines to releasing this type of thing in product (documenting this and passing it to the product team though), so I’m glad you found a workaround that does it for you!


FYI I worked with a customer to get line visualizations to read well on office monitors and stylebot was the path of least resistance to get a dark background and increase the font/line weight in case anyone else comes across this and is curious about other CSS browser extension use cases.

sjsanderson

@mguindon this is great, thank you for sharing! I’ve started using and already a fan over the default.


I’ll say though that I had some issues with the text cursor spacing (with each letter, the cursor would move further from the text while typing, although the text would appear in the right spot).


I’m not super familiar with CSS, but it appears the font-family was the source of the issue for me and I had to comment it out in order for it to work.

mguindon
Userlevel 3

Hi Schuyler,


Glad you like it! As for your issue I assume it’s because you didn’t have Inconsolata or Menlo installed on your system, so the browser reverted to a weird font. You can download the font on Google’s Github here if you’d like:



Removing the font-family class, as you’ve done, allows Looker’s default font to be applied. Or you can modify it to use whatever fixed-width font you prefer for coding.


Generally speaking, yes the styles are not perfect yet… I’ve encountered a few issues myself but I hope to resolve them in the coming weeks. Stay tuned. 🙂

sjsanderson

@mguindon , appreciate the link, you’re totally right. Downloaded the font and working perfectly now.


Also, shared with our BI team here and everyone’s swapped over and trying out new aesthetics!


Thanks again for sharing! Based on our team’s reception I think this is definitely something valuable that Looker should invest some time in standardizing for the platform.

sjsanderson

@mguindon, wondering if you’ve encountered this as well. The parentheses in the SQL runner editor don’t seem to cooperate with the reformatting. Although weirdly the editor in the projects section does format the paratheses correctly.


SQL Runner


Project Editor

mguindon
Userlevel 3

I must admit I did not test the SQL Runner very much. It seems to use a different style class for some of the formatting. I’ll need to dig deeper.

mguindon
Userlevel 3

Adding the following style will fix the parentheses in the SQL Runner:


.ace_paren {

    color: #93a1a1;

}
sjsanderson

That did the trick! Thank you for looking into that @mguindon!

P

@mguindon Thank You!

xin
Rank
Userlevel 2

@mguindon Thank you! Do you have a github repo we can contribute?

mguindon
Userlevel 3

I did not, but I do now 😄



celichtenstein

This is pretty amazing — thanks for sharing!


Small thing, but I can’t for the life of me figure out how to change the background of the text line I’m currently editing. Any ideas?


48

mguindon
Userlevel 3

Hi Cameron,


Glad you like it!


The selector for the line currently being edited is the following:


.ace_marker-layer .ace_active-line, .ace_marker-layer .ace_selection {

background: rgba(255, 255, 255, 0.1);

}


Notice that in this example, an opacity is being set (0.1).

celichtenstein

Thanks for the reply!


Oddly, I’ve switched the the css for that block now to #232323 and I’m still getting the same light-colored background on my cursor line 🤔Is anyone else having this problem?


26


Full Stylus CSS pasted below:


.ace_editor {

    background-color: #232323;

    color: #93A1A1;

    font-size: 12px;

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

}



.ace_identifier {

    color: #c76363;

}



.ace_gutter {

    background: #01313f;

    color: #d0edf7;

}



.ace_print-margin {

    width: 1px;

    background: #33555E;

}



.ace_entity.ace_other.ace_attribute-name, .ace_storage {

    color: #93A1A1;

}



.ace_cursor, .ace_string.ace_regexp {

    color: #D30102;

}



.ace_marker-layer .ace_active-line, .ace_marker-layer .ace_selection {

    background: #232323;

}



.ace_multiselect .ace_selection.ace_start {

    box-shadow: 0 0 3px 0px #002B36;

    border-radius: 2px;

}



.ace_marker-layer .ace_step {

    background: rgb(102, 82, 0);

}



.ace_marker-layer .ace_bracket {

    margin: -1px 0 0 -1px;

    border: 1px solid rgba(147, 161, 161, 0.50);

}



.ace_gutter-active-line {

    background-color: #0d3440;

}



.ace_marker-layer .ace_selected-word {

    border: 1px solid #073642;

}



.ace_invisible {

    color: rgba(147, 161, 161, 0.50);

}



.ace_keyword, .ace_meta, .ace_support.ace_class, .ace_support.ace_type {

    color: #859900;

}



.ace_constant.ace_character, .ace_constant.ace_other {

    color: #CB4B16;

}



.ace_constant.ace_language {

    color: #B58900;

}



.ace_constant.ace_numeric {

    color: #D33682;

}



.ace_fold {

    background-color: #268BD2;

    border-color: #93A1A1;

}



.ace_entity.ace_name.ace_function, .ace_entity.ace_name.ace_tag, .ace_support.ace_function, .ace_variable, .ace_variable.ace_language {

    color: #268BD2;

}



.ace_string {

    color: #2AA198;

}



.ace_comment {

    font-style: italic;

    color: #657B83;

}



.ace_line.ends_with_foreign:not(.starts_with_foreign) .ace_token, .ace_line.ends_with_foreign:not(.starts_with_foreign) .ace_indent-guide {

    background-color: transparent;

}



.ace_gutter-cell.modified {

    background-color: #8f9489;

}



.ace_paren {

    color: #93a1a1;

}
mguindon
Userlevel 3

I tried your CSS and I don’t have that issue (Chrome 73 + Stylebot 2.2). Which browser / extension are you using?


That said, changing this CSS selector to black, on a black background breaks the highlight of selected text so it’s probably not a good idea.

celichtenstein

Thanks for the quick reply @mguindon.


I’ve been using Chrome 73 with Stylus 1.5.3, but after seeing your post I installed Stylebot to try it out using that extension, and everything looks good now! I guess it was something weird with Stylus 🤔


At any rate, thanks again for your help!

mguindon
Userlevel 3

Awesome! 🙂

LStanevich
Userlevel 2

This is great, but there’s one thing driving me crazy…what controls the color of the vertical indentation lines?

mguindon
Userlevel 3

Are you using the latest version of the code that I published on Github? I added the following class which fixes the indent line that was way too bright, which basically just reduces its opacity:


.ace_indent-guide {

    opacity: 0.15;

}
LStanevich
Userlevel 2

Oh, thanks – no, I was using the updated code snippet from your original post.

mguindon
Userlevel 3

I edited the original post for clarity 🙂

Zoran_Stipanicev

@celichtenstein It works with Stylus if you add !important everywhere, at least in FireFox.

Andre_Rangel

hi,

I’m hevig some issus with my cursor, it is showing in od placeses.

did any one had the same isue?

mguindon
Userlevel 3

Hi @Andre_Rangel,


I haven’t experienced that. Which browser are you using, and on which platform?

And did you modify the CSS or are you using it as-is?

Andre_Rangel

hi @mguindon.

i’m Using google chrome , css 2.2. and runnig the code as is.

Reply


Terms of Service