Feature Request: Custom stylesheets/hex codes for AFE theme

[preston-johnson]

Now that I'm a daily user of the AFE, I often find myself copying code between the AFE and my other editors to leverage my sweet, sweet dark themes.

I love this "hot reloading" iterative flow that the AFE provides with Ctrl+S, but my petulant, inner aesthete recoils at white backgrounds. I'll play with the Inspect window in DevTools for now, but I'd definitely pay a premium for the ability to customize the AFE template hex codes in a settings window or a gist import.

Cheers, and thanks again for making Excel addicting again!

[preston-johnson]

Update: I found the inspector-stylesheet window, so this feature request is not urgent. My eyes are now as happy as my brain.

[preston-johnson]

For anyone interested in a quick templating option for the Modules tab, I generated a list of hex codes from the Ariake Dark theme from VS Code [https://marketplace.visualstudio.com/items?itemName=wart.ariake-dark].

To use these colors:

1. Open the Advanced Formula Editor (AFE)
2. Click the Modules button at the top of the AFE
3. Right-click the ExcelApi footer at the bottom of the AFE
4. Click Inspect
5. With the Elements tab selected at the top of the DevTools window, and the Styles tab selected in the CSS pane on the right, click the "New Style Rule" plus-sign to the right of the "Filter" input/textbox.
6. Double-click the blue "inspector-stylesheet" link that appears.
7. Paste the following CSS into the inspector-stylesheet window and hit Ctrl+S to save:

/* Cursor */
.monaco-editor.vs .cursor,
.monaco-editor.vs-dark .cursor {
    background-color: white !important;
}

/* Top-level menu bar */
#rootDiv > div > div.navBar-351.body-370 {
    background-color: rgb(37, 36, 35) !important;
}

/* Top-level sandwich button */
#rootDiv > div > div.navBar-351.body-370 > div:nth-child(2) > div,
#rootDiv > div > div.navBar-351.body-370 > div:nth-child(2) > div > div.ms-OverflowSet.ms-CommandBar-secondaryCommand.secondarySet-399 > div > button {
    background-color: rgb(37, 36, 35) !important;
}

/* Module tabs menu bar */
#rootDiv > div > div.contentRoot-130 > div.css-109 > div {
    background-color: rgb(37, 36, 35) !important;
}

/* Module tab text */
.ms-Button {
    color: #b9bed5 !important;
}

/* Module tab text */
.ms-Button:hover {
    background-color: rgb(37, 36, 35) !important;
    color: #d1d5e8 !important;
}

/* Main editor */
#rootDiv > div > div.contentRoot-130 > div.css-163 > div > div > div > div.overflow-guard > div.monaco-scrollable-element.editor-scrollable.vs > div.lines-content.monaco-editor-background {
    background-color: #1f212a !important;
}

/* Line numbers gutter */
#rootDiv > div > div.contentRoot-130 > div.css-163 > div > div > div > div.overflow-guard > div.margin > div.margin-view-overlays {
    background-color: #1f212a !important;
}

/* ExcelApi footer bar */
#rootDiv > div > div.css-353 {
    background-color: rgb(20, 20, 20) !important;
    border-top: 1px solid white;
}

/* Line numbers text */
.line-numbers {
    color: #b9bed5 !important;
}

/* Active line numbers text */
.active-line-number {
    color: white !important;
}

/* Semicolons, commas, and equal sign */
.mtk1 {
    color: #85B1E0 !important;
}

/* Boolean literals */
.mtk6 {
    color:  #93DDFB !important;
}

/* Number literals */
.mtk7 {
    color: #93DDFB !important;
}

/* Comments */
.mtk9 {
    color: #555C77 !important;
}

/* String literals */
.mtk13 {
    color:  #93DDFB !important;
}

/* Built-in Excel functions */
.mtk14 {
    color: lightgreen !important;
}

/* Arguments/parameters */
.mtk15 {
    color: #B9BED5 !important;
}

/* LAMBDA & LET */
.mtk18 {
    color: #fff !important;
}

/* Custom/UDF names */
.mtk23 {
    color: #85B1E0 !important;
}

/* Selected line border */
.monaco-editor .view-overlays .current-line {
    border: 0px solid #eeeeee !important;
}

/* Indentation indicator lines */
.monaco-editor .lines-content .core-guide-indent {
    box-shadow: 1px 0 0 0 #555C77 inset !important;
}

.bracket-highlighting-1 {
    color: #b19cd9 !important;
}

.bracket-highlighting-2 {
    color: #FF69B4 !important;
}

.bracket-highlighting-3 {
    color: #b19cd9 !important;
}

.bracket-highlighting-4 {
    color: #FF69B4 !important;
}

[jack-williams]

It would be nice to have this, but I currently do not have the time to work on it. I think a dark mode is more likely to happen than support for custom themes (but we may just implement the former using the latter).

For any readers, if you would like to hack on your own themes you can see #15 as an example. Disclaimer: this is not 'officially supported' and the styles could break if we change our Monaco settings.