A Thread to show your Editor Themes / Styles #319
sjsepan3
started this conversation in
Show and tell
Replies: 1 comment 1 reply
-
HumaneToo-NetPad ThemeAboutThis theme is based on SJSepan-HumaneToo for VScode by Stephen J Sepan. Installation of NetPad themes is not as simple as clicking a button, and require custom editing. Even this one, prepared ahead of time, will require cutting and pasting of the code below into the Settings dialogs. NetPad: SettingsNetPad, and the Monaco Editor that it uses, can both be themed. Both are accomplished through the Settings dialog. Styling of NetPad is discussed at https://github.com/tareqimbasher/NetPad/wiki/Styling#customizing-output. App StylesNetPad itself comes with a light and a dark mode. These can be toggled with a control on the status bar, and it affects everything except the editor area. Some caveats:
App Styles are covered at https://github.com/tareqimbasher/NetPad/wiki/Styling#app-styles. This Theme.theme-netpad-light {
/* TEXT */
--text-color: #34314b;
--text-strong-color: #000000;
--text-hover-color: #000000;
/* BACKGROUND */
--background-color: #FFEAD5;
--background-lighter-color: #FFEAD5;
--list-background: #F7C897;
--form-control-background-color: #FFEAD5;
--form-control-disabled-background-color: #ececec;
--kbd-background-color: #212529;
/* BORDERS */
--border-color: #8D643D;
--border-contrast-color: #bfbfbf;
/* ACTIONS */
--hover-color: #00000011;
--active-color: #0d6efd;
--action-icon-color: #595959;
--action-icon-hover-color: #4f3822;
/* SHADOWS */
--box-shadow-bottom: 0 7px 8px -8px #FFD4B5A0;
--box-shadow-bottom-and-sides: 0 0 8px 2px #FFD4B5A0;
/* TITLEBAR */
--titlebar-background: #F7C897;
/* STATUSBAR */
--statusbar-background: #F7C897;
/* SCRIPT VIEW */
--script-toolbar-background: #F7C897;
--find-text-box-background: #ededed;
/* PANES */
--pane-ribbon-background: #F7C897;
--pane-background: #FFEAD5;
--pane-toolbar-background: #F7C897;
/* CONTEXT MENU */
--context-menu-background: #f3f3f3;
--context-menu-item-hover-background: #7c502188;
/* DIALOG */
--dialog-background: #FFEAD5;
/* TABS */
--tab-background: #FFEAD5;
--tab-active-background: #F7C897;
--tab-active-text-color: #4f3822;
--tab-inactive-text-color: #A88B66;
/* SCROLLBARS & SPLITTER */
--scrollbar-track-color: #cecece;
--scrollbar-thumb-color: #7e8182;
--splitter-color: #F7C897;
}Editor StylesThe themes for the embedded Monaco Editor can be switched from NetPad settings, Editor tab, Theme dropdown. Further, customization is done in the Monaco Options editor, which uses JSON format. You can customize one of the ones that came with Monaco Editor, or if you are implementing an existing theme to match something from VSCode, you should choose the NetPad Light/Dark themes. In any case, you should choose a light or dark to match the mode you are going for. (For example, this theme is a light theme that will be an extensive customization, so NetPad Light is selected.) There is a 'themeCustomizations' key, under which there are two collection keys 'colors' and 'rules'. The 'colors' collection consists of a list of quoted keys and hexadecimal RGB and RGBA color literals. It is possible to drop in most of a 'colors' collection from a VSCode theme as is. Not all keys will work, but it should get you far in a short time The 'rules' collection is a list of objects consisting of a set of properties 'token' and 'foreground' and / or 'background'. This list differs significantly in token names ad property structure from its counterpart in a VSCode theme file, so you will have to modify this one item at a time. You can find a list of token names in the JS list at the 2nd link below. Some caveats:
Editor Styles are covered at https://github.com/tareqimbasher/NetPad/wiki/Styling#editor-styles. The known set of rules can be obtained from line 319 at This Theme "themeCustomizations": {
"colors": {
"activityBar.background": "#F7C897",
"activityBar.border": "#8D643D",
"activityBar.foreground": "#4f3822",
"activityBar.inactiveForeground": "#A88B66",
"activityBarBadge.background": "#4f38229b",
"activityBarBadge.foreground": "#F7C897",
"badge.background": "#4f38229b",
"badge.foreground": "#F7C897",
"breadcrumb.activeSelectionForeground": "#4e4e4e",
"breadcrumb.background": "#F7C897",
"breadcrumb.focusForeground": "#4e4e4e",
"breadcrumb.foreground": "#545454",
"button.background": "#F7C897",
"button.border": "#8D643D",
"button.foreground": "#4f3822",
"button.hoverBackground": "#ffd0ae",
"button.secondaryBackground": "#5f6a79",
"button.secondaryForeground": "#ffffff",
"button.secondaryHoverBackground": "#4c5561",
"checkbox.background": "#ffffff",
"checkbox.border": "#00000000",
"checkbox.foreground": "#616161",
"debugExceptionWidget.background": "#F7C897",
"debugExceptionWidget.border": "#8D643D",
"debugToolBar.background": "#f3f3f3",
"debugToolBar.border": "#d5d5d5",
"diffEditor.border": "#d7d7d7",
"diffEditor.insertedTextBackground": "#65900033",
"diffEditor.removedTextBackground": "#ff000033",
"dropdown.background": "#ffffff",
"dropdown.border": "#00000000",
"dropdown.foreground": "#616161",
"editor.background": "#FFEAD5",
"editor.findMatchBackground": "#a8ac94",
"editor.findMatchBorder": "#979b83",
"editor.findMatchHighlightBackground": "#ea5c0055",
"editor.findMatchHighlightBorder": "#ffffff00",
"editor.findRangeHighlightBackground": "#b4b4b44d",
"editor.findRangeHighlightBorder": "#ffffff00",
"editor.foldBackground": "#add6ff4d",
"editor.foreground": "#000000",
"editor.hoverHighlightBackground": "#add6ff26",
"editor.inactiveSelectionBackground": "#fba8769b",
"editor.lineHighlightBackground": "#ffffff0A",
"editor.lineHighlightBorder": "#a9a9a980",
"editor.rangeHighlightBackground": "#fdff0033",
"editor.rangeHighlightBorder": "#ffffff00",
"editor.selectionBackground": "#fba876",
"editor.selectionHighlightBackground": "#ffd27b54",
"editor.selectionHighlightBorder": "#d1996d",
"editor.wordHighlightBackground": "#57575740",
"editor.wordHighlightStrongBackground": "#0e639c40",
"editorBracketMatch.background": "#0064001a",
"editorBracketMatch.border": "#b9b9b9",
"editorCodeLens.foreground": "#999999",
"editorCursor.background": "#ffffff",
"editorCursor.foreground": "#000000",
"editorError.background": "#B73A3400",
"editorError.border": "#ffffff00",
"editorError.foreground": "#e51400",
"editorGroup.border": "#8D643D",
"editorGroup.emptyBackground": "#FFEAD5",
"editorGroupHeader.tabsBackground": "#FFEAD5",
"editorGroupHeader.tabsBorder": "#8D643D",
"editorGutter.addedBackground": "#81b88b",
"editorGutter.background": "#F7C897",
"editorGutter.commentRangeForeground": "#424242",
"editorGutter.deletedBackground": "#ca4b51",
"editorGutter.foldingControlForeground": "#424242",
"editorGutter.modifiedBackground": "#66afe0",
"editorHoverWidget.background": "#F7C897",
"editorHoverWidget.border": "#8D643D",
"editorHoverWidget.foreground": "#7c5021",
"editorIndentGuide.activeBackground1": "#ad896f",
"editorIndentGuide.background1": "#ad896f76",
"editorInfo.background": "#4490BF00",
"editorInfo.border": "#4490BF00",
"editorInfo.foreground": "#5990c1",
"editorLineNumber.activeForeground": "#4f3822",
"editorLineNumber.foreground": "#A88B66",
"editorLink.activeForeground": "#0000ff",
"editorMarkerNavigation.background": "#a3b6ff",
"editorMarkerNavigationError.background": "#be1708",
"editorMarkerNavigationInfo.background": "#799cbc",
"editorMarkerNavigationWarning.background": "#c99000",
"editorOverviewRuler.background": "#574a4100",
"editorOverviewRuler.border": "#7f7f7f4d",
"editorRuler.foreground": "#d3d3d3",
"editorSuggestWidget.background": "#F7C897",
"editorSuggestWidget.border": "#8D643D",
"editorSuggestWidget.foreground": "#000000",
"editorSuggestWidget.highlightForeground": "#64591c",
"editorSuggestWidget.selectedBackground": "#e89c5a",
"editorWarning.background": "#A9904000",
"editorWarning.border": "#ffffff00",
"editorWarning.foreground": "#b88100",
"editorWhitespace.foreground": "#33333333",
"editorWidget.background": "#F7C897",
"editorWidget.border": "#8D643D",
"editorWidget.foreground": "#545454",
"editorWidget.resizeBorder": "#c7c7c7",
"focusBorder": "#8D643D",
"foreground": "#4f3822",
"gitDecoration.addedResourceForeground": "#587c0c",
"gitDecoration.conflictingResourceForeground": "#6c6cc4",
"gitDecoration.deletedResourceForeground": "#ad0707",
"gitDecoration.ignoredResourceForeground": "#8e8e90",
"gitDecoration.modifiedResourceForeground": "#9e6202",
"gitDecoration.stageDeletedResourceForeground": "#ad0707",
"gitDecoration.stageModifiedResourceForeground": "#895503",
"gitDecoration.submoduleResourceForeground": "#1258a7",
"gitDecoration.untrackedResourceForeground": "#007100",
"icon.foreground": "#545454",
"input.background": "#FFEAD5",
"input.border": "#F7C897",
"input.foreground": "#545454",
"input.placeholderForeground": "#767676",
"inputOption.activeBackground": "#0090f133",
"inputOption.activeBorder": "#007acc00",
"inputOption.activeForeground": "#000000",
"list.activeSelectionBackground": "#7c502188",
"list.activeSelectionForeground": "#ffd4b5",
"list.dropBackground": "#c9b67f",
"list.focusBackground": "#d6ebff",
"list.focusForeground": "#616161",
"list.highlightForeground": "#0a44b4",
"list.hoverBackground": "#7c502166",
"list.hoverForeground": "#2c2c2c",
"list.inactiveSelectionBackground": "#a3a3a39f",
"list.inactiveSelectionForeground": "#494949",
"listFilterWidget.background": "#e2c3ad",
"listFilterWidget.noMatchesOutline": "#be1100",
"listFilterWidget.outline": "#00000000",
"menu.background": "#FFEAD5",
"menu.border": "#4f3822",
"menu.foreground": "#4f3822",
"menu.selectionBackground": "#F7C897",
"menu.selectionBorder": "#00000000",
"menu.selectionForeground": "#4f3822",
"menu.separatorBackground": "#888888",
"menubar.selectionBackground": "#0000001a",
"menubar.selectionForeground": "#333333",
"merge.commonContentBackground": "#E5E5E5FE",
"merge.commonHeaderBackground": "#BFBFBFFE",
"merge.currentContentBackground": "#DBF4EFFE",
"merge.currentHeaderBackground": "#A4E3D6FE",
"merge.incomingContentBackground": "#DBECFFFE",
"merge.incomingHeaderBackground": "#A6CFFFFE",
"minimap.background": "#F7C897",
"minimap.errorHighlight": "#e51400",
"minimap.findMatchHighlight": "#a8ac94FE",
"minimap.selectionHighlight": "#fba87688",
"minimap.warningHighlight": "#b88100",
"minimapGutter.addedBackground": "#81b88b",
"minimapGutter.deletedBackground": "#ca4b51",
"minimapGutter.modifiedBackground": "#66afe0",
"minimapSlider.activeBackground": "#00000040",
"minimapSlider.background": "#00000020",
"minimapSlider.hoverBackground": "#00000060",
"notificationCenter.border": "#8D643D",
"notificationCenterHeader.background": "#F7C897",
"notificationCenterHeader.foreground": "#7c5021",
"notifications.background": "#F7C897",
"notifications.border": "#8D643D",
"notifications.foreground": "#7c5021",
"notificationsErrorIcon.foreground": "#e51400",
"notificationsInfoIcon.foreground": "#5990c1",
"notificationsWarningIcon.foreground": "#c08a00",
"notificationToast.border": "#8D643D",
"panel.background": "#F7C897",
"panel.border": "#8D643D",
"panelSection.border": "#51515159",
"panelTitle.activeBorder": "#4f3822",
"panelTitle.activeForeground": "#4f3822",
"panelTitle.inactiveForeground": "#887157",
"peekView.border": "#007acc",
"peekViewEditor.background": "#a0bccf",
"peekViewEditor.matchHighlightBackground": "#f5d802de",
"peekViewEditor.matchHighlightBorder": "#dbc417",
"peekViewEditorGutter.background": "#a2cde2",
"peekViewResult.background": "#86672d",
"peekViewResult.fileForeground": "#000000",
"peekViewResult.lineForeground": "#414141",
"peekViewResult.matchHighlightBackground": "#ea5c004d",
"peekViewResult.selectionBackground": "#c6d55e33",
"peekViewResult.selectionForeground": "#e6a4a4",
"peekViewTitle.background": "#e2cca2",
"peekViewTitleDescription.foreground": "#616161e6",
"peekViewTitleLabel.foreground": "#333333",
"pickerGroup.border": "#cccedb",
"pickerGroup.foreground": "#0066bf",
"profileBadge.background": "#4f38229b",
"profileBadge.foreground": "#F7C897",
"progressBar.background": "#0e70c0",
"scrollbar.shadow": "#8D643D",
"scrollbarSlider.activeBackground": "#00000040",
"scrollbarSlider.background": "#00000020",
"scrollbarSlider.hoverBackground": "#00000060",
"selection.background": "#fec483",
"settings.focusedRowBackground": "#ffffff07",
"settings.headerForeground": "#868686",
"sideBar.background": "#FFEAD5",
"sideBar.border": "#8D643D",
"sideBar.dropBackground": "#c9b67f",
"sideBar.foreground": "#000000",
"sideBarSectionHeader.background": "#F7C897",
"sideBarSectionHeader.border": "#61616130",
"sideBarSectionHeader.foreground": "#454545",
"sideBarTitle.foreground": "#000000",
"statusBar.background": "#F7C897",
"statusBar.border": "#8D643D",
"statusBar.debuggingBackground": "#cc6633",
"statusBar.debuggingBorder": "#000000",
"statusBar.debuggingForeground": "#ffffff",
"statusBar.foreground": "#4f3822",
"statusBar.noFolderBackground": "#e2b899",
"statusBar.noFolderBorder": "#000000",
"statusBar.noFolderForeground": "#4f3822",
"statusBarItem.activeBackground": "#ffffff25",
"statusBarItem.hoverBackground": "#ffffff1f",
"statusBarItem.remoteBackground": "#16825d",
"statusBarItem.remoteForeground": "#ffffff",
"tab.activeBackground": "#F7C897",
"tab.activeBorder": "#8D643D",
"tab.activeBorderTop": "#8D643D",
"tab.activeForeground": "#333333",
"tab.border": "#8D643D",
"tab.hoverBackground": "#F7C897",
"tab.hoverBorder": "#818181",
"tab.inactiveBackground": "#FFEAD5",
"tab.inactiveForeground": "#333333d1",
"terminal.ansiBlack": "#000000",
"terminal.ansiBlue": "#0451a5",
"terminal.ansiBrightBlack": "#666666",
"terminal.ansiBrightBlue": "#0451a5",
"terminal.ansiBrightCyan": "#0598bc",
"terminal.ansiBrightGreen": "#14ce14",
"terminal.ansiBrightMagenta": "#bc05bc",
"terminal.ansiBrightRed": "#cd3131",
"terminal.ansiBrightWhite": "#a5a5a5",
"terminal.ansiBrightYellow": "#b5ba00",
"terminal.ansiCyan": "#0598bc",
"terminal.ansiGreen": "#00bc00",
"terminal.ansiMagenta": "#bc05bc",
"terminal.ansiRed": "#cd3131",
"terminal.ansiWhite": "#555555",
"terminal.ansiYellow": "#949800",
"terminal.background": "#FFEAD5",
"terminal.border": "#8D643D",
"terminal.foreground": "#5e5d5d",
"terminal.selectionBackground": "#00000040",
"terminalCursor.background": "#0087FF",
"terminalCursor.foreground": "#ffffff",
"textLink.foreground": "#006ab1",
"titleBar.activeBackground": "#F7C897",
"titleBar.activeForeground": "#4f3822",
"titleBar.border": "#8D643D",
"titleBar.inactiveBackground": "#F7C897cc",
"titleBar.inactiveForeground": "#A88B66cc",
"tree.indentGuidesStroke": "#a9a9a9",
"walkThrough.embeddedEditorBackground": "#00000050",
"widget.shadow": "#8D643D",
"window.activeBorder": "#A88B66",
"window.inactiveBorder": "#4f3822"
},
"rules": [
{
"fontStyle": "normal"
},
{
"token": "identifier",
"foreground": "#b7730e"
},
{
"token": "delimiter",
"foreground": "#111111"
},
{
"token": "comment",
"foreground": "#575e68"
},
{
"token": "string",
"foreground": "#ff0000"
},
{
"token": "keyword",
"foreground": "#A07F2A"
},
{
"token": "number",
"foreground": "#ff0000"
},
{
"token": "regexp",
"foreground": "#046d85"
},
{
"token": "operator",
"foreground": "#467878"
},
{
"token": "namespace",
"foreground": "#a17f16"
},
{
"token": "type",
"foreground": "#84A02A"
},
{
"token": "struct",
"foreground": "#046d85"
},
{
"token": "class",
"foreground": "#61751F"
},
{
"token": "interface",
"foreground": "#b7730e"
},
{
"token": "enum",
"foreground": "#c15f0f"
},
{
"token": "typeParameter",
"foreground": "#267f99"
},
{
"token": "function",
"foreground": "#a17f16"
},
{
"token": "member",
"foreground": "#1B81BA"
},
{
"token": "macro",
"foreground": "#a17f16"
},
{
"token": "variable",
"foreground": "#b7730e"
},
{
"token": "parameter",
"foreground": "#008888"
},
{
"token": "property",
"foreground": "#046d85"
},
{
"token": "enumMember",
"foreground": "#c15f0f"
},
{
"token": "event",
"foreground": "#001080"
},
{
"token": "label",
"foreground": "#D4D0D0"
},
{
"token": "plainKeyword",
"foreground": "#A07F2A"
},
{
"token": "controlKeyword",
"foreground": "#A07F2A"
},
{
"token": "operatorOverloaded",
"foreground": "#795e26"
},
{
"token": "preprocessorKeyword",
"foreground": "#0000ff"
},
{
"token": "preprocessorText",
"foreground": "#a31515"
},
{
"token": "excludedCode",
"foreground": "#BEBEBE"
},
{
"token": "punctuation",
"foreground": "#000000"
},
{
"token": "stringVerbatim",
"foreground": "#a31515"
},
{
"token": "stringEscapeCharacter",
"foreground": "#EE0000"
},
{
"token": "delegate",
"foreground": "#267f99"
},
{
"token": "module",
"foreground": "#84A02A"
},
{
"token": "extensionMethod",
"foreground": "#795E26"
},
{
"token": "field",
"foreground": "#046d85"
},
{
"token": "local",
"foreground": "#156D83"
},
{
"token": "xmlDocCommentAttributeName",
"foreground": "#008000"
},
{
"token": "xmlDocCommentAttributeQuotes",
"foreground": "#008000"
},
{
"token": "xmlDocCommentAttributeValue",
"foreground": "#008000"
},
{
"token": "xmlDocCommentCDataSection",
"foreground": "#008000"
},
{
"token": "xmlDocCommentComment",
"foreground": "#008000"
},
{
"token": "xmlDocCommentDelimiter",
"foreground": "#008000"
},
{
"token": "xmlDocCommentEntityReference",
"foreground": "#008000"
},
{
"token": "xmlDocCommentName",
"foreground": "#008000"
},
{
"token": "xmlDocCommentProcessingInstruction",
"foreground": "#008000"
},
{
"token": "xmlDocCommentText",
"foreground": "#008000"
},
{
"token": "regexComment",
"foreground": "#EE0000"
},
{
"token": "regexCharacterClass",
"foreground": "#EE0000"
},
{
"token": "regexAnchor",
"foreground": "#EE0000"
},
{
"token": "regexQuantifier",
"foreground": "#EE0000"
},
{
"token": "regexGrouping",
"foreground": "#EE0000"
},
{
"token": "regexAlternation",
"foreground": "#EE0000"
},
{
"token": "regexSelfEscapedCharacter",
"foreground": "#EE0000"
},
{
"token": "regexOtherEscape",
"foreground": "#EE0000"
},
{
"token": "inlay.hint",
"foreground": "#808080"
},
{
"token": "inlay.hint.type",
"foreground": "#ff8000"
},
{
"token": "inlay.hint.parameter",
"foreground": "#0080ff"
},
{
"token": "editor_completion_item",
"foreground": "#000000"
},
{
"token": "editor_completion_item_description",
"foreground": "#808080"
},
{
"token": "editor_completion_item_highlight",
"foreground": "#ff0000"
},
{
"token": "editor_completion_item_selected",
"foreground": "#0000ff",
"background": "#e0e0e0"
},
{
"token": "editor_completion_item_icon",
"foreground": "#008000"
}
]
}Repo |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Thank you @sjsepan3 for the write up and the themes, looks great! |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
AmberCrtish-NetPad Theme
About
This theme is based on SJSepan-AmberCrtish for VScode by Stephen J Sepan. Installation of NetPad themes is not as simple as clicking a button, and require custom editing. Even this one, prepared ahead of time, will require cutting and pasting of the code below into the Settings dialogs.
NetPad:
Settings
NetPad, and the Monaco Editor that it uses, can both be themed. Both are accomplished through the Settings dialog.
Styling of NetPad is discussed at https://github.com/tareqimbasher/NetPad/wiki/Styling#customizing-output.
App Styles
NetPad itself comes with a light and a dark mode. These can be toggled with a control on the status bar, and it affects everything except the editor area.
These modes can be further customized from NetPad settings, Styles tab, with CSS definitions for the NetPad Light and Dark modes. Check the 'Enable custom styles' checkbox if not already enabled, and paste in the appropriate CSS settings from the link below. Then customize the color values.
Some caveats:
App Styles are covered at https://github.com/tareqimbasher/NetPad/wiki/Styling#app-styles.
This Theme
Editor Styles
The themes for the embedded Monaco Editor can be switched from NetPad settings, Editor tab, Theme dropdown. Further, customization is done in the Monaco Options editor, which uses JSON format. You can customize one of the ones that came with Monaco Editor, or if you are implementing an existing theme to match something from VSCode, you should choose the NetPad Light/Dark themes. In any case, you should choose a light or dark to match the mode you are going for. (For example, this theme is a dark theme that will be an extensive customization, so NetPad Dark is selected.) There is a 'themeCustomizations' key, under which there are two collection keys 'colors' and 'rules'.
The 'colors' collection consists of a list of quoted keys and hexadecimal RGB and RGBA color literals. It is possible to drop in most of a 'colors' collection from a VSCode theme as is. Not all keys will work, but it should get you far in a short time
The 'rules' collection is a list of objects consisting of a set of properties 'token' and 'foreground' and / or 'background'. This list differs significantly in token names ad property structure from its counterpart in a VSCode theme file, so you will have to modify this one item at a time. You can find a list of token names in the JS list at the 2nd link below.
Some caveats:
Editor Styles are covered at https://github.com/tareqimbasher/NetPad/wiki/Styling#editor-styles.
The known set of rules can be obtained from line 319 at
NetPad/src/Apps/NetPad.Apps.App/App/src/core/@application/editor/monaco/monaco-theme-manager.ts
Line 319 in 5d0e787
This Theme
Repo
https://gitlab.com/sjsepan/sjsepan-ambercrtishnetpad
Beta Was this translation helpful? Give feedback.
All reactions