Customizing the IDE


(Martin Guindon) #1

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 :smile: 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 here, and customize to your liking:

Code Snippet:

.ace_editor {
    background-color: #002B36;
    color: #93A1A1;
    font-size: 18px;
    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: rgba(255, 255, 255, 0.1);
}

.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;
}

3- Enjoy!

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


(DCL) #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.


(Schuyler Sanderson) #3

@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.


(Martin Guindon) #4

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. :slight_smile:


(Schuyler Sanderson) #5

@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.


(Schuyler Sanderson) #6

@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


(Martin Guindon) #7

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.


(Martin Guindon) #8

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

.ace_paren {
    color: #93a1a1;
}

(Schuyler Sanderson) #9

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


#10

@mguindon Thank You!


(Xin Bao) #11

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


(Martin Guindon) #12

I did not, but I do now :smile: