Dark theme for Google Apps Script Web IDE
// ==UserScript==
// @name GAS Dark Theme | Google Apps Script
// @namespace https://t.me/yevhen_g_feedback
// @version 0.5
// @description Dark theme for Google Apps Script Web IDE
// @author i_muhozhuk
// @license MIT
// @match https://script.google.com/home/projects/*
// @icon https://ssl.gstatic.com/images/icons/product/script_chrome_only-256.png
// @iconURL https://ssl.gstatic.com/images/icons/product/script_chrome_only-256.png
// @grant GM_addStyle
// ==/UserScript==
const textMainColor = 'rgb(200 200 200)'
const textInActiveColor = 'rgb(100 100 100)'
const textActiveColor = 'rgb(33 150 243)' //rgb(26 115 232)
const backgroundMainColor = 'rgb(20 20 20)'
const backgroundMainColorActive = 'rgb(42 42 42)'
const borderColor = 'Dimgrey'
//////////////////// body
GM_addStyle(` body { background-color: ` + backgroundMainColor + ` !important; color: ` + textMainColor + ` !important; } `);
//////////////////// header
GM_addStyle(` .gb_na, .gb_oa, .gb_pa, .gb_ua { background: ` + backgroundMainColor + ` !important; } `); // Top background
GM_addStyle(` .UGZzee { color: #2196f3 !important; } `); // project name
GM_addStyle(` .Gn5yxe { background: #28394f !important; } `); // deploy button
//////////////////// Deploy popup window
GM_addStyle(` .dF8OKd.dF8OKd .VfPpkd-k2Wrsb { color: ` + textMainColor + ` !important; } `); // text New deployment
GM_addStyle(` .rVN4tc { color: ` + textMainColor + ` !important; } `); // text _Select type_ _Configuration_
GM_addStyle(` .OR6HJc { color: ` + textMainColor + ` !important; } `); // text _Please select a deployment type_
GM_addStyle(` .Dkym0 .VfPpkd-StrnGf-rymPhb-b9t22c { color: ` + textMainColor + ` !important; } `); // Left part with selected deploymeny types
GM_addStyle(` .UqoNDb { color: ` + textMainColor + ` !important; } `); // right part Sections headlines
GM_addStyle(` .VfPpkd-O1htCb-OWXEXe-INsAgc .VfPpkd-TkwUic.VfPpkd-NSFCdd-i5vt6e-OWXEXe-mWPk3d .VfPpkd-NLUYnc-V67aGc-OWXEXe-TATcMc-KLRBe,
.VfPpkd-O1htCb-OWXEXe-INsAgc .VfPpkd-TkwUic .VfPpkd-NSFCdd-i5vt6e-OWXEXe-mWPk3d .VfPpkd-NLUYnc-V67aGc-OWXEXe-TATcMc-KLRBe
{ color: ` + textMainColor + ` !important; } `); // inactive field titles
GM_addStyle(` .ReCbLb:not(.VfPpkd-O1htCb-OWXEXe-OWB6Me).VfPpkd-O1htCb-OWXEXe-XpnDCe .VfPpkd-NLUYnc-V67aGc { color: ` + textActiveColor + ` !important; } `); // active field titles
GM_addStyle(` .ReCbLb:not(.VfPpkd-O1htCb-OWXEXe-OWB6Me) .VfPpkd-uusGie-fmcmS { color: ` + textMainColor + ` !important; } `); // field values
GM_addStyle(` .VfPpkd-xl07Ob-XxIAqe { background-color: ` + backgroundMainColor + ` !important; } `); // dropdown list - inactive line background
GM_addStyle(` .s8kOBc .VfPpkd-StrnGf-rymPhb { color: ` + textMainColor + ` !important; } `); // dropdown list - inactive item text
GM_addStyle(` .s8kOBc .VfPpkd-StrnGf-rymPhb .VfPpkd-StrnGf-rymPhb-ibnC6b.VfPpkd-StrnGf-rymPhb-ibnC6b-OWXEXe-gk6SMd { background-color: ` + backgroundMainColorActive + ` !important; } `); // dropdown list - active line background
GM_addStyle(` .s8kOBc .VfPpkd-StrnGf-rymPhb .VfPpkd-StrnGf-rymPhb-ibnC6b-OWXEXe-gk6SMd { color: ` + textMainColor + ` !important; } `); // dropdown list - active item text
GM_addStyle(` .WdTuBd { background: #343434 !important; } `); // text _This can also be used a library._
GM_addStyle(` .ei1fj { color: ` + textMainColor + ` !important; } `); // description of the library and additions
GM_addStyle(` .z80M1.N2RpBe::before { border-right: 2px solid ` + textMainColor + ` !important; border-bottom: 2px solid ` + textMainColor + ` !important; } `); // checkmarks on selected deployment types
//// Manage deployments
GM_addStyle(` .P2Hi5d { color: ` + textMainColor + ` !important; } `); // left part. Active and archived deployment names
GM_addStyle(` .cfWmIb:not(.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me) .VfPpkd-fmcmS-wGMbrd { color: ` + textMainColor + ` !important; } `); // Description field value enabled
GM_addStyle(` .ReCbLb.VfPpkd-O1htCb-OWXEXe-OWB6Me .VfPpkd-uusGie-fmcmS { color: ` + textInActiveColor + ` !important; } `); // Version field value disabled
GM_addStyle(` .cfWmIb.VfPpkd-fmcmS-yrriRe-OWXEXe-OWB6Me .VfPpkd-fmcmS-wGMbrd { color: ` + textInActiveColor + ` !important; } `); // Description field value disabled
GM_addStyle(` .htsTJ { color: ` + textMainColor + ` !important; } `); // text Google Workspace Add-on
GM_addStyle(` .FjocWc { color: ` + textMainColor + ` !important; background: ` + backgroundMainColor + ` !important;} `); // unselected field title Deployments
GM_addStyle(` .uDEFOc.nnGvjf .FjocWc { color: ` + textActiveColor + ` !important; } `); // selected field title Deployments
GM_addStyle(` .sL3KDe { color: ` + textMainColor + ` !important; } `); // field value Deployments
GM_addStyle(` .Xw7Kb .VfPpkd-StrnGf-rymPhb-b9t22c { color: ` + textMainColor + ` !important; } `); // text dropdown list
//////////////////// left frame with icons and titles of tab names
GM_addStyle(` .td5WLe { background-color: ` + backgroundMainColor + ` !important; border-right: 1px solid ` + borderColor + ` !important;} `); // left vertical frame - tab names background and dividing line
GM_addStyle(` .ZHQ5U.ZHQ5U { border-top: 1px solid ` + borderColor + ` !important;} `); // dividing line horizontal under the name of the project
GM_addStyle(` .LDouke { border-left: 1px solid ` + borderColor + ` !important;} `); // left vertical frame - dividing line vertical to the left of the code window
GM_addStyle(` .voS0mf { border-bottom: 1px solid ` + borderColor + ` !important;} `); // left vertical frame - dividing line vertical above the window with the code
GM_addStyle(` .hmN6tf { border-bottom: 1px solid ` + borderColor + ` !important;} `); // left vertical frame - dividing line under Files and Services
GM_addStyle(` .GLLFQe:not(:first-child) { border-top: 1px solid ` + borderColor + ` !important;} `); // left vertical frame - dividing line above Libraries
GM_addStyle(` .R5rHwb { color: ` + textMainColor + ` !important; } `); // unactive tab title background
GM_addStyle(` .hcgnWc::before { background-color: ` + textInActiveColor + ` !important; } `); // active tab title background
GM_addStyle(` .kcW8jf:hover::before { background-color: ` + backgroundMainColorActive + ` !important; } `); // hover tab title background
GM_addStyle(` .hcgnWc .b7QOjc, .hcgnWc .R5rHwb, .hcgnWc:hover .b7QOjc, .hcgnWc:hover .R5rHwb, .hcgnWc:focus .b7QOjc, .hcgnWc:focus .R5rHwb { color: ` + backgroundMainColor + ` !important; } `); // tab icon current active
GM_addStyle(` .kcW8jf:hover .b7QOjc, .kcW8jf:hover .R5rHwb, .kcW8jf:focus .b7QOjc, .kcW8jf:focus .R5rHwb { color: ` + textActiveColor + ` !important; } `); // tab icon and tab names HOVER:
//////////////////// tab Overview
GM_addStyle(` .DqxlK { color: ` + textMainColor + ` !important; } `); // text _Project Details_
GM_addStyle(` .Hjavoc, .ISlbqe { color: ` + textMainColor + ` !important; } `); // text upper part of the tab Overview
GM_addStyle(` .JJYS0b.VfPpkd-AznF2e-OWXEXe-auswjd .VfPpkd-jY41G-V67aGc { color: ` + textMainColor + ` !important; } `); // tabs _All_ _Head_
GM_addStyle(` .z9lUof { background-color: ` + backgroundMainColor + ` !important; } `); // Summaru
GM_addStyle(` .Y7MQLd { background-color: ` + backgroundMainColor + ` !important; } `); // Health chart
//////////////////// tab Editor
GM_addStyle(` .y2Opbf { color: ` + textMainColor + ` !important; } `); // headlines _Files Libraries Services_
GM_addStyle(` .StrnGf-VfPpkd-rymPhb { color: ` + textMainColor + ` !important; } `); // file names
GM_addStyle(` .asc_FolderRoot { background: ` + backgroundMainColor + ` !important; } `); // file names background
GM_addStyle(` .UeVsd { color: ` + textActiveColor + ` !important; background: ` + backgroundMainColorActive + ` !important; } `); // file names highlited
GM_addStyle(` .rgrYqe:hover .VfPpkd-kBDsod, .rgrYqe.u3bW4e .VfPpkd-kBDsod, .rgrYqe.iWO5td .VfPpkd-kBDsod { color: ` + textMainColor + ` !important;} `); // plus icon (create a new File on the left)
GM_addStyle(` .wIlPPc:hover .VfPpkd-kBDsod, .wIlPPc.u3bW4e .VfPpkd-kBDsod, .wIlPPc.iWO5td .VfPpkd-kBDsod { color: ` + textMainColor + ` !important;} `); // plus icon (create a new Libraries and Services on the left)
GM_addStyle(` .z80M1 { color: ` + textMainColor + ` !important;} `); // dropdown menu to create new Script file or HTML file
GM_addStyle(` .z80M1.FwR7Pc { background-color: ` + backgroundMainColorActive + ` !important;} `); // active dropdown menu to create new Script file or HTML file
GM_addStyle(` .JAPqpe, .z80M1 { background: ` + backgroundMainColor + ` !important;} `); // background active dropdown menu to create new Script file or HTML file
//// file options
GM_addStyle(` .DPvwYc { color: ` + textMainColor + ` !important } `); // three dots icon (Kebab menu or More options icon)
GM_addStyle(` .z80M1.RDPZE { color: ` + textInActiveColor + ` !important; } `); // file context menu Inactive item
GM_addStyle(` .cC1eCc .VfPpkd-P5QLlc { background-color: ` + backgroundMainColor + ` !important; } `); // Message box Delete File
GM_addStyle(` .T3JSJe.T3JSJe .VfPpkd-k2Wrsb { color: Coral !important; } `); // Message box delete file - Title
GM_addStyle(` .cC1eCc .VfPpkd-cnG4Wd { color: ` + textMainColor + ` !important; } `); // Message box delete file - message text
//// actions bar
GM_addStyle(` .IVKqHd.kQidhf[disabled] .VfPpkd-kBDsod { color: ` + textInActiveColor + ` !important; } `); // undo redo save run buttons disabled
GM_addStyle(` .IVKqHd.kQidhf .VfPpkd-kBDsod { color: ` + textMainColor + ` !important; } `); // undo redo save run buttons enabled
GM_addStyle(` .IVKqHd.kQidhf:hover .VfPpkd-kBDsod { color: ` + textActiveColor + ` !important; } `); // undo redo save run buttons enebled hover
GM_addStyle(` .VfPpkd-LgbsSe { color: ` + textMainColor + ` !important; } `); // run debug execute journal text
GM_addStyle(` .LjDxcd:hover:not(:disabled), .LjDxcd.VfPpkd-ksKsZd-mWPk3d-OWXEXe-AHe6Kc-XpnDCe:not(:disabled),
.LjDxcd:not(.VfPpkd-ksKsZd-mWPk3d):focus:not(:disabled), .LjDxcd:active:not(:disabled) { color: ` + textActiveColor + ` !important; } `); // on HOVER: run debug execute journal text
GM_addStyle(` .jgvuAb.iWO5td .ncFHed { background-color: ` + backgroundMainColor + ` !important; } `); // function name dropdown text background-color
GM_addStyle(` .VsRsme .vRMGwf, .Q45Bi { color: ` + textMainColor + ` !important; } `); // function name dropdown text color
GM_addStyle(` .ncFHed .MocG8c.KKjvXb { background-color: ` + backgroundMainColorActive + ` !important; color: ` + textMainColor + ` !important; } `); // function name dropdown text background HOVER
GM_addStyle(` .kPlv1.kPlv1, .kPlv1:focus:not(:disabled), .kPlv1:hover:not(:disabled) { background-color: ` + backgroundMainColorActive + ` !important; } `); // _Execution log_ button checked background-color
GM_addStyle(` .oLvPce { color: ` + textMainColor + ` !important; } `); // text _Execution log_ the one under the code
GM_addStyle(` .ptNZqd { background-color: ` + backgroundMainColor + ` !important; color: ` + textMainColor + ` !important; } `); // Execution log
GM_addStyle(` .Vod31b { color: ` + textMainColor + ` !important; } `); // text _To view logs, select a function and click the "Run" button in the toolbar._
GM_addStyle(` .E1XeTd { background-image: linear-gradient(#000f 0%,#202020 10%,#0000 100%),linear-gradient(#fff1,#00000001); } `); // Execution log gradient background
GM_addStyle(` .fHhrY.ptNZqd:not(:first-child), .ptNZqd+.fHhrY { border-top: 1px solid ` + borderColor + ` !important; } `); // Execution log - horizontal lines
GM_addStyle(` .fHhrY { color: ` + textMainColor + ` !important; } `); // text Notice output lines
GM_addStyle(` .IVKqHd.C9y3Me .TQNnQ { fill: ` + textMainColor + ` !important; } `); // debug icon
GM_addStyle(` .IVKqHd.C9y3Me:hover .TQNnQ { fill: LightGrey !important; } `); // debug icon on HOVER
GM_addStyle(` .VsRsme .e2CuFe, .VsRsme.u3bW4e .e2CuFe { border-color: ` + textMainColor + ` transparent !important; } `); // dropdown menu of functions selection icon
GM_addStyle(` .VsRsme:hover .e2CuFe, .VsRsme.u3bW4e .e2CuFe { border-color: LightGrey transparent !important; } `); // dropdown menu of functions selection icon on HOVER
// Debugger
GM_addStyle(` .nNP6Nb { color: ` + textMainColor + ` !important; } `); // Header Debugger
GM_addStyle(` .tZBfzd { color: ` + textMainColor + ` !important; } `); // Header Call stack Variables
GM_addStyle(` .gu6X1e { background-image: linear-gradient(#000f 0%,#000f 10%,#0000 100%),linear-gradient(#fff1,#00000001); !important; } `); // gradient background
GM_addStyle(` .sxNWcf { color: ` + textMainColor + ` !important; } `); // functions text
GM_addStyle(` .NFrsBd.NFrsBd { color: ` + textMainColor + ` !important; } `); // function name
GM_addStyle(` .rmCevc { color: #aa57f3 !important; } `); // functions text
GM_addStyle(` .iW53ef { color: lightgreen !important; } `); // string variable color
//////////////////// code frame text colors
GM_addStyle(` .monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input { background-color: ` + backgroundMainColor + ` !important; } `); // background
GM_addStyle(` .monaco-editor .margin { background-color: ` + backgroundMainColor + ` !important; } `); // line numbers background
GM_addStyle(` .monaco-editor .line-numbers.active-line-number { color: LightGrey !important; } `); // active line number
GM_addStyle(` .mtk11 { color: #888888 !important; } `); // single line comment
GM_addStyle(` .mtk12 { color: #888888 !important; } `); // multi line comment
GM_addStyle(` .mtk19 { color: #cc7832 !important; } `); // declaration and conditional statement keyword
GM_addStyle(` .mtk17 { color: #cc7832 !important; } `); // declaration and conditional statement keyword
GM_addStyle(` .mtk16 { color: #b589cc !important; } `); // variable name
GM_addStyle(` .mtk31 { color: #ffc66d !important; } `); // class
GM_addStyle(` .mtk1 { color: #bbbbbb !important; } `); // operator and parentheses
GM_addStyle(` .mtk7 { color: #6a8759 !important; } `); // text
GM_addStyle(` .mtk15 { color: #b589cc !important; } `); // Angle Brackets
GM_addStyle(` .mtk4 { color: #4dc8ff !important; } `); // html
GM_addStyle(` .mtk5 { color: #729fc0 !important; } `); // href
GM_addStyle(` .mtk3 { color: #888888 !important; } `); // <!DOCTYPE
// unused var
GM_addStyle(` .squiggly-inline-unnecessary {
opacity: 0.7;
text-decoration-line: underline;
text-decoration-style: wavy;
} `);
// links on used var head
GM_addStyle(` .monaco-editor .peekview-widget .head {
color: #b589cc !important;
background-color: #1b1b1b !important;
} `);
// links on used var head links text
GM_addStyle(` .monaco-editor .peekview-widget .head .peekview-title .filename {
color: #LightBlue !important;
} `);
//// area borders, cursor, selected text, block quotes... code frame
GM_addStyle(` .monaco-editor .view-overlays .current-line { border: 2px solid #333333 !important; } `);
GM_addStyle(` .monaco-editor .selected-text { background-color: #ffdd00 !important; }
.monaco-editor .focused .selectionHighlight { background-color: rgba(225, 239, 252, 0.2) !important; color: #ffffff !important;}
.monaco-editor .selectionHighlight { background-color: rgba(200, 200, 255, 0.15) !important; }
.monaco-editor .focused .selected-text { background-color: rgba(173, 214, 255, 0.3) !important; }
.monaco-editor .selected-text { background-color: #e5ebf1 !important; }
.monaco-editor .cursors-layer .cursor { background-color: #cccccc !important; border-color: #cccccc !important; color: #ffffff !important; }
.monaco-editor .bracket-match { background-color: rgba(150, 150, 0, 0.2) !important; }
.monaco-editor .bracket-match { border: 1px solid #777700 !important; }
.monaco-editor .lines-content .cigr { box-shadow: 1px 0 0 0 ` + backgroundMainColorActive + ` inset !important; }
.monaco-editor .lines-content .cigra { box-shadow: 1px 0 0 0 ` + borderColor + ` inset !important; }
.monaco-editor .line-numbers { color: ` + textInActiveColor + ` !important; }
.monaco-editor .contentWidgets .codicon.codicon-light-bulb { background-color: ` + backgroundMainColor + ` !important; }
`); // Top background
//////////////////// Triggers tab
GM_addStyle(` .N3bjuf { background-color: ` + backgroundMainColor + ` !important; } `); // Triggers Headline text background
GM_addStyle(` .dcch3 { color: ` + textActiveColor + ` !important;} `); // Triggers Headline text
GM_addStyle(` .Od4E9e { color: ` + textMainColor + ` !important;} `); // text _No results_
GM_addStyle(` .ksBjEc:not(:disabled) { color: ` + textActiveColor + ` !important;} `); // text of link button _create a new trigger_
GM_addStyle(` .ksBjEc:hover:not(:disabled) { color: ` + textMainColor + ` !important;} `); // hover: text of link button _create a new trigger_
GM_addStyle(` .XEfnH:hover:not(.Uathie), .XEfnH:focus:not(.Uathie), .XEfnH[aria-selected=true] { background-color: ` + backgroundMainColorActive + ` !important;} `); // selected trigger row background
GM_addStyle(` .SBFkwd { background: ` + backgroundMainColor + ` !important; border-top: 1px solid ` + borderColor + ` !important; } `); // lower left corner - number of rows on page and dividing line
GM_addStyle(` .MocG8c { color: ` + textMainColor + ` !important;} `); // lower left corner - Rows per page: number
GM_addStyle(` .e2CuFe { ` + textMainColor + ` transparent;
border-top-color: ` + textMainColor + `;
border-right-color: transparent;
border-bottom-color: ` + textMainColor + `;
border-left-color: transparent;} `); // number of rows on page - dropdown arror icon
GM_addStyle(` .ncFHed { background: ` + backgroundMainColor + ` !important; } `); // lower frame - number of rows on page - dropdown
GM_addStyle(` .OaLLmb .mUbCce.RDPZE .Ce1Y1c { color: ` + textMainColor + ` !important; } `); // lower frame - number of rows on page - pagination icons
//// Add Trigger message box
GM_addStyle(` .g3VIld { background-color: ` + backgroundMainColor + ` !important; } `); // Add Trigger
//// filter bar
GM_addStyle(` .wYnUv { color: ` + textActiveColor + ` !important; } `); // filter bar initial text and plus icon
GM_addStyle(` .PK2PH { color: ` + textActiveColor + ` !important; } `); // filter bar initial text
GM_addStyle(` .PK2PH { border: 1px dashed ` + textMainColor + ` !important; } `); // filter bar dashed border
GM_addStyle(` .HDWFpc { background: ` + backgroundMainColorActive + ` !important; } `); // filter bar dashed border
//////////////////// Executions
GM_addStyle(` .Y1Vbl { color: ` + textMainColor + ` !important; } `); // Executions headline
GM_addStyle(` .ZBGfLd { background-color: ` + backgroundMainColor + ` !important; color: ` + textMainColor + ` !important; } `); // Executions headline
GM_addStyle(` .AwADOd .nfFC5c { background-color: ` + backgroundMainColor + ` !important; color: ` + textMainColor + ` !important; } `); // Table header
GM_addStyle(` .CtOYUe { background-color: ` + backgroundMainColor + ` !important; } `); // tabular section without header
GM_addStyle(` .nN3Fac { background-color: rgb(0 0 0 / 38%); color: rgb(230 112 104) !important; } `); // error text and background
GM_addStyle(` .HkUAA { color: ` + textMainColor + ` !important; } `); // error text funk name
GM_addStyle(` .fHhrY:focus { background: Black !important;} `); // error text FOCUS
GM_addStyle(` .bJ65Td { color: ` + textMainColor + ` !important;} `); // text _No results_
GM_addStyle(` .Iqn3ce { color: ` + textInActiveColor + ` !important; } `); // text _Try adjusting your filter criteria._
//// filter
GM_addStyle(` .QXubtf .jBmls { background-color: ` + backgroundMainColor + ` !important; } `); // filter dropdown list
GM_addStyle(` .VOEIyf, .VOEIyf .jBmls, .oKubKe { color: ` + textMainColor + ` !important; } `); // filter dropdown list
GM_addStyle(` .oKubKe[aria-selected="true"] { background-color: ` + backgroundMainColorActive + ` !important; color: ` + textMainColor + ` !important;} `); // filter dropdown list active item
//////////////////// Project Settings
GM_addStyle(` .hz7xXd { color: ` + textMainColor + ` !important; } `); // Headline
GM_addStyle(` .HTsFI { color: ` + textMainColor + ` !important; } `); // subtitles
GM_addStyle(` .HjuXVb { color: ` + textMainColor + ` !important; } `); // Settings description
GM_addStyle(` .MlG5Jc { color: ` + textMainColor + ` !important; } `); // Settings opions