<div title="Background color for illustration only.

fish cannot change the background color of your terminal and it will not be saved. Refer to your terminal documentation to set its background color.">
    <!-- ko with: color_picker -->
    <div class="colorpicker_text_sample" ng-style="{'background-color': terminalBackgroundColor}">
        <span style="position: absolute; left: 10px; top: 3px;" data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'white')}">{{ selectedColorScheme.name }}</span><br>
        <div class="color_picker_background_cells">
	        <span style="display: block; text-align: right; line-height: 110%" data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'white')}">Background Color:<br />(demo only)&nbsp;</span>
            <div ng-style="{'background-color': color}" ng-repeat="color in sampleTerminalBackgroundColors" ng-click="changeTerminalBackgroundColor(color)"  title="Preview with this background color.

fish cannot change the background color of your terminal. Refer to your terminal settings to set its background color."></div>
        </div>
        <!-- This is the sample text -->
        <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
        	  ng-mouseenter="csHoveredType = 'command'"
        	  ng-mouseleave="csHoveredType = false"
              data-ng-style="{ 'color': selectedColorScheme.command}"
              ng-click="selectColorSetting('command')">/bright/vixens</span>

        <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'param'}"
        	  ng-mouseenter="csHoveredType = 'param'"
        	  ng-mouseleave="csHoveredType = false"
              data-ng-style="{ 'color': selectedColorScheme.param}"
              ng-click="selectColorSetting('param')">jump</span>

        <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'end'}"
        	  ng-mouseenter="csHoveredType = 'end'"
        	  ng-mouseleave="csHoveredType = false"
              data-ng-style="{ 'color': selectedColorScheme.end}"
              ng-click="selectColorSetting('end')">|</span>

        <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
        	  ng-mouseenter="csHoveredType = 'command'"
        	  ng-mouseleave="csHoveredType = false"
              data-ng-style="{ 'color': selectedColorScheme.command}"
              ng-click="selectColorSetting('command')">dozy</span>

        <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'quote'}"
        	  ng-mouseenter="csHoveredType = 'quote'"
        	  ng-mouseleave="csHoveredType = false"
              data-ng-style="{ 'color': selectedColorScheme.quote}"
              ng-click="selectColorSetting('quote')"> "fowl"</span>

        <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'redirection'}"
        	  ng-mouseenter="csHoveredType = 'redirection'"
        	  ng-mouseleave="csHoveredType = false"
              data-ng-style="{ 'color': selectedColorScheme.redirection}"
              ng-click="selectColorSetting('redirection')">&gt; quack</span>

        <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'end'}"
        	  ng-mouseenter="csHoveredType = 'end'"
        	  ng-mouseleave="csHoveredType = false"
              data-ng-style="{ 'color': selectedColorScheme.end}"
              ng-click="selectColorSetting('end')">&</span>

        <br>

        <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
        	  ng-mouseenter="csHoveredType = 'command'"
        	  ng-mouseleave="csHoveredType = false"
              data-ng-style="{ 'color': selectedColorScheme.command}"
              ng-click="selectColorSetting('command')">echo</span>

        <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'error'}"
        	  ng-mouseenter="csHoveredType = 'error'"
        	  ng-mouseleave="csHoveredType = false"
              data-ng-style="{ 'color': selectedColorScheme.error}"
              ng-click="selectColorSetting('error')">'Errors are the portals to discovery</span>

        <br>

        <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'comment'}"
        	  ng-mouseenter="csHoveredType = 'comment'"
        	  ng-mouseleave="csHoveredType = false"
        	  data-ng-style="{ 'color': selectedColorScheme.comment}"
        	  ng-click="selectColorSetting('comment')"># This is a comment</span>

        <br>

        <span ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'command'}"
        	  ng-mouseenter="csHoveredType = 'command'"
        	  ng-mouseleave="csHoveredType = false"
              data-ng-style="{ 'color': selectedColorScheme.command}"
              ng-click="selectColorSetting('command')">Th</span><span
              class="fake_cursor"><span style="visibility: hidden">i</span></span><span
              ng-class="{cs_clickable: customizationActive, cs_editing: csEditingType == 'autosuggestion'}"
        	  ng-mouseenter="csHoveredType = 'autosuggestion'"
        	  ng-mouseleave="csHoveredType = false"
              data-ng-style="{ 'color': selectedColorScheme.autosuggestion }"
              ng-click="selectColorSetting('autosuggestion')">s is an autosuggestion</span>


		<div style="position: absolute; right: 5px; bottom: 5px;">

			<span class="customize_theme_button"
				  ng-class="{button_highlight: customizationActive}"
				  data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'white')}"
				  ng-click="toggleCustomizationActive();">Customize</span>

			<span class="save_button"
				  data-ng-style="{'color': text_color_for_color(terminalBackgroundColor || 'white')}"
				  ng-show="showSaveButton"
				  ng-click="setTheme()">{{saveThemeButtonTitle}}</span>
		</div>

    </div>

    <div ng-show="customizationActive">
		<div style="margin: 10px 0 7px 35px;">Choose a color for {{csUserVisibleTitle}}:</div>
		<table class="colorpicker_term256" style="margin: 0px 20px;">
			<tbody>
				<tr class="colorpicker_term256_row" data-ng-repeat="color_array in colorArraysArray">
					<td class="colorpicker_term256_cell" data-ng-style="{'background-color': color, 'color': color}" ng-click="changeSelectedTextColor(color)" ng-repeat="color in color_array">
						<div class="colorpicker_term256_selection_indicator" ng-show="selectedColorScheme[selectedColorSetting] == color" ng-style="{'border-color': border_color_for_color(color)}"</div>
					</td>
				</tr>
			</tbody>
			<!-- /ko -->
		</table>
	</div>

    <div style="margin: 10px 0 7px 35px;">Preview a theme below:</div>

    <div class="color_scheme_choices_scrollview">
		<div class="color_scheme_choices_list">
			<div class="color_scheme_choice_container" data-ng-repeat="colorScheme in colorSchemes" ng-click="changeSelectedColorScheme(colorScheme)">
				<div class="color_scheme_choice_label">
					<!-- This click/clickBubble nonsense is so that we can have a separate URL inside a parent with an onClick handler -->
                                        {{colorScheme.name}}
          <a data-ng-show="colorScheme.url" style="text-decoration: none; color: inherit;" href="{{colorScheme.url}}">&#10138;</a>
				</div>
				<div class="colorpicker_text_sample_tight" data-ng-style="{'background-color': colorScheme.preferred_background}">
					<span data-ng-style="{'color': colorScheme.command}">/bright/vixens</span>
					<span data-ng-style="{'color': colorScheme.param}">jump</span>
					<span data-ng-style="{'color': colorScheme.end}">|</span>
					<span data-ng-style="{'color': colorScheme.command}">dozy</span>
					<span data-ng-style="{'color': colorScheme.quote}"> "fowl" </span>
					<span data-ng-style="{'color': colorScheme.redirection}">&gt; quack</span>
					<span data-ng-style="{'color': colorScheme.end}">&</span>
					<br>
					<span data-ng-style="{'color': colorScheme.command}">echo</span>
					<span data-ng-style="{'color': colorScheme.error}">'Errors are the portals to discovery</span>
					<br>
					<span data-ng-style="{ 'color': colorScheme.comment}"># This is a comment</span>
					<br>
					<span data-ng-style="{ 'color': colorScheme.command}">Th</span><span class="fake_cursor"><span style="visibility: hidden">i</span></span><span data-ng-style="{ 'color': colorScheme.autosuggestion}">s is an autosuggestion</span>
				</div>
			</div>
		</div>
    </div>
    <!-- /ko -->
</div>
