trying to fix more colors

16 files changed, 101 insertions, 79 deletions

diff --git a/src/Utils.ts b/src/Utils.ts
index 9a94694a2..29824ba94 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -758,8 +758,8 @@ export function DashColor(color: string) {
 }
 
 export function lightOrDark(color: any) {
-    if (color === 'transparent') return 'gray';
-    if (color.startsWith?.('linear')) return 'black';
+    if (color === 'transparent') return Colors.DARK_GRAY;
+    if (color.startsWith?.('linear')) return Colors.BLACK;
     const nonAlphaColor = color.startsWith('#') ? (color as string).substring(0, 7) : color.startsWith('rgba') ? color.replace(/,.[^,]*\)/, ')').replace('rgba', 'rgb') : color;
     const col = DashColor(nonAlphaColor).rgb();
     const colsum = col.red() + col.green() + col.blue();
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 8a7f5132b..c880dde9a 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -78,7 +78,7 @@ h1,
 .mainView-container-Dark {
     .lm_header .lm_tab {
         padding: 0px;
-        opacity: 0.7;
+        //opacity: 0.7;
         box-shadow: none;
         height: 25px;
         border-bottom: black solid;
@@ -194,7 +194,7 @@ h1,
         left: 0;
         position: absolute;
         z-index: 2;
-     //   background-color: linen; //$light-gray;
+        //   background-color: linen; //$light-gray;
 
         // .editable-title {
         //     background-color: linen; //$light-gray;
diff --git a/src/client/views/PropertiesDocBacklinksSelector.tsx b/src/client/views/PropertiesDocBacklinksSelector.tsx
index da4438481..91a7b3da3 100644
--- a/src/client/views/PropertiesDocBacklinksSelector.tsx
+++ b/src/client/views/PropertiesDocBacklinksSelector.tsx
@@ -5,6 +5,7 @@ import { Cast } from '../../fields/Types';
 import { DocumentType } from '../documents/DocumentTypes';
 import { LinkManager } from '../util/LinkManager';
 import { SelectionManager } from '../util/SelectionManager';
+import { SettingsManager } from '../util/SettingsManager';
 import { LinkMenu } from './linking/LinkMenu';
 import { OpenWhere, OpenWhereMod } from './nodes/DocumentView';
 import './PropertiesDocBacklinksSelector.scss';
@@ -31,7 +32,7 @@ export class PropertiesDocBacklinksSelector extends React.Component<PropertiesDo
 
     render() {
         return !SelectionManager.Views().length ? null : (
-            <div className="propertiesDocBacklinksSelector">
+            <div className="propertiesDocBacklinksSelector" style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }}>
                 {this.props.hideTitle ? null : <p key="contexts">Contexts:</p>}
                 <LinkMenu docView={SelectionManager.Views().lastElement()} clearLinkEditor={undefined} itemHandler={this.getOnClick} style={{ left: 0, top: 0 }} />
             </div>
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 83bd1b860..5f9439cbc 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -673,7 +673,14 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     marginLeft: title === '∠:' ? '39px' : '',
                 }}>
                 <div className="inputBox-title"> {title} </div>
-                <input className="inputBox-input" type="text" value={value} onChange={e => setter(e.target.value)} onKeyPress={e => e.stopPropagation()} />
+                <input
+                    className="inputBox-input"
+                    type="text"
+                    value={value}
+                    style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }}
+                    onChange={e => setter(e.target.value)}
+                    onKeyPress={e => e.stopPropagation()}
+                />
                 <div className="inputBox-button">
                     <div className="inputBox-button-up" key="up2" onPointerDown={undoBatch(action(() => this.upDownButtons('up', key)))}>
                         <FontAwesomeIcon icon="caret-up" size="sm" />
@@ -930,7 +937,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     regInput = (key: string, value: any, setter: (val: string) => {}) => {
         return (
             <div className="inputBox">
-                <input className="inputBox-input" type="text" value={value} onChange={e => setter(e.target.value)} />
+                <input className="inputBox-input" type="text" value={value} style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }} onChange={e => setter(e.target.value)} />
                 <div className="inputBox-button">
                     <div className="inputBox-button-up" key="up2" onPointerDown={undoBatch(action(() => this.upDownButtons('up', key)))}>
                         <FontAwesomeIcon icon="caret-up" size="sm" />
@@ -966,6 +973,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     <input
                         className="width-range"
                         type="range"
+                        style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }}
                         defaultValue={Number(this.widthStk)}
                         min={1}
                         max={100}
@@ -990,6 +998,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                             className="width-range"
                             type="range"
                             defaultValue={this.markScal}
+                            style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }}
                             min={0}
                             max={10}
                             onChange={action(e => (this.markScal = +e.target.value))}
@@ -1369,6 +1378,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     get editRelationship() {
         return (
             <input
+                style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }}
                 autoComplete={'off'}
                 id="link_relationship_input"
                 value={StrCast(LinkManager.currentLink?.link_relationship)}
@@ -1386,7 +1396,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         return (
             <textarea
                 autoComplete="off"
-                style={{ textAlign: 'left' }}
+                style={{ textAlign: 'left', color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }}
                 id="link_description_input"
                 value={StrCast(LinkManager.currentLink?.link_description)}
                 onKeyDown={this.onDescriptionKey}
@@ -1414,7 +1424,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
         return (
             <>
-                <div className="propertiesView-section" style={{ background: 'darkgray' }}>
+                <div className="propertiesView-section">
                     <div className="propertiesView-input first" style={{ display: 'grid', gridTemplateColumns: '84px auto' }}>
                         <p>Relationship</p>
                         {this.editRelationship}
@@ -1458,7 +1468,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     <div className="propertiesView-section">
                         <div className="propertiesView-input inline first" style={{ display: 'grid', gridTemplateColumns: '84px calc(100% - 84px)' }}>
                             <p>Follow by</p>
-                            <select onChange={e => this.changeFollowBehavior(e.currentTarget.value === 'Default' ? undefined : e.currentTarget.value)} value={Cast(this.sourceAnchor?.followLinkLocation, 'string', null)}>
+                            <select
+                                style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }}
+                                onChange={e => this.changeFollowBehavior(e.currentTarget.value === 'Default' ? undefined : e.currentTarget.value)}
+                                value={Cast(this.sourceAnchor?.followLinkLocation, 'string', null)}>
                                 <option value={undefined}>Default</option>
                                 <option value={OpenWhere.addLeft}>Opening in new left pane</option>
                                 <option value={OpenWhere.addRight}>Opening in new right pane</option>
@@ -1473,7 +1486,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         </div>
                         <div className="propertiesView-input inline first" style={{ display: 'grid', gridTemplateColumns: '84px calc(100% - 134px) 50px' }}>
                             <p>Animation</p>
-                            <select style={{ width: '100%', gridColumn: 2 }} onChange={e => this.changeAnimationBehavior(e.currentTarget.value)} value={StrCast(this.sourceAnchor?.followLinkAnimEffect, 'default')}>
+                            <select
+                                style={{ width: '100%', gridColumn: 2, color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }}
+                                onChange={e => this.changeAnimationBehavior(e.currentTarget.value)}
+                                value={StrCast(this.sourceAnchor?.followLinkAnimEffect, 'default')}>
                                 <option value="default">Default</option>
                                 {[PresEffect.None, PresEffect.Zoom, PresEffect.Lightspeed, PresEffect.Fade, PresEffect.Flip, PresEffect.Rotate, PresEffect.Bounce, PresEffect.Roll].map(effect => (
                                     <option key={effect.toString()} value={effect.toString()}>
@@ -1588,7 +1604,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         <div className="propertiesView-input inline" style={{ display: 'grid', gridTemplateColumns: '78px calc(100% - 108px) 50px' }}>
                             <p>Zoom %</p>
                             <div className="ribbon-property" style={{ display: !targZoom ? 'none' : 'inline-flex' }}>
-                                <input className="presBox-input" style={{ width: '100%' }} readOnly={true} type="number" value={zoom} />
+                                <input className="presBox-input" style={{ width: '100%', color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }} readOnly={true} type="number" value={zoom} />
                                 <div className="ribbon-propertyUpDown" style={{ display: 'flex', flexDirection: 'column' }}>
                                     <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoom(String(zoom), 0.1))}>
                                         <FontAwesomeIcon icon={'caret-up'} />
diff --git a/src/client/views/UndoStack.tsx b/src/client/views/UndoStack.tsx
index 3fd64d1fd..4f971742b 100644
--- a/src/client/views/UndoStack.tsx
+++ b/src/client/views/UndoStack.tsx
@@ -19,12 +19,14 @@ export class UndoStack extends React.Component<UndoStackProps> {
     @observable static HideInline: boolean;
     @observable static Expand: boolean;
     render() {
-        const background = UndoManager.batchCounter.get() ? 'yellow' : SettingsManager.userBackgroundColor;
+        const background = UndoManager.batchCounter.get() ? 'yellow' : SettingsManager.userVariantColor;
+        const color = UndoManager.batchCounter.get() ? 'black' : SettingsManager.userColor;
         return this.props.inline && UndoStack.HideInline ? null : (
             <div className="undoStack-outerContainer">
                 <Popup
                     text={'Undo/Redo Stack'}
-                    color={UndoManager.batchCounter.get() ? 'yellow' : StrCast(Doc.UserDoc().userVariantColor)}
+                    color={color}
+                    background={background}
                     placement={`top-start`}
                     type={Type.TERT}
                     popup={
@@ -32,8 +34,8 @@ export class UndoStack extends React.Component<UndoStackProps> {
                             className="undoStack-commandsContainer"
                             ref={r => r?.scroll({ behavior: 'auto', top: r?.scrollHeight + 20 })}
                             style={{
-                                background: background,
-                                color: isDark(background) ? Colors.LIGHT_GRAY : Colors.DARK_GRAY,
+                                background,
+                                color,
                             }}>
                             {UndoManager.undoStackNames.map((name, i) => (
                                 <div className="undoStack-resultContainer" key={i}>
@@ -44,7 +46,7 @@ export class UndoStack extends React.Component<UndoStackProps> {
                                 .reverse()
                                 .map((name, i) => (
                                     <div className="undoStack-resultContainer" key={i}>
-                                        <div className="undoStack-commandString" style={{ fontWeight: 'bold', color: 'red' }}>
+                                        <div className="undoStack-commandString" style={{ fontWeight: 'bold', color: SettingsManager.userBackgroundColor }}>
                                             {name.replace(/[^\.]*\./, '')}
                                         </div>
                                     </div>
diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.scss b/src/client/views/collections/collectionLinear/CollectionLinearView.scss
index 6b3318bf3..d0c14a21d 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.scss
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.scss
@@ -17,7 +17,7 @@
     .collectionLinearView-menuOpener {
         user-select: none;
     }
-    
+
     > input:not(:checked) ~ &.true {
         background-color: transparent;
     }
diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
index 2254b2e5f..4bb5c5adf 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
@@ -22,6 +22,7 @@ import { CollectionSubView } from '../CollectionSubView';
 import './CollectionLinearView.scss';
 import { Button, Toggle, ToggleType, Type } from 'browndash-components';
 import { Colors } from '../../global/globalEnums';
+import { SettingsManager } from '../../../util/SettingsManager';
 
 /**
  * CollectionLinearView is the class for rendering the horizontal collection
@@ -205,9 +206,10 @@ export class CollectionLinearView extends CollectionSubView() {
         const menuOpener = (
             <Toggle
                 text={Cast(this.props.Document.icon, 'string', null)}
-                icon={Cast(this.props.Document.icon, 'string', null) ? undefined : <FontAwesomeIcon icon={isExpanded ? 'minus' : 'plus'} />}
+                icon={Cast(this.props.Document.icon, 'string', null) ? undefined : <FontAwesomeIcon color={SettingsManager.userColor} icon={isExpanded ? 'minus' : 'plus'} />}
+                color={SettingsManager.userColor}
+                background={SettingsManager.userVariantColor}
                 type={Type.TERT}
-                color={StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE)}
                 onPointerDown={e => e.stopPropagation()}
                 toggleType={ToggleType.BUTTON}
                 toggleStatus={BoolCast(this.layoutDoc.linearView_IsOpen)}
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index 80cf93ed8..0b9f32eee 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -12,7 +12,6 @@
         position: relative;
         border: 1px solid #e4e4e4;
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-        background: white;
         max-height: 230px;
         overflow-y: scroll;
         z-index: 10;
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 65d13a6c3..9dc133e28 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -7,6 +7,7 @@ import { LinkDocPreview } from '../nodes/LinkDocPreview';
 import './LinkMenu.scss';
 import { LinkMenuGroup } from './LinkMenuGroup';
 import React = require('react');
+import { SettingsManager } from '../../util/SettingsManager';
 
 interface Props {
     docView: DocumentView;
@@ -58,7 +59,7 @@ export class LinkMenu extends React.Component<Props> {
         const style = this.props.style ?? (dv => ({ left: dv?.left || 0, top: this.props.docView.topMost ? undefined : (dv?.bottom || 0) + 15, bottom: this.props.docView.topMost ? 20 : undefined, maxWidth: 200 }))(this.props.docView.getBounds());
 
         return (
-            <div className="linkMenu" ref={this._linkMenuRef} style={{ ...style }}>
+            <div className="linkMenu" ref={this._linkMenuRef} style={{ ...style, background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}>
                 <div className="linkMenu-list">{this.renderAllGroups(LinkManager.Instance.getRelatedGroupedLinks(sourceAnchor))}</div>
             </div>
         );
diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx
index 8324a97d9..c1a5a634c 100644
--- a/src/client/views/linking/LinkMenuGroup.tsx
+++ b/src/client/views/linking/LinkMenuGroup.tsx
@@ -23,10 +23,10 @@ interface LinkMenuGroupProps {
 export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> {
     private _menuRef = React.createRef<HTMLDivElement>();
 
-    getBackgroundColor = (): string => {
+    getBackgroundColor = (): string | undefined => {
         const link_relationshipList = StrListCast(Doc.UserDoc().link_relationshipList);
         const linkColorList = StrListCast(Doc.UserDoc().link_ColorList);
-        let color = 'white';
+        let color: string | undefined;
         // if this link's relationship property is not default "link", set its color
         if (link_relationshipList) {
             const relationshipIndex = link_relationshipList.indexOf(this.props.groupType);
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index 806a2c381..e83f631a1 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -12,8 +12,6 @@
     padding-top: 1px;
     padding-bottom: 1px;
 
-    background-color: white;
-
     .linkMenu-name {
         position: relative;
         width: auto;
@@ -25,7 +23,7 @@
 
             .linkMenu-source-title {
                 text-decoration: none;
-                color: rgb(43, 43, 43);
+                //color: rgb(43, 43, 43);
                 font-size: 7px;
                 padding-bottom: 0.75px;
 
@@ -48,13 +46,12 @@
                         height: 12px;
                         padding: 1px;
                         margin-right: 3px;
-                        color: rgb(161, 161, 161);
+                        // color: rgb(161, 161, 161);
                     }
                 }
 
                 .linkMenu-destination-title {
                     text-decoration: none;
-                    color: #4476f7;
                     font-size: 13px;
                     line-height: 0.9;
                     padding-bottom: 2px;
@@ -64,7 +61,6 @@
 
                     &:hover {
                         text-decoration: underline;
-                        color: rgb(60, 90, 156);
                         //display: inline;
                         text-overflow: break;
                         cursor: pointer;
@@ -75,7 +71,6 @@
             .linkMenu-description {
                 text-decoration: none;
                 font-style: italic;
-                color: rgb(95, 97, 102);
                 font-size: 9px;
                 line-height: 0.9;
                 margin-left: 20px;
@@ -97,17 +92,7 @@
         width: 100%;
     }
 
-    .link-metadata {
-        padding: 0 10px 0 16px;
-        margin-bottom: 4px;
-        color: $medium-gray;
-        font-style: italic;
-        font-size: 10.5px;
-    }
-
     &:hover {
-        background-color: rgb(201, 239, 252);
-
         .linkMenu-item-buttons {
             opacity: 1;
         }
@@ -115,7 +100,6 @@
         .linkMenu-item-content {
             .linkMenu-destination-title {
                 text-decoration: underline;
-                color: rgb(60, 90, 156);
                 //display: inline;
                 text-overflow: break;
             }
@@ -129,7 +113,7 @@
     display: flex;
     opacity: 0;
 
-    .button {
+    .linkMenu-deleteButton {
         width: 20px;
         height: 20px;
         margin: 0;
@@ -137,7 +121,7 @@
         padding-right: 6px;
         border-radius: 50%;
         pointer-events: auto;
-        background-color: $dark-gray;
+        background-color: red;
         color: $white;
         font-size: 65%;
         transition: transform 0.2s;
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index a81707ea4..9bc8f5e8b 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -130,7 +130,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
     };
 
     deleteLink = (e: React.PointerEvent): void => setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => LinkManager.Instance.deleteLink(this.props.linkDoc))));
-
+    @observable _hover = false;
     render() {
         const destinationIcon = Doc.toIcon(this.props.destinationDoc) as any as IconProp;
 
@@ -146,7 +146,11 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
                 : undefined;
 
         return (
-            <div className="linkMenu-item" style={{ background: LinkManager.currentLink === this.props.linkDoc ? 'lightBlue' : undefined }}>
+            <div
+                className="linkMenu-item"
+                onPointerEnter={action(e => (this._hover = true))}
+                onPointerLeave={action(e => (this._hover = false))}
+                style={{ background: /*LinkManager.currentLink !== this.props.linkDoc*/ this._hover ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor }}>
                 <div className="linkMenu-item-content expand-two">
                     <div
                         ref={this._drag}
@@ -154,7 +158,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
                         onPointerDown={this.onLinkButtonDown}>
                         <div className="linkMenu-item-buttons">
                             <Tooltip title={<div className="dash-tooltip">Edit Link</div>}>
-                                <div className="button" style={{ background: LinkManager.currentLink === this.props.linkDoc ? 'black' : 'gray' }} ref={this._editRef} onPointerDown={this.onEdit} onClick={e => e.stopPropagation()}>
+                                <div className="button" ref={this._editRef} onPointerDown={this.onEdit} onClick={e => e.stopPropagation()}>
                                     <FontAwesomeIcon className="fa-icon" icon="edit" size="sm" />
                                 </div>
                             </Tooltip>
@@ -193,7 +197,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
 
                         <div className="linkMenu-item-buttons">
                             <Tooltip title={<div className="dash-tooltip">Delete Link</div>}>
-                                <div className="button" style={{ background: 'red' }} onPointerDown={this.deleteLink} onClick={e => e.stopPropagation()}>
+                                <div className="linkMenu-deleteButton" onPointerDown={this.deleteLink} onClick={e => e.stopPropagation()}>
                                     <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" />
                                 </div>
                             </Tooltip>
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 4bd476bf3..561f39141 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -52,7 +52,6 @@ export class PieChart extends React.Component<PieChartProps> {
     // organized by specified number percentages/ratios if one column is selected and it contains numbers
     // otherwise, assume data is organized by categories
     @computed get byCategory() {
-        if (this.props.layoutDoc.dataViz_pie_asHistogram==undefined) this.props.layoutDoc.dataViz_pie_asHistogram = false;
         return !/\d/.test(this.props.records[0][this.props.axes[0]]) || this.props.layoutDoc.dataViz_pie_asHistogram;
     }
     // filters all data to just display selected data if brushed (created from an incoming link)
@@ -324,9 +323,9 @@ export class PieChart extends React.Component<PieChartProps> {
     };
 
     @action changeHistogramCheckBox = () => {
-        this.props.layoutDoc.dataViz_pie_asHistogram = !this.props.layoutDoc.dataViz_pie_asHistogram 
-        this.drawChart(this._pieChartData, this.width, this.height)
-    }
+        this.props.layoutDoc.dataViz_pie_asHistogram = !this.props.layoutDoc.dataViz_pie_asHistogram;
+        this.drawChart(this._pieChartData, this.width, this.height);
+    };
 
     render() {
         var titleAccessor: any = '';
@@ -367,13 +366,12 @@ export class PieChart extends React.Component<PieChartProps> {
                             fillWidth
                         />
                     </div>
-                    { (this.props.axes.length === 1 && /\d/.test(this.props.records[0][this.props.axes[0]]))?
-                        <div className={"asHistogram-checkBox"} style={{width: this.props.width}}>
+                    {this.props.axes.length === 1 && /\d/.test(this.props.records[0][this.props.axes[0]]) ? (
+                        <div className={'asHistogram-checkBox'} style={{ width: this.props.width }}>
                             <Checkbox color="primary" onChange={this.changeHistogramCheckBox} checked={this.props.layoutDoc.dataViz_pie_asHistogram as boolean} />
                             Organize data as histogram
-                        </div> 
-                        : null
-                    }
+                        </div>
+                    ) : null}
                     <div ref={this._piechartRef} />
                     {selected != 'none' ? (
                         <div className={'selected-data'}>
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index fc66d40db..64f289cf7 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -10,6 +10,7 @@ import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../../fields
 import { Utils } from '../../../../Utils';
 import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
 import { SelectionManager } from '../../../util/SelectionManager';
+import { SettingsManager } from '../../../util/SettingsManager';
 import { undoable, UndoManager } from '../../../util/UndoManager';
 import { ContextMenu } from '../../ContextMenu';
 import { DocComponent } from '../../DocComponent';
@@ -126,11 +127,11 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         // Script for checking the outcome of the toggle
         const checkResult = Number(Number(numScript().result ?? 0).toPrecision(NumCast(this.dataDoc.numPrecision, 3)));
-        const label = !Doc.GetShowIconLabels() ? null : <div className="fontIconBox-label">{this.label}</div>;
 
         return (
             <NumberDropdown
                 color={color}
+                background={SettingsManager.userBackgroundColor}
                 numberDropdownType={type}
                 showPlusMinus={false}
                 tooltip={this.label}
@@ -154,7 +155,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         return (
             <div
                 className={`menuButton ${this.type} ${active}`}
-                style={{ color: color, backgroundColor: backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
+                style={{ color, backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
                 onClick={action(() => {
                     this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen;
                     this.noTooltip = this.rootDoc.dropDownOpen;
@@ -179,10 +180,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
      * Dropdown list
      */
     @computed get dropdownListButton() {
-        const active: string = StrCast(this.rootDoc.dropDownOpen);
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
-        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-
         const script = ScriptCast(this.rootDoc.script);
 
         let noviceList: string[] = [];
@@ -206,11 +204,21 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                             text = Utils.cleanDocumentType(StrCast(selected.type) as DocumentType);
                             icon = Doc.toIcon(selected);
                         }
-                        return <Popup icon={<FontAwesomeIcon size={'1x'} icon={icon} />} text={text} type={Type.TERT} color={color} popup={<SelectedDocView selectedDocs={selectedDocs} />} fillWidth />;
+                        return (
+                            <Popup
+                                icon={<FontAwesomeIcon size={'1x'} icon={icon} />}
+                                text={text}
+                                type={Type.TERT}
+                                color={SettingsManager.userColor}
+                                background={SettingsManager.userVariantColor}
+                                popup={<SelectedDocView selectedDocs={selectedDocs} />}
+                                fillWidth
+                            />
+                        );
                     }
                 } else {
                     dropdown = false;
-                    return <Button text={`None Selected`} type={Type.TERT} color={color} fillWidth inactive />;
+                    return <Button text="None Selected" type={Type.TERT} color={SettingsManager.userColor} background={SettingsManager.userVariantColor} fillWidth inactive />;
                 }
                 noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking, CollectionViewType.NoteTaking];
             } else {
@@ -235,16 +243,19 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             }));
 
         return (
-            <Dropdown
-                selectedVal={text}
-                setSelectedVal={undoable(val => script.script.run({ this: this.layoutDoc, self: this.rootDoc, val }), `dropdown select ${this.label}`)}
-                color={color}
-                type={isViewDropdown ? Type.TERT : Type.PRIM}
-                dropdownType={DropdownType.SELECT}
-                items={list}
-                tooltip={this.label}
-                fillWidth
-            />
+            <div style={{ color: SettingsManager.userColor, background: SettingsManager.userBackgroundColor }}>
+                <Dropdown
+                    selectedVal={text}
+                    setSelectedVal={undoable(val => script.script.run({ this: this.layoutDoc, self: this.rootDoc, val }), `dropdown select ${this.label}`)}
+                    color={SettingsManager.userColor}
+                    background={isViewDropdown ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
+                    type={Type.TERT}
+                    dropdownType={DropdownType.SELECT}
+                    items={list}
+                    tooltip={this.label}
+                    fillWidth
+                />
+            </div>
         );
     }
 
@@ -276,6 +287,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 selectedColor={curColor}
                 type={Type.PRIM}
                 color={color}
+                background={SettingsManager.userBackgroundColor}
                 icon={this.Icon(color)!}
                 tooltip={tooltip}
                 label={this.label}
@@ -296,6 +308,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 tooltip={`Toggle ${tooltip}`}
                 type={Type.PRIM}
                 color={color}
+                background={SettingsManager.userBackgroundColor}
                 label={this.label}
                 items={DocListCast(this.rootDoc.data).map(item => ({
                     icon: <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={StrCast(item.icon) as any} color={color} />,
@@ -330,6 +343,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 toggleStatus={toggleStatus}
                 text={buttonText}
                 color={color}
+                background={SettingsManager.userBackgroundColor}
                 icon={this.Icon(color)!}
                 label={this.label}
                 onPointerDown={() => script.script.run({ this: this.layoutDoc, self: this.rootDoc, value: !toggleStatus, _readOnly_: false })}
@@ -386,8 +400,10 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             case ButtonType.ToggleButton:       return this.toggleButton;
             case ButtonType.ClickButton:
             case ButtonType.ToolButton: return <IconButton {...btnProps} size={Size.LARGE} color={color} />;
-            case ButtonType.TextButton: return <Button     {...btnProps} text={StrCast(this.rootDoc.buttonText)}/>;
-            case ButtonType.MenuButton: return <IconButton {...btnProps} color={color}  size={Size.LARGE} tooltipPlacement='right' onPointerDown={scriptFunc} />; 
+            case ButtonType.TextButton: return <Button     {...btnProps} color={color} 
+            background={SettingsManager.userBackgroundColor} text={StrCast(this.rootDoc.buttonText)}/>;
+            case ButtonType.MenuButton: return <IconButton {...btnProps} color={color} 
+            background={SettingsManager.userBackgroundColor}  size={Size.LARGE} tooltipPlacement='right' onPointerDown={scriptFunc} />; 
         }
         return this.defaultButton;
     }
diff --git a/src/client/views/nodes/LinkDocPreview.scss b/src/client/views/nodes/LinkDocPreview.scss
index c68e55f73..28216394d 100644
--- a/src/client/views/nodes/LinkDocPreview.scss
+++ b/src/client/views/nodes/LinkDocPreview.scss
@@ -1,7 +1,6 @@
 .linkDocPreview {
     position: absolute;
     pointer-events: all;
-    background-color: lightblue;
     border: 8px solid white;
     border-radius: 7px;
     box-shadow: 3px 3px 1.5px grey;
@@ -11,7 +10,6 @@
     cursor: pointer;
 
     .linkDocPreview-inner {
-        background-color: white;
         width: 100%;
         height: 100%;
         pointer-events: none;
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index a2f9de9ab..68446d4e7 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -142,7 +142,8 @@ export class TopBar extends React.Component {
                     <Button
                         text={GetEffectiveAcl(Doc.ActiveDashboard) === AclAdmin ? 'Share' : 'View Original'}
                         type={Type.TERT}
-                        color={this.variantColor}
+                        color={SettingsManager.userColor}
+                        background={this.variantColor}
                         onClick={() => {
                             SharingManager.Instance.open(undefined, Doc.ActiveDashboard);
                         }}