Givin' the light theme some love

Since there are still some glitches around the icons having wonky gradients I went ahead and implemented a medium theme for my environment.  One day if I get realllllllly bored I might rip through and fix all my icons and keep a cleaned up set but for the mean time this is my compromise.

Also created myself a custom version of the highcharts settings file, lightgray.js

/* The following was added by Grays Solarwinds Orion Colourising Kit v2.0.0 on Mon Aug 03 2020 14:28:38 GMT-0700 (Pacific Daylight Time) */.ResourceWrapper a:hover, .NodeManagementIcons a:hover, .coloredLink:hover, .sw-link:hover {opacity:0.7 !important; text-decoration: none !important; }.StatusIcon, .ModuleDetailsBlock img, .AuditEventMessage img, div.event-icon img, .NodeManagementIcons img, td.Property.NodeManagementIcons img, img#ctl00_ctl00_ctl00_BodyContent_ContentPlaceHolder1_ViewPageTitle_statusIconControl_NodeDetailsStatusIconLED, .sw-appstack-h > label > img, .containersTreeNode-statusIcon, tr.activeAlerts-rowError img, td.Property img, img.sw-rpt-txticon { border-radius: 10px !important; background-color: white !important; padding: 1px !important } .Disabled { opacity: 0.5 !important} div#browseWrap.x-form-field-wrap.x-form-file-wrap { height: 28px !important} ul.x-tab-strip li, .x-tab-panel-header, .x-tab-panel-footer, .xui .btn-default {border: none !important;} .x-btn-icon .x-btn-small .x-btn-text { background-color: white !important; border-radius: 10px !important; }#chartDataNotAvailable, #apm_ThwackAd, .CloudMonitoring .GettingStarted .Content, #TroubleshootDiv, #TroubleshootDivLoading, .AgentManagement_AgentAdvancedSettings { border: 2px solid #204a63 !important; border-radius: 10px !important; background: #215d9c !important; padding: 15px 10px !important; color: #ffffff !important; }.ResourceWrapper, .sw-pg-text, table, .chartDataNotAvailableArea, #discoveryCentral .noObjectsStyle, .CORE_Content, #tabPanel, #containerAdvancedDiv, .x-grid3-header, .x-panel-body, li.NodeGroupItem.SelectedNodeGroupItem, #NodeTree2 th, .apm_WizardContainer, #selectedTemplatesContainer, #resourcePickerLoader-content-ph > table, .layout-container, .portlet-header, .portletItem.shadow, .ext-strict .x-form-text, div.event-icon, .SAM_GettingStartedBox, .apm_GroupSection, .CloudMonitoring .GettingStarted > div, .noDataBackgroud div, .sw-salestrigger-dialog .sw-salestrigger-footer { background-color: Transparent !important; background-image: None !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; background-url: none !important; background: transparent !important; }.x-grid3-row-selected, div.x-grid3-row.x-grid3-row-alt.x-grid3-row-selected, div.x-grid3-row.x-grid3-row-selected { background-image: none !important; }.xui .xui-search__button.input-group-btn .xui-button, .x-combo-list-item, .x-panel-header, .x-panel-bbar .x-toolbar, .x-layout-split, .x-layout-collapsed, .Event, .Events td { border: transparent !important; }.PropertyHeader { font-weight: bold !important }.x-toolbar {min-height: 35px !important;}.chartDataNotAvailableArea { height: 150px !important; padding-top: 0px !important; } #chartDataNotAvailable a, .sw-pg-hint-body-info, .sw-pg-hint-text {color: #ffffff !important; }.NewContentBucket, .sw-hdr-title { box-shadow: none !important; }div.contAdminDateArea { padding: 10px !important; border-radius: 20px !important; }#footer:before { content: "";display: block;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAQCAMAAAD6fQULAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGAUExURWNykzxZbKikduv//qaGMbagS3aIr3d5fP7/41Vrjvzo2NayOvzs/FaLy6WrtW5bTMfa8v/l7Ofc2eT2/0lWWHBpNdPj+miU0FaX5f//9P//+v/6/0dZZv7+7YlhBpu90aSck+/v6vn6/FpWSf///+L/8dvt/9TWw3tyaYZ+daKRSYSDXE6S4//y////1fv////1/4NxG3BNI83d3JuPm9jW4cGYLvLn4/vh5FNJFHNdCIJ9kZuPU7zfyS9PX1ZYcZODhvjz/0tjUGRsVWF9rc7M0UhgYczZyNHL197b1szk6Mnj9Ozb7ere/4CHsfHZ8YSgrPHr7ajBvv/r7ra7nVtdNvL3+rPM4l15qfj7/8PBteXZnau1v7+2rbeUamOGcNfZ8v7XxvX65DpIL/Xk9vDq9vnh+UaEz0aK242BRZB0X/38+lJMTsO1mHlwd12GvvHy6ptyCN3r9ExYcEA+GF1bZv3y7v/46Pf/8JmQh/Hf7f/c4IKKe5qaeL/Z5vn+6D7pJeIAAADoSURBVHjaYiiTlnZMEBPzrvMydq9gMJfmsbYvZmSUcRNxqmGolyyQYeBN19HhzY9gYEiSVZRhE5eQyOAVd+FkMJDlck62Y2S0cxPJYWeoKpdVdw6Ql5cPYs8LZFBjZlaNDxdmFi6K8YtkAHJsnQSE1QT4RNiUGHxV1LVzgwUT46wMtfQYdF2VazksBLmMWFmAvFRtS5to3TSfPO3QKBUGD1Em0Ux/nhSTEiZJFQZBOTNuuSwhU/YQDmldhmqWQm5ufodSPg4OA2mGbE9N/koNZQUpFSV9fQZFKSEFDc1YSalsJf0wgAADADLPKGzxO+x/AAAAAElFTkSuQmCC)no-repeat;width:13px;height:16px;float:right;position:relative;right:10px;bottom:-5px;}.sw-forecast-warning, .sw-forecast-critical {color: #000 !important; }body, #adminContent, .NodeManagementMenu li.submenu { background-color:#c8c8c8 !important; color:#000000 !important; }.x-grid3-cell-inner, .AuditEventMessage, .xui .form-control, input, select, .cpRepeaterTable .leftLabelColumn, .xui .sw-notifications__list__item__link, .portletItem .portlet-header { color:#000000 !important; }table.titleTable h1, div.titleTable h1, .xui .h1 { color:#000000 !important; }.subNavContainer, .sw-dashboard__menu, tr.slider > td, .xui .sw-all-alerts__item-menu-icon { background-color:#ffffff !important; }.SubNav-Tab.SubNav-SelectedTab, .x-combo-list .x-combo-selected, #groupingGrid .x-grid3-row-selected, .sw-widget-drawer__filter-category:hover, .xui .xui-listitem.xui-listitem--selected, div.contAdminDateArea, td.sort-asc .x-grid3-hd-inner, td.sort-desc .x-grid3-hd-inner, td.x-grid3-hd-over .x-grid3-hd-inner, #activeAlertsGrid .x-grid3-row-selected, li.NodeGroupItem.SelectedNodeGroupItem, th.sortColumn, div.x-grid3-row-selected, .xui .xui-treeview-head.xui-is-selected, .object-inspector-header { background-color:#cfd9ed !important; }#footer, .sw-mainnav-branding, .sw-mega-menu__menu, .x-layout-collapsed { background-color:#1c1c1c !important; color:#c9ced0 !important; }input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .x-form-field, input, .x-form-empty-field, .x-trigger-noedit, .x-form-text, textarea.x-form-field, .percentSquare, .xui .input-group .form-control, select { background-color:#ffffff !important; color:#000000 !important; border-color: #b9bec8 !important;}body, .x-toolbar td, .x-toolbar span, .x-toolbar input, .x-toolbar div, .x-toolbar select, .x-toolbar label { font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important; } .GroupBox, .GroupBoxAccounts, .blueBox, .ResourceContent, .formTable, #errorcontent, .sw-resource-wantedit > div > div, .x-grid3, .x-panel-bwrap, table.NodeManagement, .NewContentBucket, .sw-hdr-title, #adminContent * .column2of2, .sw-widget-drawer__filter-category, .ui-widget-content, .x-menu-list, .ManagementTaskDropdownContent ul, .ManagementTaskDropdown li.submenu, #cluetip-outer, .ui-dialog .ui-dialog-content, .sw-pref-options, .NodeManagement td, ul.NodeManagementMenu ul, #reportContentDialog div.ui-accordion-content, div#dataSourcePickerBox, div.SettingContainer, .ContentBucket, .x-window-tl, .x-window-ml, .x-window-mr, .x-window-mc, .sw-pg-login #dialog, .sw-widget-drawer__filter-panel--open .sw-widget-drawer__filter-panel, .sw-widget-drawer__list-container, .xui .list-group-item, table.axisOverview, tbody#EventsTableBody, table.Report.sw-pg-events, .sw-login-firsttime, .xui-dialog .modal-body, .ha-summary-list-container, .xui .xui-padding-lgh, .ha-summary-server-details, .xui-tabs-router-view, .xui .xui-page-content__wrapper, .xui body, .xui-page-content__body-transclude { background-color:#dbdbdb !important; color:#000000 !important; }.SettingBlockDescription, .SettingBlockDescription span, .SettingContainer label, ul.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all a {color:#000000 !important; }.GroupBox, .GroupBoxAccounts, .ResourceWrapper, #errorcontent, .NewContentBucket { border-radius: 17px !important; }.ResourceContent, .formTable { border-bottom-left-radius: 17px !important; border-bottom-right-radius: 17px !important; }.HeaderBar, #leftpanel_filter, .h3noWrap,.xui .modal-header, .cl-license-manager-page__header { border-bottom-color:#000000 !important; background-color:#b9bec8 !important; }.HeaderBar h1 a, .expand_collapse_title, .key-header-name, #errorcontent, .NewBucketHeader, .sw-settings-rightbox-header, h2.PollerTypeTitle, .sw-pg-login #dialog label, .xui .modal-title, .xui .modal-header, .cl-license-manager-page__header, h1.ha-summary-header-title { color:#000000 !important; text-decoration: none !important; }hr, .x-tab-panel-header-plain .x-tab-strip-spacer, .x-tab-panel-footer-plain .x-tab-strip-spacer { background-color:#b9bec8 !important; }.GroupBox, .GroupBoxAccounts, .ResourceWrapper, #errorcontent, .NewContentBucket, table.NodeManagement, div#reportLayoutFooter, div#reportLayoutHeader, div#layoutBuilder, .SettingContainer, .tab-top { border: 2px solid #b9bec8 !important; }#NodeTree2, ul.NodeManagementMenu ul, li.submenu.over, .x-toolbar, .ContentBucket, .ElementGrouping { border: solid 2px #b9bec8 !important; }.SettingBlockHeader { border-bottom: solid 2px #b9bec8 !important; }.x-panel-body-noheader, .x-panel-mc div.x-panel-body { border-color: #b9bec8 !important; }.ResourceWrapper a, .coloredLink, .sw-link {color:#116bc5!important; }.x-btn-text, .sw-btn, .sw-btn-resource, .sw-btn-resource span, .sw-btn-resource span:hover {color: #000000 !important; text-decoration: none !important; }.printablePageLink, .x-btn, .sw-btn-primary, .sw-btn, .buttons a.greyBtn { background: -moz-linear-gradient(top, #949494 0%, #FFFFFF) !important; background: -webkit-gradient(linear, left top, left bottom, from(#949494), to(#FFFFFF)) !important; border: 1px solid #FFFFFF !important; -moz-box-shadow: 0px 1px 3px rgba(255,255,255,0.5), inset 0px 0px 1px rgba(000,000,000,0.7) !important; -webkit-box-shadow: 0px 1px 3px rgba(255,255,255,0.5), inset 0px 0px 1px rgba(000,000,000,0.7) !important; box-shadow: 0px 1px 3px rgba(255,255,255,0.5), inset 0px 0px 1px rgba(000,000,000,0.7) !important; text-shadow: 0px -1px 0px rgba(255,255,255,0.4), 0px 1px 0px rgba(000,000,000,0.3) !important; }.printablePageLink, .x-btn, .sw-btn-primary, .sw-btn, .buttons a.greyBtn { -moz-border-radius: 30px !important; -webkit-border-radius: 30px !important; border-radius: 30px !important; padding: 5px 10px !important; }undefined.PropertyHeader, .sw-appstack-h, .xui .dropdown-menu li>a { color:#000000 !important }table.NeedsZebraStripes > tbody > tr:nth-child(even), table.NeedsZebraStripes > thead~tbody > tr:nth-child(even), .TopResourceEvenTableRow, .sw-rpt-tbl tr, .x-grid3-row, .xui .form-control, .x-combo-list-inner, .xui .dropdown-menu, .sw-mainnav-box, .ZebraBackground > li:nth-child(even) { background-color: #e6e6e6 !important; color: #000000!important }table.NeedsZebraStripes > thead~tbody > tr:nth-child(odd), table.NeedsZebraStripes > tbody > tr:nth-child(odd), .TopResourceOddTableRow, .sw-rpt-tbl .sw-rpt-row-alt, .x-grid3-row.x-grid3-row-alt, .ZebraStripe, .sw-appstack-ministack .sw-appstack-section, .x-combo-list-item, .ZebraBackground > li:nth-child(odd), .ModuleDetailsBlock tr.alternateRow, #ElementGrouping .GroupItems { background-color: #d2d3d7 !important; color: #000000 !important }table.NeedsZebraStripes > tbody > tr > td.ReportHeader, table.NeedsZebraStripes > thead > tr > th, table.NeedsZebraStripes > thead > tr > td, .ReportHeader, .sw-pg-events thead, .x-toolbar, .x-grid3-hd-row, .NodeManagementMenuWrapper, thead, .x-panel-header, #reportContentDialog div.ui-accordion-content, div#layoutHeaderTop, div#layoutFooterTop, .layout-percent-indicator, .ModuleDetailsBlock .ModuleDetailsBlockHeader, .ListHeader, .apm_GroupSection, div#GroupItemsSelector, .sw-salestrigger-dialog .sw-salestrigger__products-header, .ResourceWrapper table tr .ReportHeader { background-color: #b9babe !important; color: #000000 !important; font-weight: bold !important; }

*************************************************************

light-gray.js

************************************************************

Highcharts.theme = {
colors: ["#006ca9", "#49D2F2", "#A87000", "#D8C679", "#515151", "#B7B7B7", "#310091",
"#9673EA", "#93008B", "#F149E7", "#828C38", "#C5DE00", "#874340", "#DBB0A0"],

chart: {
backgroundColor: {
linearGradient: [0, 0, 0, 400],
stops: [
[0, 'rgb(200, 201, 205)'],
[1, 'rgb(240, 241, 245)']
]
},
borderColor: '#c8c8c8',
borderWidth: 1,
className: 'dark-container',
plotBackgroundColor: null,
plotBorderColor: '#c8c8c8',
plotBorderWidth: 1
},
title: {
style: {
color: '#000000',
font: 'bold 14px Arial, Helvetica, Sans-Serif'
}
},
subtitle: {
style: {
color: '#000000',
font: '12px Arial, Helvetica, Sans-Serif'
}
},
xAxis: {
gridLineColor: '#6e6e6e',
gridLineWidth: 0,
labels: {
style: {
color: '#646464',
fontWeight: 'bold'
}
},
lineColor: '#c8c8c8',
tickColor: '6e6e6e',
title: {
style: {
color: '#646464',
textTransform: 'uppercase',
fontSize: '10px',
fontFamily: 'Arial, Helvetica, Sans-Serif'

}
}
},
yAxis: {
gridLineColor: '#FFF',
labels: {
style: {
color: '#646464',
fontWeight: 'bold'
}
},
lineColor: '#6e6e6e',
minorTickInterval: null,
tickColor: '#6e6e6e',
tickWidth: 2,
title: {
style: {
color: '#646464',
textTransform: 'uppercase',
fontSize: '10px',
fontFamily: 'Arial, Helvetica, Sans-Serif',
fontWeight: 'normal'
}
}
},
tooltip: {
backgroundColor: 'rgba(255, 255, 255, 0.9)',
style: {
color: '#000000'
}
},
toolbar: {
itemStyle: {
color: 'silver'
}
},
plotOptions: {
line: {
dataLabels: {
color: '#CCC'
},
marker: {
lineColor: '#333'
}
},
spline: {
marker: {
lineColor: '#333'
}
},
scatter: {
marker: {
lineColor: '#333'
}
},
candlestick: {
lineColor: 'white'
}
},
legend: {
itemStyle: {
font: '11pt Arial, Helvetica, Sans-Serif',
color: '#A0A0A0'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#444'
}
},
credits: {
style: {
color: '#666'
}
},
labels: {
style: {
color: '#666'
}
},

navigation: {
buttonOptions: {
backgroundColor: {
linearGradient: [255, 255, 255, 20],
stops: [
[0.4, '#bbb'],
[0.6, '#888']
]
},
borderColor: '#000000',
symbolStroke: '#646464',
hoverSymbolStroke: '#c8c8c8'
}
},

exporting: {
buttons: {
exportButton: {
symbolFill: '#55BE3B'
},
printButton: {
symbolFill: '#7797BE'
}
}
},

// scroll charts
rangeSelector: {
buttonTheme: {
width: 58,
fill: {
linearGradient: [0, 0, 0, 20],
stops: [
[0.4, '#c8c8c8'],
[0.6, '#e6e6e6']
]
},
stroke: '#c8c8c8',
style: {
color: '#4d4d4d',
fontWeight: 'normal'
},
states: {
hover: {
fill: {
linearGradient: [0, 0, 0, 20],
stops: [
[0.4, '#b9babe'],
[0.6, '#e6e6e6']
]
},
stroke: '#9b9b9b',
style: {
color: '#4d4d4d',
fontWeight: 'normal'
}
},
select: {
fill: {
linearGradient: [0, 0, 0, 20],
stops: [
[0.1, '#ccc'],
[0.3, '#e6e6e6']
]
},
stroke: '#c8c8c8',
style: {
color: '#4d4d4d',
fontWeight: 'bold'
}
}
}
},

inputStyle: {
backgroundColor: '#eee'
}

},

navigator: {
maskFill: 'rgba(250, 250, 250, 0.85)',
outlineColor: '#ccc',
series: {
color: '#076CBA',
lineColor: '#076CBA'
}
},

// special colors for some of the
legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
legendBackgroundColorSolid: 'rgb(35, 35, 70)',
dataLabelsColor: '#444',
textColor: '#C0C0C0',
maskColor: 'rgba(255,255,255,0.3)'
};

// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);