Creating a Custom Theme for ISESteroids

A Detailed look at ISESteroids Themes and their XML format. Each XML value is explained for easy reference.

I am a big fan of the Powershell ISE, but I have always felt it was lacking. I have never used it exclusively, but it has a set place in my toolset. Recently I was watching a talk by Dave Wyatt and saw him using ISESteroids. I was immediately interested and had to try it out. After playing with it I noticed it had additional theming support. I have always been unimpressed with the default ISE theming, so this excited me.

I prefer creating custom themes for my text editors. I am inside a text editor for the vast majority of my day, so even small adjustments can vastly improve my user experience. ISESteroids has really changed the way I look at the ISE. I normally have issues using dark themes with editors like Powershell ISE. I feel dark themes are easier on the eyes, but much of this is ruined when using a dark theme with a white editor. ISESteroids gives me enough control over the interface theme that a dark syntax theme is doable.

When exploring the ISESteroids Theme Manager I had issues finding the values I was looking for. If you enable UI Customization it allows you to right click an element and customize the color. This is great in theory, but I could figure out where to click to change a large percentage of the values. I quickly realized that going to the actual xml file and manually editing the values was the way to go. I quickly found that trial and error was needed for finding the correct values to change. This process was actually quite time consuming, so I decided to document the process and share my results so others may have an easier time than I did. It also will make it easier to port some of my other themes over. I will be adding any themes I create to my Github.

Github Gist

If you just need a quick reference I have created a Theme Template Gist/Repo with comments documenting the theme xml. I go into greater detail with screenshots in this post if further documentation is needed. Feel free to Fork and/or Share any themes or theme ideas.

Click here to go directly to the Gist at the end of this post.

Getting Started

I have good news and bad news. To make things easier, I used a theme that was almost entirely green and made all changes in red. This gave a nice contrast and lets the changes really stand out. However, it may make your eyes bleed. If you aren’t sure where to find your Theme xml files, you can find a link to your theme folder in the theme drop down. You can make changes to your theme and reload it to see the changes. If you do not have a color picker handy, you can just use the built in color picker in ISESteroids.

The default color picker has a nice feature that lets you steal colors from other applications or windows. You can move the color picker window over an application with colors you want. When you have the color picker focused you can move your mouse pointer over a color you want to steal and press ctrl. This will steal the color under the cursor and insert into the color picker. This is an easy way to get colors from other applications.

Console Settings

The Console Window has several customizable settings that are different from the Script Panes. You can Share the Font Settings between the Console and the Script Pane by setting the ShareFontForConsole setting to True. The following settings allow you to set all of the Console Pane and Script Pane Font Settings if you want them to have different values.

<!-- Shares Console and Script Pane Settings -->

<!-- Script Pane Font Settings -->
<ScriptPaneFontFamily>ubuntumono-r.ttf#Ubuntu Mono</ScriptPaneFontFamily>

<!-- Console Pane Font Settings -->
<ConsolePaneFontFamily>sourcecodepro-regular.ttf#Source Code Pro</ConsolePaneFontFamily>

<!-- Console Pane Background and Text Colors -->

<!-- Script Pane Background Color -->

The Text Error Colors can be set with the following Settings:

<!-- Sets the Console Text and Text Background Colors for Error Messages -->

<!-- Sets the Console Text and Text Background Colors for Warning Messages -->

<!-- Sets the Console Text and Text Background Colors for Verbose Messages -->

This image shows Verbose text with ConsolePaneVerboseForegroundColor set to Blue and ConsolePaneVerboseBackgroundColor Set to Transparent.

Verbose Text

The Menu Header can have normal text or can be set to all caps. To set all caps you can set CapitalizeMainMenuHeaders to True.

<!-- This Sets All Caps for Menu Header -->

The following image shows the Menu Header with CapitalizeMainMenuHeaders set to True.

Cap Headers

You will see a Monochrome setting in several places throughout this XML. This setting acts as a switch between a gradient and a solid color. If MenuBarMonochrome is set to true, only the first color setting will be used. The following are the settings for the Menu Bar:

<!-- For Solid Color or Gradient Color Background -->

<!-- For Solid Color Background with Monochrome = True -->

<!-- For Gradient Background Colors if Monochrome = False -->

Solid Menu Bar Color

When MenuBarMonochrome is set to true the MenuBarColor1 will determine the color. The image below shows the changes once applied.

Menu Bar Monochrome

Gradient Colored Menu Bar

If MenuBarMonochrome is set to false the other colors are applied. If MenuBarMonochrome was set to true and you just changed MenuBarColor3 you can see the portion of the gradient that it changes. You can then change one at a time until you get the desired gradient.

Menu Bar Color 3

After a few colors are changed you can start to see the gradient take shape.

Menu Bar Gradient

Tab Settings

Tabs have a few settings that can be tweaked. One of the first I went hunting for was the square tab option. Here are the settings for Tabs.

For Active Tabs:

<!-- For Square Tabs -->

<!-- For Solid Color or Gradient Color Background -->

<!-- For Solid Color Background if Monochrome = True -->

<!-- For Gradient Background Colors if Monochrome = False -->

For Inactive Tabs:

<!-- For Solid Background Color or Gradient Color Background -->

<!-- For Solid Color Background if Monochrome = True -->

<!-- For Gradient Colors if Monochrome = False -->

Tab Borders

Tabs have a ScriptSquareTabs setting that if set to true makes the tab square. This can be seen in the following image:

Square Tab

Active Tab Colors

The Tabs also use a similar Monochrome setting for single color or gradient called ScriptSelectedMonochrome. This works the same as the other Elements that use Monochrome.

Solid Tab Color

You can also see the solid Tab color in the Square Tab image above. Only the ScriptSelectedColor1 value applies if ScriptSelectedMonochrome is set to true.

Gradient Tab Color

If ScriptSelectedMonochrome is set to false the tab will be a gradient. In the example in the image below, ScriptSelectedColor2 is blue, ScriptSelectedColor3 is yellow and ScriptSelectedColor4 is pink. You can see how it makes a crazy Tab color combination.

Gradient Tab

Tab Background Color

The colors for the Tab Background function similar to the other color settings. Here you can find the settings that apply:

<!-- For Solid Color or Gradient Color Background -->

<!-- For Solid Color Background if Monochrome = True -->

<!-- For Gradient Colors if Monochrome = False -->

<!-- Border Trim Color -->

You can the Background with a gradient in the following image:

Gradient Tab Background

The EditorTabControlBackground Setting had a somewhat confusing name. It actually seemed to control the border color of the Editor. You can see the border in the following image:

Tab Background Border Color

Toolbar Settings

The Toolbars are the sets of buttons in the Menu Bar. They have several options that can be customized. Here is a list of the Toolbar Options:

<!-- Color of the Button Groups Background -->

<!-- This is the Group Background Color for the Run/Debug Group  -->

<!-- Used for the Arrow in the Group Overflow -->

<!-- This is the Button Group Background Color for the Run/Debug Area -->

<!-- This is the Border Color -->

Button Groups

The Button Groups by default have a very light transparent color. This will lighten the default background color and make the buttons easier to see. Here is an image of this:

Group Background Color

You can set ToolbarGroupBackground to a full color for a bigger impact. You can see Red in the following image:

Group Background Color Red

You will notice that there are some Group Button Backgrounds that did not change. The Run Code/Debugger section has its own set of Settings. They work the same way as the other group colors.

Overflow Buttons

There are also Overflow Buttons that can be colored. These function the same way as the Button Groups above, but target the Overflow Buttons. You can see them set to Red in the image below:

Group Overflow Background Color

There are also settings for the Code/Debugger section that function the same way. Then the last setting is the RunspaceBarBackground that controls the Border Color. You can see what it looks like set to Red in the image below:

Group Border Color

Function Bar Settings

This section has Settings for the Search and Function Bar Area under the Menu Bar at the top. Here is a list of the Settings:

<!-- Function/Search Area Background Color -->

<!-- Function/Search Area Text Color -->

<!-- Function/Search Area Dropdown Background Color -->

<!-- Function/Search Area Dropdown Text Color -->

The Function/Search Bar is colored by FunctionComboCollapsedFill and the dropdown for your functions is colored by FunctionComboExpandedFill. You can also adjust the Text colors in this section as well. Here is an example of the FunctionComboCollapsedFill being set to Red:

Function Background

And here is a FunctionComboExpandedFill being set to Red:

Function Background

Script Restore Settings

These settings control a Script Expander Menu that is normally hidden. This menu is only visible when the Script Pane is hidden. The settings for this section work the same as the other menu settings that use Monochrome. Here are the settings:

<!-- For Solid Color or Gradient Color Background -->

<!-- For Solid Color Background if Monochrome = True -->

<!-- For Gradient Colors if Monochrome = False -->

Here is an image of the Script Expander with a Red Background:

Function Background

When the Script Pane is hidden, the Script Expander Menu will be in the location of the Tab Bar.

Panel Divider Settings

These settings control the colors of the dividers between scripting, terminal, and other panels. They have the same coloring scheme as the other monochrome settings. There are two different sets of settings that control Vertical and Horizontal Splitters. Here are the settings:

For Vertical Dividers:

<!-- For Solid Color or Gradient Color Background -->

<!-- Border Color -->

<!-- For Solid Color Background if Monochrome = True -->

<!-- For Gradient Colors if Monochrome = False -->

For Horizontal Dividers:

<!-- For Solid Color or Gradient Color Background -->

<!-- Border Color -->

<!-- For Solid Color Background if Monochrome = True -->

<!-- For Gradient Colors if Monochrome = False -->

The picture below shows how the dividers look when Monochrome is set to True and VerticalSplitterColor1 and HorizontalSplitterColor1 are set to Red.

Panel dividers

Status Bar Settings

The Status Bar is the Bar at the very bottom of the ISE. You can customize the coloring of the Bar and its text. There are also options to customize the hyperlink colors. Here are are settings for the Status Bar:

<!-- Sets the Default Color of the Status Bar -->
<!-- The Color of the Status Bar when Powershell is Actively Running -->

<!-- Sets the Color of the Status Bar Text when Powershell is Actively Running -->
<!-- Set the Default Color of the Status Text -->

<!-- Sets the Default hyperlink Color -->
<!-- Sets the Hover hyperlink Color -->
<!-- Sets the Underline Preference -->
<!-- Sets the Hover Underline Preference -->

Here is an image of the Status Bar with StatusBarBackgroundInactive color set to Red, StatusBarForegroundColorInactive set to White, and StatusBarHyperlinkDefaultColor set to a tan shade of yellow:

Status Bar Background

Snippet Settings

This controls the name color of a snippet. In the image below, the color of the word BlockComment is controlled by this setting.

<!-- Snippet Color settings when a Snippet has been added -->

<!-- Snippet Font Settings -->
<SnippetFontFamily>Segoe UI</SnippetFontFamily>

<!-- Color of Snippets when Typed -->

The SnippetHeader, SnippetDescription, and SnippetBorder control the color settings for the Snippet Box that opens after inserting a Snippet. In the image you can see the Snippet box with a Red Border and Light Blue Header.

Snippet Border

When a Snippet text has been typed into the ISE they will be colored to let you know a Snippet can be auto-completed. The SnippetInsertionBorder and SnippetInsertionFill Settings control these colors. In the image below, you can see the text “func1” has been highlighted. A Red background and blue border were used in this example.

Insert Snippet

Gutter Settings

The Gutter can be different colors based on different criteria. If a script is saved or unsaved it can have different colors, but it can also have different colors based on debugging. There are also Gutter settings for colors when there are changes made to the current script. We can also customize the color of the current line Arrow.

<!-- Script Saved State Gutter Colors -->

<!-- Script Debugger State Colors -->

<!-- Gutter Change Colors -->

<!-- Current Line Arrow Colors -->

Debugger Margin Colors

Here we can see the Gutter color when DebuggerMarginSavedScript is Colored Red

Debugger Margin Color Active

When the Debugger is active, the Gutter gets a striped pattern. In the next image we see the Gutter with DebuggerMarginDebuggerActive colored Red with the Debugger Active.

Debugger Margin Unsaved

File Change Colors

When a file is edited the ISE tracks those changes in the gutter using different colors for changes made before a save, after a save, and any changes reverted. The following image shows the Gutter Colors when something has been added, but not yet saved. In the example the TrackChangesBeforeSave has been set to the color Red.

Changes Before Save

Current Line Arrow

The Current Line Arrow can be colored with two different settings. The first determines the background color and the second determines the outline color. This can be seen in the following image.

Current Line Adornment Border

Line Number Settings

Line Numbers have several settings that can change their color depending on certain criteria. These are the settings that control the Line Numbers:

<!-- Line Number Margin Size -->

<!-- Line Number Color -->

<!-- Selected Line Number Color -->

<!-- Bookmark Color -->

<!-- Line Number Function Color -->

<!-- Current Line Number Color -->

<!-- Line Number Font Type -->
<LineNumberMarginFontFamily>OCR A</LineNumberMarginFontFamily>

In the previous section, we saw the Track Changes image. In this image the LineNumberMarginSize was set to 10. In the Below image the LineNumberMarginSize is set to 20. You can see that it has made the margin size much smaller.

Line Number Margin Size

Functions can be set to always have a unique line number color. In the following image the LineNumberMarginFuncForegroundColor is set to Red. This sets the line number to Red if the Line is the start of the Function.

Line Number Function Foreground

Here you can see where multiple lines have been selected. The LineNumberMarginCurrentForegroundColor has been set to Red. All lines in the selection have had their line numbers set to the color Red.

Line Number Selected Color

The below image shows the LineNumberMarginForegroundColor set to Red. This sets the Default Line Number Color.

Line Number Foreground Color

Function Reference Settings

Function References will show up just above Functions in your scripts. Any time those functions are referenced it will give links to the places referencing them. These settings control the Font and Color settings of those References:

<!-- Function Reference Font Settings-->

<!-- Function Reference Color Settings -->

The following image shows an active Reference with 8 References. The FunctionReferenceActive settings is set to the color Red.

Reference Active

Collapsed Test Settings

There are several elements of Collapsed Text that can be customized. The following settings control these elements:

<!-- Collapsed Text Color -->

<!-- Bar in Margin when Hovering -->

<!-- Background of highlighted expandable text -->

<!-- Margin Square Color -->

The CollapsedTextColor Setting controls the color of a collapsed block of text as seen below.

Collapsed Text

The following image shows the CollapseBarSelection and CollapseSelectionBackground Settings. The Brown bar in the margin is the CollapseBarSelection. The CollapseSelectionBackground is set to Red and sets the color of the background when hovering over text that can be collapsed.

Collapsed Selection

The next image shows the the Square in the margin colored Red. This is set by the CollapseSquareBackground Setting.

Collapsed Square

Text Warning Settings

These Settings set the colors of the squiggle lines under issues in your code.

<!-- Squiggle Colors -->

The following image shows Red colored squiggles caused by a Syntax Error.


Brace Settings

These settings set the background and border of Matching Brackets.

<!-- Bracket Colors -->

The following image shows the BraceMatchingFill Setting set to the color Red.

Brace Matching

Selection Settings

The selection colors can be a little confusing at first. There are several settings that control different aspects of Selection Colors. The following are the settings that control these.

<!-- This is the selection color -->

<!-- This is the color when above selection is not focused -->

<!-- Border Color of Selected Lines -->

<!-- Sibling Color Settings -->

<!-- Scope Border Settings -->

<!-- Pipeline Color Settings -->

Highlighted Text

The Actively Selected text is the text you have highlighted. In the following image you can see this set to a transparent shade of red.

Active Selection

Text Section Border

The ASTDashLineColor sets the border color of the section of lines or text you have selected. The following image shows this set to Red.

Dash Line

Sibling Colors

These are the colors of siblings. Siblings are other instances of the currently selected item. In the image below you can see how multiple instances of $ArchivedOutLogFile have been colored.

Sibling Color

Scope Colors

The following image shows the ASTScopeFill setting set to Red. It is the current Scope of where you cursor is located. In this image you can see it colors the entire block of quoted text.

Scope Border

Pipeline Colors

The ASTPipelineFill and ASTPipelineBorder set the colors of a selected Pipeline. In the image you can see these set to Red.

Pipeline Colors

Console Admin Warning Settings

If you right click the left margin in the console, you can turn on Show Admin Warning. If this is enabled and the ISE is launched with Admin privileges, there will be a Bar in the left margin letting you know the ISE has been ran as Admin. This is an added visual feature to help notify ensure the user has ran ISE as admin. If ISE is ran as Admin you will also notice the ISE icon is red. Here are the settings:

<!-- Console Admin Warning Settings -->

The below image shows the Admin Console Warning in the left margin.

Admin Warnings

Color Picker Palette Settings

The Color Picker has a section of easy to select colors called Palettes. The Palettes in the color picker can be set with the following settings:

<!-- Color Picker Palette Colors -->

The following image shows the palettes on the right side.


Syntax Settings

I wont go in depth on these settings. These you can edit via Tools => Options in the ISE. This is the same editor as in the Default ISE.

<!-- Text Color Settings -->

<!-- Script Pane Syntax Settings -->
  <Token Name="Attribute" Color="#FF009F00" />
  <Token Name="Command" Color="#FF00BF00" />
  <Token Name="CommandArgument" Color="#FF00DF00" />
  <Token Name="CommandParameter" Color="#FF00FF00" />
  <Token Name="Comment" Color="#FF007F00" />
  <Token Name="GroupEnd" Color="#FF009F00" />
  <Token Name="GroupStart" Color="#FF00BF00" />
  <Token Name="Keyword" Color="#FF00DF00" />
  <Token Name="LineContinuation" Color="#FF00FF00" />
  <Token Name="LoopLabel" Color="#FF00FF00" />
  <Token Name="Member" Color="#FF00DF00" />
  <Token Name="NewLine" Color="#FF00BF00" />
  <Token Name="Number" Color="#FF009F00" />
  <Token Name="Operator" Color="#FF007F00" />
  <Token Name="Position" Color="#FF009F00" />
  <Token Name="StatementSeparator" Color="#FF00BF00" />
  <Token Name="String" Color="#FF00DF00" />
  <Token Name="Type" Color="#FF00FF00" />
  <Token Name="Unknown" Color="#FF00BF00" />
  <Token Name="Variable" Color="#FF00BF00" />

<!-- Console Pane Syntax Settings -->
  <Token Name="Attribute" Color="#FF00FF00" />
  <Token Name="Command" Color="#FF00DF00" />
  <Token Name="CommandArgument" Color="#FF00BF00" />
  <Token Name="CommandParameter" Color="#FF009F00" />
  <Token Name="Comment" Color="#FF007F00" />
  <Token Name="GroupEnd" Color="#FF009F00" />
  <Token Name="GroupStart" Color="#FF00BF00" />
  <Token Name="Keyword" Color="#FF00DF00" />
  <Token Name="LineContinuation" Color="#FF00FF00" />
  <Token Name="LoopLabel" Color="#FF00DF00" />
  <Token Name="Member" Color="#FF00BF00" />
  <Token Name="NewLine" Color="#FF009F00" />
  <Token Name="Number" Color="#FF009F00" />
  <Token Name="Operator" Color="#FF009F00" />
  <Token Name="Position" Color="#FF00BF00" />
  <Token Name="StatementSeparator" Color="#FF00DF00" />
  <Token Name="String" Color="#FF00FF00" />
  <Token Name="Type" Color="#FF009F00" />
  <Token Name="Unknown" Color="#FF00FF00" />
  <Token Name="Variable" Color="#FF00BF00" />

<!-- XML Syntax Settings -->
  <Token Name="Comment" Color="#FF006400" />
  <Token Name="CommentDelimiter" Color="#FF008000" />
  <Token Name="ElementName" Color="#FF8B0000" />
  <Token Name="MarkupExtension" Color="#FFFF8C00" />
  <Token Name="Attribute" Color="#FFFF0000" />
  <Token Name="Quote" Color="#FF0000FF" />
  <Token Name="QuotedString" Color="#FF00008B" />
  <Token Name="Tag" Color="#FF00008B" />
  <Token Name="Text" Color="#FF000000" />
  <Token Name="CharacterData" Color="#FF808080" />

Finished Theme

This is still a work in progress, and I am still making minor tweaks as I go. This theme is based on a Monokai theme and customized in a few areas for personal preference.



powershell ise theme

Dialogue & Discussion