From fd1414c58d845bff92338185400040dde9370e4b Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Thu, 1 Jun 2023 14:01:24 -0500
Subject: [PATCH 01/23] first attempt at dark mode for 3 panels / modals

---
 .../src/ts/devtools/components/kcmOverviewScreen.tsx |  3 +++
 .../src/ts/devtools/components/scanSection.tsx       |  2 +-
 .../src/ts/devtools/components/splashScreen.tsx      |  4 +++-
 .../src/ts/devtools/components/summaryScreen.scss    | 12 ++++++------
 .../src/ts/devtools/components/summaryScreen.tsx     |  7 ++++---
 .../src/ts/devtools/devToolsApp.scss                 |  2 +-
 .../src/ts/devtools/devToolsApp.tsx                  | 12 +++++-------
 7 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/accessibility-checker-extension/src/ts/devtools/components/kcmOverviewScreen.tsx b/accessibility-checker-extension/src/ts/devtools/components/kcmOverviewScreen.tsx
index 19f088a19..48fa41b6e 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/kcmOverviewScreen.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/kcmOverviewScreen.tsx
@@ -19,6 +19,7 @@ import React from "react";
 import { Column, Grid, Checkbox, Theme } from '@carbon/react';
 import { ISettings } from "../../interfaces/interfaces";
 import { getBGController } from "../../background/backgroundController";
+import { BrowserDetection } from '../../util/browserDetection';
 
 import "./kcmOverviewScreen.scss";
 
@@ -52,6 +53,7 @@ export default class KCMOverviewScreen extends React.Component<IKCMOverviewScree
         let showAgainChecked: boolean = this.state.settings ? !this.state.settings?.tabStopAlerts : false;
         return <aside className="kcmOverview">
             {/* KCM Overview Title */}
+            <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
             <Grid style={{marginTop: "1rem", marginBottom: "1rem"}}>
                 <Column sm={{ span: 4 }} md={{ span: 8 }} lg={{ span: 8 }}>
                     <span className="kcmTitle">Keyboard tab stops </span>
@@ -157,6 +159,7 @@ export default class KCMOverviewScreen extends React.Component<IKCMOverviewScree
                     </div>
                 </Column>
             </Grid>
+            </Theme>
         </aside>;
     }
 }
\ No newline at end of file
diff --git a/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx b/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
index 5c298b286..793ae145d 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
@@ -190,7 +190,7 @@ export class ScanSection extends React.Component<{}, ScanSectionState> {
                                         }
                                     }>Scan</Button>
                                 </div>
-                                <Theme theme={BrowserDetection.isDarkMode()?"g90":"g100"} style={{flex: "0 1 2rem"}}>
+                                <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"} style={{flex: "0 1 2rem"}}>
                                     <OverflowMenu 
                                         size="sm" 
                                         ariaLabel="stored scans" 
diff --git a/accessibility-checker-extension/src/ts/devtools/components/splashScreen.tsx b/accessibility-checker-extension/src/ts/devtools/components/splashScreen.tsx
index 623923aa2..461c8882d 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/splashScreen.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/splashScreen.tsx
@@ -15,7 +15,7 @@
   *****************************************************************************/
 
 import React from "react";
-import { Column, Grid } from "@carbon/react";
+import { Column, Grid, Theme } from "@carbon/react";
 import { BrowserDetection } from "../../util/browserDetection";
 import "./splashScreen.scss";
 
@@ -39,6 +39,7 @@ export default class SplashScreen extends React.Component<ISplashScreenProps, IS
             }
         }
         return (
+            <Theme theme={BrowserDetection.isDarkMode()?"g90":"g100"}>
             <Grid className="splashScreen">
                 <Column sm={{span: 4}} md={{span: 4}} lg={{span: 4}}>
                     <h2>
@@ -59,6 +60,7 @@ export default class SplashScreen extends React.Component<ISplashScreenProps, IS
                     <img src={splashScreen} alt="Splash screen" style={{ maxWidth: "100%", marginTop: "36px" }}></img>
                 </Column>
             </Grid>
+            </Theme>
         )
     }
 }
\ No newline at end of file
diff --git a/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.scss b/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.scss
index 96fb39f70..a48ad7106 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.scss
@@ -38,13 +38,13 @@
     
     .tile-title {
         @include type-style('productive-heading-01');            
-        color: #121619;
+        // color: #121619; // JCH remove for Dark Mode
     }
 
     .tile-score {
         @include type-style('heading-07');
         margin-top: 8px;
-        color: #161616;
+        // color: #161616; // JCH remove for Dark Mode
     }
 
     .tile-description {
@@ -58,7 +58,7 @@
     .score-tile {
         box-sizing: border-box;
         border: solid #8A3FFC 1px;
-        background-color: #E8DAFF;
+        // background-color: #E8DAFF; // JCH remove for Dark Mode
         margin-top: 18px;
         height: 10rem;
     }
@@ -66,14 +66,14 @@
     .status-score-tile {
         box-sizing: border-box;
         border: solid #8A3FFC 1px;
-        background-color: #E8DAFF;
+        // background-color: #E8DAFF; // JCH remove for Dark Mode
         margin-top: 18px;
         height: 10rem;
     }
 
     .count-tile {
-        box-sizing: border-box;
-        background-color: #FFFFFF;
+        box-sizing: border-box; // JCH remove for Dark Mode
+        // background-color: #FFFFFF;
         margin-top: 18px;
         height: 154px
     }
diff --git a/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.tsx b/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.tsx
index ced4f9036..7fff9d987 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.tsx
@@ -16,12 +16,13 @@
 
 import React from "react";
 
-import { Column, Grid, Tile } from '@carbon/react';
+import { Column, Grid, Tile, Theme } from '@carbon/react';
 import Violation16 from "../../../assets/Violation16.svg";
 import NeedsReview16 from "../../../assets/NeedsReview16.svg";
 import Recommendation16 from "../../../assets/Recommendation16.svg";
 import { IReport, IStoredReportMeta } from "../../interfaces/interfaces";
 import { getDevtoolsController } from "../devtoolsController";
+import { BrowserDetection } from "../../util/browserDetection";
 import "./summaryScreen.scss";
 
 interface ISummaryScreenState {
@@ -82,6 +83,7 @@ export default class SummaryScreen extends React.Component<ISummaryScreenProps,
 
         return <aside className="reportSummary" aria-labelledby="summaryTitle">
             <div style={{ margin: "1rem -1rem 0rem 0rem" }}>
+            <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
                 <Grid style={{margin: "0rem"}}>
                     <Column sm={{ span: 4 }} md={{ span: 6 }} lg={{ span: 6 }}>
                         <h2 id="summaryTitle" className="summaryTitle">Scan summary</h2>
@@ -98,8 +100,6 @@ export default class SummaryScreen extends React.Component<ISummaryScreenProps,
                             </div>
                             <div className="tile-score">{currentStatus}%</div>
                             <div className="tile-description">Percentage of elements with no detected violations or items to review</div>
-                            {/* <div className="tile-description">Elements with Violations or Needs review: {failUniqueElements.length} </div>
-                            <div className="tile-description">Web page tested HTML elements: {testedElements}</div> */}
                         </Tile>
                     </Column>
                     <Column sm={{ span: 4 }} md={{ span: 4 }} lg={{ span: 4 }}>
@@ -135,6 +135,7 @@ export default class SummaryScreen extends React.Component<ISummaryScreenProps,
                         </Tile>
                     </Column>
                 </Grid>
+            </Theme>
             </div>
         </aside>;
     }
diff --git a/accessibility-checker-extension/src/ts/devtools/devToolsApp.scss b/accessibility-checker-extension/src/ts/devtools/devToolsApp.scss
index 149a01165..64c42dc48 100644
--- a/accessibility-checker-extension/src/ts/devtools/devToolsApp.scss
+++ b/accessibility-checker-extension/src/ts/devtools/devToolsApp.scss
@@ -13,7 +13,7 @@ body {
         background-color: var(--cds-background);
     }
     .secondaryColumn {
-        background-color: $gray-10;
+        // background-color: $gray-10;
         .cds--subgrid {
             >.cds--css-grid-column:first-of-type {
                 margin-left: 2rem;
diff --git a/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx b/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx
index 22de6587f..3d75046a7 100644
--- a/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx
@@ -93,18 +93,16 @@ export class DevToolsApp extends React.Component<DevToolsAppProps, DevToolsAppSt
             {this.state.secondaryView === "kcm_overview" && <KCMOverviewScreen /> }
         </>;
 
-        return <Theme theme={BrowserDetection.isDarkMode()?"g100":"white"} style={{padding: "0rem", minHeight: "100%", maxHeight: "100%", height: "100%"}}>
+        return <Theme theme={BrowserDetection.isDarkMode()?"g90":"white"} style={{padding: "0rem", minHeight: "100%", maxHeight: "100%", height: "100%"}}>
             <Grid fullWidth={true} narrow={true} className="primaryColumn" style={{padding: "0rem", minHeight: "100%", maxHeight: "100%", height: "100%"}}>
                 <Column sm={4} md={8} lg={8} style={{margin: "0rem", minHeight: "100%", maxHeight: "100%", height: "100%" }}>
                     <div style={{ width: "calc(100% - 1rem", minHeight: "100%", maxHeight: "100%", height: "100%" }}>
                         {primaryPanel}
                     </div>
                 </Column>
-                <Column sm={0} md={0} lg={8} className="secondaryColumn" style={{margin: "0rem", overflowY: "auto", maxHeight: "100%" }}>
-                    <Theme theme={BrowserDetection.isDarkMode()?"g10":"g10"} style={{ width: "calc(100% - 1rem", padding: "0rem", height: "100%" }}>
-                        {secondaryPanel}
-                    </Theme>
-                </Column>
+                    <Column sm={0} md={0} lg={8} className="secondaryColumn" style={{margin: "0rem", overflowY: "auto", maxHeight: "100%" }}>
+                            {secondaryPanel}
+                    </Column>
             </Grid>
             {typeof document === 'undefined'
                 ? null
@@ -136,7 +134,7 @@ export class DevToolsApp extends React.Component<DevToolsAppProps, DevToolsAppSt
                                 </div>
                             </>}
                             <ModalBody style={{paddingLeft: "0rem", paddingRight: "0rem", marginBottom: "0rem", height: "100%"}}>
-                                {secondaryPanelModal}
+                                    {secondaryPanelModal}
                             </ModalBody>
                         </ComposedModal>
                     </div>,

From dfad880e8c11f033362a5eafdd8d980de3d9909b Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Thu, 1 Jun 2023 16:44:20 -0500
Subject: [PATCH 02/23] fixed dark mode when you click on issue

---
 .../src/ts/devtools/components/reportTreeGrid.scss   |  2 +-
 .../src/ts/devtools/components/reportTreeGrid.tsx    | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.scss b/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.scss
index 944155b35..bd622115a 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.scss
@@ -47,7 +47,7 @@
     .gridBody.selectedNode {
         > div { // column
             > div {
-                background-color: var(--selected-node-background);
+                // background-color: var(--selected-node-background); // JCH remove for Dark Mode
                 border-top: solid var(--selected-node-border-color) var(--border-width);
                 border-bottom: solid var(--selected-node-border-color) var(--border-width);
             }
diff --git a/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.tsx b/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.tsx
index 5ba1f5c94..d7e57365f 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.tsx
@@ -18,7 +18,7 @@ import * as React from 'react';
 import {
     Column,
     Grid,
-    Link
+    Link, Theme
 } from "@carbon/react";
 
 import {
@@ -32,6 +32,7 @@ import { getDevtoolsAppController } from '../devtoolsAppController';
 import { ePanel, getDevtoolsController, ViewState } from '../devtoolsController';
 import { UtilIssue } from '../../util/UtilIssue';
 import { UtilIssueReact } from '../../util/UtilIssueReact';
+import { BrowserDetection } from "../../util/browserDetection";
 
 export interface IRowGroup {
     id: string
@@ -569,7 +570,9 @@ export class ReportTreeGrid<RowType extends IRowGroup> extends React.Component<R
                         let selectedDescendant: boolean = !!this.props.selectedPath 
                             && thisIssue.path.dom.startsWith(this.props.selectedPath);
                         let focused: boolean = this.state.tabRowId === rowId
-                        bodyContent.push(<Grid 
+                        bodyContent.push(
+                        <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
+                        <Grid 
                             id={rowId}
                             role="row" 
                             aria-level="2" 
@@ -586,6 +589,7 @@ export class ReportTreeGrid<RowType extends IRowGroup> extends React.Component<R
                                 this.onRow(group, thisIssue);
                             }}
                         >
+                            
                             <Column className="gridChild" role="gridcell" aria-selected={selectedIssue} sm={4} md={8} lg={8}>
                                 <div className="gridDataCell">
                                     {UtilIssueReact.valueToIcon(thisIssue.value, "levelIcon")} {thisIssue.message} <a 
@@ -605,7 +609,9 @@ export class ReportTreeGrid<RowType extends IRowGroup> extends React.Component<R
                                     >Learn more</a>
                                 </div>
                             </Column>
-                        </Grid>);
+                        </Grid>
+                        </Theme>
+                        );
                     }
                 }
             }

From 73a7ed80f5ae6613c4106cb9138d826c750b35d4 Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Fri, 2 Jun 2023 18:20:48 -0500
Subject: [PATCH 03/23] add dark mode to many pages

---
 .../ts/devtools/components/scanSection.tsx    |  6 +++--
 .../ts/devtools/components/storedScreen.tsx   |  5 ++--
 .../src/ts/docs/QuickGuideACApp.tsx           |  9 ++++++-
 .../src/ts/docs/UsingACApp.tsx                | 26 +++++++++++--------
 .../src/ts/docs/components/DocPage.scss       |  2 +-
 .../src/ts/docs/quickGuide.scss               |  2 +-
 .../src/ts/docs/quickGuide.tsx                |  4 ++-
 .../src/ts/docs/usingAC.tsx                   |  5 ++--
 .../src/ts/options/OptionsApp.tsx             | 11 ++++++--
 .../src/ts/options/index.tsx                  |  9 ++++---
 10 files changed, 53 insertions(+), 26 deletions(-)

diff --git a/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx b/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
index 793ae145d..7b182791e 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
@@ -190,13 +190,14 @@ export class ScanSection extends React.Component<{}, ScanSectionState> {
                                         }
                                     }>Scan</Button>
                                 </div>
-                                <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"} style={{flex: "0 1 2rem"}}>
+                                <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
                                     <OverflowMenu 
                                         size="sm" 
                                         ariaLabel="stored scans" 
-                                        align="bottom" 
+                                        //align="bottom" 
                                         renderIcon={ChevronDown}
                                     >
+                                        <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
                                         <OverflowMenuItem
                                             disabled={!this.state.reportContent}
                                             itemText="Download current scan" 
@@ -231,6 +232,7 @@ export class ScanSection extends React.Component<{}, ScanSectionState> {
                                                 this.setState({ confirmClearStored: true });
                                             }}
                                         />
+                                        </Theme>
                                     </OverflowMenu>
                                 </Theme>
                             </div>
diff --git a/accessibility-checker-extension/src/ts/devtools/components/storedScreen.tsx b/accessibility-checker-extension/src/ts/devtools/components/storedScreen.tsx
index 5a10bdb8c..027cef4f8 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/storedScreen.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/storedScreen.tsx
@@ -34,6 +34,7 @@ import { IStoredReportMeta } from "../../interfaces/interfaces";
 import { getDevtoolsController } from "../devtoolsController";
 import "./storedScreen.scss";
 import { BasicTable } from "./BasicTable";
+import { BrowserDetection } from "../../util/browserDetection";
 
 interface IStoredScreenState {
     storedReports: IStoredReportMeta[]
@@ -69,8 +70,8 @@ export default class StoredScreen extends React.Component<IStoredScreenProps, IS
         return (
             <Grid className="storedScreen">
                 <Column sm={{span: 4}} md={{span: 8}} lg={{span: 8}}>
-                    <Theme theme="g10">
-                        <h2>Stored Scans</h2>
+                    <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
+                        <h2>Stored scans</h2>
                         <div style={{marginTop: "1rem"}} />
                         <div style={{
                             display: (this.state.deleteSelectedRows || detailRow) ? "none": "block"
diff --git a/accessibility-checker-extension/src/ts/docs/QuickGuideACApp.tsx b/accessibility-checker-extension/src/ts/docs/QuickGuideACApp.tsx
index ff0f0aae5..3351d339e 100644
--- a/accessibility-checker-extension/src/ts/docs/QuickGuideACApp.tsx
+++ b/accessibility-checker-extension/src/ts/docs/QuickGuideACApp.tsx
@@ -24,8 +24,9 @@ import tabStop from "../../assets/tab_stop.svg";
 import tabStopChainError from "../../assets/tabStopChainError.svg";
 import tabStopError from "../../assets/tabStopError.svg";
 import { DocPage } from "./components/DocPage";
-import { Link, ListItem, OrderedList, UnorderedList } from "@carbon/react";
+import { Link, ListItem, OrderedList, UnorderedList, Theme } from "@carbon/react";
 import "./quickGuide.scss";
+import { BrowserDetection } from "../util/browserDetection";
 
 interface quickGuideACAppState { }
 
@@ -34,6 +35,7 @@ export class QuickGuideACApp extends React.Component<{}, quickGuideACAppState> {
 
     render() {
         let aside = (<>
+            <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
             <div style={{ marginTop: "1.5rem" }} />
             <OrderedList style={{ marginLeft: "1.5rem" }}>
                 <ListItem><Link href="#checker">Accessibility Checker</Link></ListItem>
@@ -51,13 +53,16 @@ export class QuickGuideACApp extends React.Component<{}, quickGuideACAppState> {
                     inline={true}
                     size="lg">user guide</Link>
             </p>
+            </Theme>
         </>)
         return (
             <DocPage aside={aside} sm={4} md={8} lg={8}>
+                <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
                 <main
                     role="main"
                     aria-label="Quick guide details"
                 >
+                    
                     <h1>IBM Accessibility Checker quick guide</h1>
                     <p>
                         The IBM Accessibility Checker is a browser extension that tests web pages for accessibility issues with W3C Web Content Accessibility Guidelines (WCAG) and IBM requirements with explanations and suggested fixes.
@@ -236,7 +241,9 @@ export class QuickGuideACApp extends React.Component<{}, quickGuideACAppState> {
                         <ListItem>Reopen the browser DevTools</ListItem>
                         <ListItem>Click the 'Scan' button</ListItem>
                     </UnorderedList>
+                    
                 </main>
+                </Theme>
             </DocPage>
         );
     }
diff --git a/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx b/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx
index 68fc95eb9..b4c25e80d 100644
--- a/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx
+++ b/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx
@@ -33,12 +33,8 @@ import tab from "../../assets/tab.svg";
 import upDown from "../../assets/up_down.svg";
 import { DocPage } from "./components/DocPage";
 import "./usingAC.scss";
-import {
-    Link,
-    ListItem,
-    OrderedList,
-    UnorderedList
-} from "@carbon/react";
+import { Link, ListItem, OrderedList, UnorderedList, Theme } from "@carbon/react";
+import { BrowserDetection } from "../util/browserDetection";
 
 interface UsingACAppState { }
 
@@ -46,7 +42,8 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
     state: UsingACAppState = {};
 
     render() {
-        let aside = <>
+        let aside = (<>
+            <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
             <div style={{ marginTop: "1.5rem" }} />
             <OrderedList>
                 <ListItem><Link href="#install">How to install</Link></ListItem>
@@ -68,10 +65,14 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
                 <ListItem><Link href="#troubleshooting">Troubleshooting</Link></ListItem>
             </OrderedList>
             <p>For bite-sized guidance, see <Link inline={true} size="lg" href={chrome.runtime.getURL("quickGuideAC.html")} target="_blank" rel="noopener noreferred">quick guide</Link>
-            </p></>
-
-        return (<DocPage aside={aside} sm={4} md={8} lg={8}>
-
+            </p>
+            </Theme>
+            </>)
+
+        return (
+            
+            <DocPage aside={aside} sm={4} md={8} lg={8}>
+            <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
             <main
                 aria-label="User guide details"
             >
@@ -814,8 +815,11 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
                         alt="keyboard tab stop indicators stacked on amazon's carousel banner"
                     />
                 </p>
+                
             </main>
+            </Theme>
         </DocPage>
+        
         );
     }
 }
diff --git a/accessibility-checker-extension/src/ts/docs/components/DocPage.scss b/accessibility-checker-extension/src/ts/docs/components/DocPage.scss
index 36a6aa0d5..d328ecb1c 100644
--- a/accessibility-checker-extension/src/ts/docs/components/DocPage.scss
+++ b/accessibility-checker-extension/src/ts/docs/components/DocPage.scss
@@ -21,7 +21,7 @@ body {
         }
     }
     .leftCol {
-        background-color: $gray-10;
+        // background-color: $gray-10; // JCH remove for Dark Mode
         padding-right: var(--cds-grid-gutter-end);
         padding-left: var(--cds-grid-gutter-start);
         margin-left: 0rem;
diff --git a/accessibility-checker-extension/src/ts/docs/quickGuide.scss b/accessibility-checker-extension/src/ts/docs/quickGuide.scss
index d0fbffd61..d5e6cac8d 100644
--- a/accessibility-checker-extension/src/ts/docs/quickGuide.scss
+++ b/accessibility-checker-extension/src/ts/docs/quickGuide.scss
@@ -3,7 +3,7 @@
     .rightCol {
         main, *[role=main] {
             p > img {
-                background-color: rgba(0,0,0,.5);
+                background-color: rgba(0,0,0,.5); 
             }
             li > img {
                 vertical-align: text-top;
diff --git a/accessibility-checker-extension/src/ts/docs/quickGuide.tsx b/accessibility-checker-extension/src/ts/docs/quickGuide.tsx
index 47a196857..4abd49572 100644
--- a/accessibility-checker-extension/src/ts/docs/quickGuide.tsx
+++ b/accessibility-checker-extension/src/ts/docs/quickGuide.tsx
@@ -16,9 +16,11 @@
 
 import * as React from 'react';
 import ReactDOM from 'react-dom';
+import {  Theme } from "@carbon/react";
+import { BrowserDetection } from "../util/browserDetection";
 import {QuickGuideACApp} from "./QuickGuideACApp";
 import "../styles/index.scss";
 
-ReactDOM.render(<QuickGuideACApp />
+ReactDOM.render(<Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}><QuickGuideACApp /></Theme>
     , document.getElementById('pageapp-root'));
     
\ No newline at end of file
diff --git a/accessibility-checker-extension/src/ts/docs/usingAC.tsx b/accessibility-checker-extension/src/ts/docs/usingAC.tsx
index 7be7354f1..e1f31db27 100644
--- a/accessibility-checker-extension/src/ts/docs/usingAC.tsx
+++ b/accessibility-checker-extension/src/ts/docs/usingAC.tsx
@@ -16,13 +16,14 @@
 
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-    
+import {  Theme } from "@carbon/react";
+import { BrowserDetection } from "../util/browserDetection";
 import "../styles/index.scss";
 import UsingACApp from './UsingACApp';
 
 class PageApp extends React.Component<{}, {}> {
     render() {
-        return <UsingACApp />
+        return <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}><UsingACApp /></Theme>
     }
 }
 
diff --git a/accessibility-checker-extension/src/ts/options/OptionsApp.tsx b/accessibility-checker-extension/src/ts/options/OptionsApp.tsx
index 298e8fdfa..6fdba530a 100644
--- a/accessibility-checker-extension/src/ts/options/OptionsApp.tsx
+++ b/accessibility-checker-extension/src/ts/options/OptionsApp.tsx
@@ -21,6 +21,8 @@ import React from "react";
 import { IArchiveDefinition, IPolicyDefinition, ISettings } from "../interfaces/interfaces";
 import { getBGController } from "../background/backgroundController";
 import { DocPage } from "../docs/components/DocPage";
+import {  Theme } from "@carbon/react";
+import { BrowserDetection } from "../util/browserDetection";
 
 import {
     Button,
@@ -289,7 +291,9 @@ export class OptionsApp extends React.Component<{}, OptionsAppState> {
         // user uses the keyboard visualization - note it is can be 
         // reset with "Reset to defaults"
 
-        let aside = <aside aria-label="About Accessibility Checker Options">
+        let aside = (<>
+            <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
+            <aside aria-label="About Accessibility Checker Options">
             <p>
                 By default, the Accessibility Checker uses a set of rules that correspond to 
                 the most recent WCAG standards plus some additional IBM requirements. Rule sets 
@@ -307,7 +311,10 @@ export class OptionsApp extends React.Component<{}, OptionsAppState> {
                 >user guide</Link>.
             </p>
         </aside>;
+        </Theme>
+        </>)
         return (<DocPage aside={aside} sm={4} md={6} lg={6}>
+            <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
             <main aria-labelledby="options">
                 <h1 id="options">IBM Accessibility Checker options</h1>
                 {!archives || !rulesets && <>
@@ -506,7 +513,7 @@ export class OptionsApp extends React.Component<{}, OptionsAppState> {
                     </ButtonSet>
                 </>}
             </main>
-
+            </Theme>
         </DocPage>);
     }
 }
diff --git a/accessibility-checker-extension/src/ts/options/index.tsx b/accessibility-checker-extension/src/ts/options/index.tsx
index effb0e96a..60884472b 100644
--- a/accessibility-checker-extension/src/ts/options/index.tsx
+++ b/accessibility-checker-extension/src/ts/options/index.tsx
@@ -16,16 +16,19 @@
 
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-    
+import {  Theme } from "@carbon/react";
+import { BrowserDetection } from "../util/browserDetection";
 import "../styles/index.scss";
 import { OptionsApp } from './OptionsApp';
 
 class PageApp extends React.Component<{}, {}> {
     render() {
-        return <OptionsApp />
+        return <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
+                    <OptionsApp />
+                </Theme>
     }
 }
 
-ReactDOM.render(<PageApp />
+ReactDOM.render(<Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}><PageApp /></Theme>
     , document.getElementById('pageapp-root'));
     
\ No newline at end of file

From 773adaf51fa24d01039b4f5c12133b3dec26bb76 Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Tue, 6 Jun 2023 14:09:28 -0500
Subject: [PATCH 04/23] Dark Mode ready for Design Review

---
 .../src/html/darkMode.js                      |  18 ++
 .../devtools/components/kcmOverviewScreen.tsx |   2 +-
 .../ts/devtools/components/reportTreeGrid.tsx |   5 +-
 .../ts/devtools/components/scanSection.scss   |   4 +
 .../ts/devtools/components/scanSection.tsx    |  88 ++++---
 .../ts/devtools/components/splashScreen.tsx   |   4 +-
 .../ts/devtools/components/storedScreen.tsx   | 228 +++++++++---------
 .../ts/devtools/components/summaryScreen.tsx  |   5 +-
 .../src/ts/devtools/devToolsApp.tsx           |  10 +-
 .../src/ts/docs/QuickGuideACApp.tsx           |  11 +-
 .../src/ts/docs/UsingACApp.tsx                |  11 +-
 .../src/ts/options/OptionsApp.tsx             |   8 +-
 .../src/ts/options/index.tsx                  |   2 +-
 .../src/ts/popup/PopupApp.tsx                 |   1 +
 .../src/ts/popup/index.tsx                    |   2 +
 .../src/ts/popup/popup.scss                   |  58 +----
 .../src/ts/util/browserDetection.ts           |  11 +
 17 files changed, 216 insertions(+), 252 deletions(-)
 create mode 100644 accessibility-checker-extension/src/html/darkMode.js

diff --git a/accessibility-checker-extension/src/html/darkMode.js b/accessibility-checker-extension/src/html/darkMode.js
new file mode 100644
index 000000000..6f81fa2a6
--- /dev/null
+++ b/accessibility-checker-extension/src/html/darkMode.js
@@ -0,0 +1,18 @@
+function darkMode() {
+        // Check to see if Media-Queries are supported
+    if (window.matchMedia) {
+    // Check if the dark-mode Media-Query matches
+    if(window.matchMedia('(prefers-color-scheme: dark)').matches){
+        // Dark g90
+        console.log("change body element to class = g90");
+        body.setAttribute("class", "cds--g90");
+    } else {
+        // Light g10
+        console.log("change body element to class = g10");
+        body.setAttribute("class", "cds--g10");
+    }
+    } else {
+    // Default (when Media-Queries are not supported)
+    console.log("watch.media not supported")
+    }
+}
\ No newline at end of file
diff --git a/accessibility-checker-extension/src/ts/devtools/components/kcmOverviewScreen.tsx b/accessibility-checker-extension/src/ts/devtools/components/kcmOverviewScreen.tsx
index 48fa41b6e..6df50fb98 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/kcmOverviewScreen.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/kcmOverviewScreen.tsx
@@ -160,6 +160,6 @@ export default class KCMOverviewScreen extends React.Component<IKCMOverviewScree
                 </Column>
             </Grid>
             </Theme>
-        </aside>;
+        </aside>
     }
 }
\ No newline at end of file
diff --git a/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.tsx b/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.tsx
index d7e57365f..2aef188b0 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.tsx
@@ -18,7 +18,7 @@ import * as React from 'react';
 import {
     Column,
     Grid,
-    Link, Theme
+    Link
 } from "@carbon/react";
 
 import {
@@ -32,7 +32,6 @@ import { getDevtoolsAppController } from '../devtoolsAppController';
 import { ePanel, getDevtoolsController, ViewState } from '../devtoolsController';
 import { UtilIssue } from '../../util/UtilIssue';
 import { UtilIssueReact } from '../../util/UtilIssueReact';
-import { BrowserDetection } from "../../util/browserDetection";
 
 export interface IRowGroup {
     id: string
@@ -571,7 +570,6 @@ export class ReportTreeGrid<RowType extends IRowGroup> extends React.Component<R
                             && thisIssue.path.dom.startsWith(this.props.selectedPath);
                         let focused: boolean = this.state.tabRowId === rowId
                         bodyContent.push(
-                        <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
                         <Grid 
                             id={rowId}
                             role="row" 
@@ -610,7 +608,6 @@ export class ReportTreeGrid<RowType extends IRowGroup> extends React.Component<R
                                 </div>
                             </Column>
                         </Grid>
-                        </Theme>
                         );
                     }
                 }
diff --git a/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss b/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
index a91380f04..f83dad18f 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
@@ -12,6 +12,10 @@
     .cds--overflow-menu--sm {
         min-height: 2rem;
     }
+
+    .cds--btn {
+        min-height: none;
+    }
     
     .storedCount {
         margin-top:.5rem;
diff --git a/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx b/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
index 7b182791e..cda9b123e 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
@@ -29,7 +29,6 @@ import {
     OverflowMenu,
     OverflowMenuItem,
     Switch,
-    Theme,
     Tooltip
 } from "@carbon/react";
 import {
@@ -41,7 +40,6 @@ import { IReport } from '../../interfaces/interfaces';
 import { ChevronDown } from "@carbon/react/icons";
 import "./scanSection.scss";
 import { getDevtoolsAppController } from '../devtoolsAppController';
-import { BrowserDetection } from '../../util/browserDetection';
 
 let devtoolsController = getDevtoolsController();
 let bgController = getBGController();
@@ -190,51 +188,47 @@ export class ScanSection extends React.Component<{}, ScanSectionState> {
                                         }
                                     }>Scan</Button>
                                 </div>
-                                <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
-                                    <OverflowMenu 
-                                        size="sm" 
-                                        ariaLabel="stored scans" 
-                                        //align="bottom" 
-                                        renderIcon={ChevronDown}
-                                    >
-                                        <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
-                                        <OverflowMenuItem
-                                            disabled={!this.state.reportContent}
-                                            itemText="Download current scan" 
-                                            onClick={() => devtoolsController.exportXLS("last") }
-                                        />
-                                        <OverflowMenuItem 
-                                            // if scanStorage false not storing scans, if true storing scans
-                                            itemText= {this.state.storeReports ? "Stop storing scans" : "Start storing scans"}
-                                            onClick={() => {
-                                                devtoolsController.setStoreReports(!this.state.storeReports);
-                                            }}
-                                        />
-                                        <OverflowMenuItem 
-                                            disabled={this.state.storedReportsCount === 0} // disabled when no stored scans or 1 stored scan
-                                            itemText="Download stored scans" 
-                                            onClick={() => devtoolsController.exportXLS("all") }
-                                        />
-                                        <OverflowMenuItem 
-                                            disabled={this.state.storedReportsCount === 0} // disabled when no stored scans or 1 stored scan
-                                            itemText="View stored scans" 
-                                            onClick={async () => {
-                                                await devtoolsAppController.setSecondaryView("stored");
-                                                devtoolsAppController.openSecondary(".cds--overflow-menu[aria-label='stored scans']");
-                                            }}
-                                        />
-                                        <OverflowMenuItem 
-                                            disabled={this.state.storedReportsCount === 0}
-                                            isDelete={this.state.storedReportsCount > 0}
-                                            hasDivider
-                                            itemText="Delete stored scans" 
-                                            onClick={() => {
-                                                this.setState({ confirmClearStored: true });
-                                            }}
-                                        />
-                                        </Theme>
-                                    </OverflowMenu>
-                                </Theme>
+                                <OverflowMenu 
+                                    size="sm" 
+                                    ariaLabel="stored scans" 
+                                    //align="bottom" 
+                                    renderIcon={ChevronDown}
+                                >
+                                    <OverflowMenuItem
+                                        disabled={!this.state.reportContent}
+                                        itemText="Download current scan" 
+                                        onClick={() => devtoolsController.exportXLS("last") }
+                                    />
+                                    <OverflowMenuItem 
+                                        // if scanStorage false not storing scans, if true storing scans
+                                        itemText= {this.state.storeReports ? "Stop storing scans" : "Start storing scans"}
+                                        onClick={() => {
+                                            devtoolsController.setStoreReports(!this.state.storeReports);
+                                        }}
+                                    />
+                                    <OverflowMenuItem 
+                                        disabled={this.state.storedReportsCount === 0} // disabled when no stored scans or 1 stored scan
+                                        itemText="Download stored scans" 
+                                        onClick={() => devtoolsController.exportXLS("all") }
+                                    />
+                                    <OverflowMenuItem 
+                                        disabled={this.state.storedReportsCount === 0} // disabled when no stored scans or 1 stored scan
+                                        itemText="View stored scans" 
+                                        onClick={async () => {
+                                            await devtoolsAppController.setSecondaryView("stored");
+                                            devtoolsAppController.openSecondary(".cds--overflow-menu[aria-label='stored scans']");
+                                        }}
+                                    />
+                                    <OverflowMenuItem 
+                                        disabled={this.state.storedReportsCount === 0}
+                                        isDelete={this.state.storedReportsCount > 0}
+                                        hasDivider
+                                        itemText="Delete stored scans" 
+                                        onClick={() => {
+                                            this.setState({ confirmClearStored: true });
+                                        }}
+                                    />
+                                </OverflowMenu>
                             </div>
                         </div>
                         <div style={{flex: "1 1 8.75rem"}}>
diff --git a/accessibility-checker-extension/src/ts/devtools/components/splashScreen.tsx b/accessibility-checker-extension/src/ts/devtools/components/splashScreen.tsx
index 461c8882d..623923aa2 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/splashScreen.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/splashScreen.tsx
@@ -15,7 +15,7 @@
   *****************************************************************************/
 
 import React from "react";
-import { Column, Grid, Theme } from "@carbon/react";
+import { Column, Grid } from "@carbon/react";
 import { BrowserDetection } from "../../util/browserDetection";
 import "./splashScreen.scss";
 
@@ -39,7 +39,6 @@ export default class SplashScreen extends React.Component<ISplashScreenProps, IS
             }
         }
         return (
-            <Theme theme={BrowserDetection.isDarkMode()?"g90":"g100"}>
             <Grid className="splashScreen">
                 <Column sm={{span: 4}} md={{span: 4}} lg={{span: 4}}>
                     <h2>
@@ -60,7 +59,6 @@ export default class SplashScreen extends React.Component<ISplashScreenProps, IS
                     <img src={splashScreen} alt="Splash screen" style={{ maxWidth: "100%", marginTop: "36px" }}></img>
                 </Column>
             </Grid>
-            </Theme>
         )
     }
 }
\ No newline at end of file
diff --git a/accessibility-checker-extension/src/ts/devtools/components/storedScreen.tsx b/accessibility-checker-extension/src/ts/devtools/components/storedScreen.tsx
index 027cef4f8..eae00b23c 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/storedScreen.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/storedScreen.tsx
@@ -22,8 +22,7 @@ import {
     Grid,
     Link,
     ModalFooter,
-    TextInput,
-    Theme
+    TextInput
 } from "@carbon/react";
 import {
     TrashCan,
@@ -34,7 +33,6 @@ import { IStoredReportMeta } from "../../interfaces/interfaces";
 import { getDevtoolsController } from "../devtoolsController";
 import "./storedScreen.scss";
 import { BasicTable } from "./BasicTable";
-import { BrowserDetection } from "../../util/browserDetection";
 
 interface IStoredScreenState {
     storedReports: IStoredReportMeta[]
@@ -70,126 +68,124 @@ export default class StoredScreen extends React.Component<IStoredScreenProps, IS
         return (
             <Grid className="storedScreen">
                 <Column sm={{span: 4}} md={{span: 8}} lg={{span: 8}}>
-                    <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
-                        <h2>Stored scans</h2>
-                        <div style={{marginTop: "1rem"}} />
-                        <div style={{
-                            display: (this.state.deleteSelectedRows || detailRow) ? "none": "block"
-                        }}>
-                            <BasicTable
-                                // title="Stored scans"
-                                emptyLabel="No scans stored."
-                                headers={[
-                                    // { key: 'id', header: "ID" },
-                                    { key: 'pageURL', header: 'URL' },
-                                    { key: 'pageTitle', header: 'Page title' },
-                                    { key: 'timestamp', header: 'Date and time' },
-                                    { key: 'label', header: 'Scan label' },
-                                ]}
-                                batchActions={[
-                                    {
-                                        icon: Download,
-                                        label: "Download",
-                                        onClick: async (selectedRows) => {
-                                            let storedReportsMeta = await this.devtoolsController.getStoredReportsMeta();
-                                            for (const storedReport of storedReportsMeta) {
-                                                storedReport.isSelected = false;
-                                            }
-                                            for (const selectedReport of selectedRows) {
-                                                storedReportsMeta[parseInt(selectedReport.id)].isSelected = true;
-                                            }
-                                            await this.devtoolsController.setStoredReportsMeta(storedReportsMeta);
-                                            this.devtoolsController.exportXLS("selected");
+                    <h2>Stored scans</h2>
+                    <div style={{marginTop: "1rem"}} />
+                    <div style={{
+                        display: (this.state.deleteSelectedRows || detailRow) ? "none": "block"
+                    }}>
+                        <BasicTable
+                            // title="Stored scans"
+                            emptyLabel="No scans stored."
+                            headers={[
+                                // { key: 'id', header: "ID" },
+                                { key: 'pageURL', header: 'URL' },
+                                { key: 'pageTitle', header: 'Page title' },
+                                { key: 'timestamp', header: 'Date and time' },
+                                { key: 'label', header: 'Scan label' },
+                            ]}
+                            batchActions={[
+                                {
+                                    icon: Download,
+                                    label: "Download",
+                                    onClick: async (selectedRows) => {
+                                        let storedReportsMeta = await this.devtoolsController.getStoredReportsMeta();
+                                        for (const storedReport of storedReportsMeta) {
+                                            storedReport.isSelected = false;
                                         }
-                                    },
-                                    {
-                                        icon: TrashCan,
-                                        label: "Delete",
-                                        onClick: (selectedRows) => {
-                                            this.setState({ deleteSelectedRows: selectedRows });
+                                        for (const selectedReport of selectedRows) {
+                                            storedReportsMeta[parseInt(selectedReport.id)].isSelected = true;
                                         }
+                                        await this.devtoolsController.setStoredReportsMeta(storedReportsMeta);
+                                        this.devtoolsController.exportXLS("selected");
                                     }
-                                ]}
-                                data={this.state.storedReports}
-                                className="StoredReportsTable"
-                                hideHeaders={false}
-                                hideToolbar={false}
-                                onRow={async (rowId: string) => {
-                                    this.setState({ detailSelectedRow: parseInt(rowId)})
-                                }}
-                                fieldMapper={(rowId, cellId, cellValue) => {
-                                    if (cellId === "timestamp") {
-                                        let d : Date = new Date(cellValue);
-                                        return `${d.toLocaleString()}`;
-                                    } else if (cellId === "label") {
-                                        return <TextInput
-                                            style={{minWidth: "8rem"}}
-                                            id={`label_${rowId}`}
-                                            labelText=""
-                                            aria-label="Scan label"
-                                            value={cellValue}
-                                            size="sm"
-                                            onChange={(evt: any) => {
-                                                this.updateLabel(parseInt(rowId), evt.target.value);
-                                            }}
-                                        />
+                                },
+                                {
+                                    icon: TrashCan,
+                                    label: "Delete",
+                                    onClick: (selectedRows) => {
+                                        this.setState({ deleteSelectedRows: selectedRows });
                                     }
-                                    return cellValue;
-                                }}
-                            />
-                        </div>
-                        { this.state.deleteSelectedRows && <>
-                            <div>
-                                Are you sure you want to delete {this.state.deleteSelectedRows.length} selected scans?
-                                This action is irreversible.
-                            </div>
-                            <div style={{marginTop: "1.5rem"}} />
-                            <ModalFooter>
-                                <Button kind="secondary" onClick={() => {
-                                    this.setState({ deleteSelectedRows: undefined });
-                                }}>
-                                    Cancel
-                                </Button>
-                                <Button kind="danger" onClick={async () => {
-                                    let newList: IStoredReportMeta[] = JSON.parse(JSON.stringify(this.state.storedReports));
-                                    for (const deleteScan of this.state.deleteSelectedRows!) {
-                                        let idx = newList.findIndex(scan => scan.id === deleteScan.id);
-                                        newList.splice(idx, 1);
-                                    }
-                                    await getDevtoolsController().setStoredReportsMeta(newList);
-                                    this.setState({ deleteSelectedRows: undefined });
-                                }}>
-                                    Delete
-                                </Button>
-                            </ModalFooter>
-                        </>}
-                        { detailRow && <>
-                            <div>
-                                <Link onClick={() => {
-                                    this.setState({ detailSelectedRow: undefined })
-                                }}>Back to stored scans</Link>
-                            </div>
-                            <Grid className="storedScreen">
-                                <Column sm={{span: 4}} md={{span: 4}} lg={{span: 4}}>
-                                    <img src={detailRow.screenshot} alt="Screenshot of page scanned" width="100%" />
-                                </Column>
-                                <Column sm={{span: 4}} md={{span: 4}} lg={{span: 4}}>
-                                    <div><strong>URL: </strong>{detailRow.pageURL}</div>
-                                    <div><strong>Page title: </strong>{detailRow.pageTitle}</div>
-                                    <div><strong>Scan time: </strong>{new Date(detailRow.timestamp).toLocaleString()}</div>
-                                    <div style={{marginTop: ".5rem"}} />
-                                    <TextInput 
-                                        style={{backgroundColor: "white"}}
-                                        labelText="Scan label" 
-                                        value={detailRow.label} 
+                                }
+                            ]}
+                            data={this.state.storedReports}
+                            className="StoredReportsTable"
+                            hideHeaders={false}
+                            hideToolbar={false}
+                            onRow={async (rowId: string) => {
+                                this.setState({ detailSelectedRow: parseInt(rowId)})
+                            }}
+                            fieldMapper={(rowId, cellId, cellValue) => {
+                                if (cellId === "timestamp") {
+                                    let d : Date = new Date(cellValue);
+                                    return `${d.toLocaleString()}`;
+                                } else if (cellId === "label") {
+                                    return <TextInput
+                                        style={{minWidth: "8rem"}}
+                                        id={`label_${rowId}`}
+                                        labelText=""
+                                        aria-label="Scan label"
+                                        value={cellValue}
+                                        size="sm"
                                         onChange={(evt: any) => {
-                                            this.updateLabel(this.state.detailSelectedRow!, evt.target.value);
+                                            this.updateLabel(parseInt(rowId), evt.target.value);
                                         }}
                                     />
-                                </Column>
-                            </Grid>
-                        </>}
-                    </Theme>
+                                }
+                                return cellValue;
+                            }}
+                        />
+                    </div>
+                    { this.state.deleteSelectedRows && <>
+                        <div>
+                            Are you sure you want to delete {this.state.deleteSelectedRows.length} selected scans?
+                            This action is irreversible.
+                        </div>
+                        <div style={{marginTop: "1.5rem"}} />
+                        <ModalFooter>
+                            <Button kind="secondary" onClick={() => {
+                                this.setState({ deleteSelectedRows: undefined });
+                            }}>
+                                Cancel
+                            </Button>
+                            <Button kind="danger" onClick={async () => {
+                                let newList: IStoredReportMeta[] = JSON.parse(JSON.stringify(this.state.storedReports));
+                                for (const deleteScan of this.state.deleteSelectedRows!) {
+                                    let idx = newList.findIndex(scan => scan.id === deleteScan.id);
+                                    newList.splice(idx, 1);
+                                }
+                                await getDevtoolsController().setStoredReportsMeta(newList);
+                                this.setState({ deleteSelectedRows: undefined });
+                            }}>
+                                Delete
+                            </Button>
+                        </ModalFooter>
+                    </>}
+                    { detailRow && <>
+                        <div>
+                            <Link onClick={() => {
+                                this.setState({ detailSelectedRow: undefined })
+                            }}>Back to stored scans</Link>
+                        </div>
+                        <Grid className="storedScreen">
+                            <Column sm={{span: 4}} md={{span: 4}} lg={{span: 4}}>
+                                <img src={detailRow.screenshot} alt="Screenshot of page scanned" width="100%" />
+                            </Column>
+                            <Column sm={{span: 4}} md={{span: 4}} lg={{span: 4}}>
+                                <div><strong>URL: </strong>{detailRow.pageURL}</div>
+                                <div><strong>Page title: </strong>{detailRow.pageTitle}</div>
+                                <div><strong>Scan time: </strong>{new Date(detailRow.timestamp).toLocaleString()}</div>
+                                <div style={{marginTop: ".5rem"}} />
+                                <TextInput 
+                                    style={{backgroundColor: "white"}}
+                                    labelText="Scan label" 
+                                    value={detailRow.label} 
+                                    onChange={(evt: any) => {
+                                        this.updateLabel(this.state.detailSelectedRow!, evt.target.value);
+                                    }}
+                                />
+                            </Column>
+                        </Grid>
+                    </>}
                 </Column>
             </Grid>
         )
diff --git a/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.tsx b/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.tsx
index 7fff9d987..49e62cf8e 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.tsx
@@ -16,13 +16,12 @@
 
 import React from "react";
 
-import { Column, Grid, Tile, Theme } from '@carbon/react';
+import { Column, Grid, Tile } from '@carbon/react';
 import Violation16 from "../../../assets/Violation16.svg";
 import NeedsReview16 from "../../../assets/NeedsReview16.svg";
 import Recommendation16 from "../../../assets/Recommendation16.svg";
 import { IReport, IStoredReportMeta } from "../../interfaces/interfaces";
 import { getDevtoolsController } from "../devtoolsController";
-import { BrowserDetection } from "../../util/browserDetection";
 import "./summaryScreen.scss";
 
 interface ISummaryScreenState {
@@ -83,7 +82,6 @@ export default class SummaryScreen extends React.Component<ISummaryScreenProps,
 
         return <aside className="reportSummary" aria-labelledby="summaryTitle">
             <div style={{ margin: "1rem -1rem 0rem 0rem" }}>
-            <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
                 <Grid style={{margin: "0rem"}}>
                     <Column sm={{ span: 4 }} md={{ span: 6 }} lg={{ span: 6 }}>
                         <h2 id="summaryTitle" className="summaryTitle">Scan summary</h2>
@@ -135,7 +133,6 @@ export default class SummaryScreen extends React.Component<ISummaryScreenProps,
                         </Tile>
                     </Column>
                 </Grid>
-            </Theme>
             </div>
         </aside>;
     }
diff --git a/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx b/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx
index 3d75046a7..1128de822 100644
--- a/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx
@@ -28,8 +28,7 @@ import {
     ComposedModal,
     Grid,
     ModalBody,
-    ModalHeader,
-    Theme
+    ModalHeader
 } from "@carbon/react";
 
 import "../styles/index.scss";
@@ -72,6 +71,7 @@ export class DevToolsApp extends React.Component<DevToolsAppProps, DevToolsAppSt
     }
 
     render() {
+        BrowserDetection.setDarkLight();
         let primaryPanel = <div style={{display: "flex", flexFlow: "column", height: "100%"}}>
             <HeaderSection />
             <ScanSection />
@@ -93,8 +93,7 @@ export class DevToolsApp extends React.Component<DevToolsAppProps, DevToolsAppSt
             {this.state.secondaryView === "kcm_overview" && <KCMOverviewScreen /> }
         </>;
 
-        return <Theme theme={BrowserDetection.isDarkMode()?"g90":"white"} style={{padding: "0rem", minHeight: "100%", maxHeight: "100%", height: "100%"}}>
-            <Grid fullWidth={true} narrow={true} className="primaryColumn" style={{padding: "0rem", minHeight: "100%", maxHeight: "100%", height: "100%"}}>
+        return <Grid fullWidth={true} narrow={true} className="primaryColumn" style={{padding: "0rem", minHeight: "100%", maxHeight: "100%", height: "100%"}}>
                 <Column sm={4} md={8} lg={8} style={{margin: "0rem", minHeight: "100%", maxHeight: "100%", height: "100%" }}>
                     <div style={{ width: "calc(100% - 1rem", minHeight: "100%", maxHeight: "100%", height: "100%" }}>
                         {primaryPanel}
@@ -121,7 +120,7 @@ export class DevToolsApp extends React.Component<DevToolsAppProps, DevToolsAppSt
                             { Config.SECONDARY_MODAL && <ModalHeader /> }
                             { !Config.SECONDARY_MODAL && <>
                                 <div style={{
-                                    backgroundColor: "white",
+                                    // backgroundColor: "white",
                                     padding: "1rem"
                                 }}>
                                     <Button 
@@ -141,6 +140,5 @@ export class DevToolsApp extends React.Component<DevToolsAppProps, DevToolsAppSt
                     document.body
                 )
             }
-        </Theme>
     }
 }
diff --git a/accessibility-checker-extension/src/ts/docs/QuickGuideACApp.tsx b/accessibility-checker-extension/src/ts/docs/QuickGuideACApp.tsx
index 3351d339e..12c9f5dd7 100644
--- a/accessibility-checker-extension/src/ts/docs/QuickGuideACApp.tsx
+++ b/accessibility-checker-extension/src/ts/docs/QuickGuideACApp.tsx
@@ -24,7 +24,11 @@ import tabStop from "../../assets/tab_stop.svg";
 import tabStopChainError from "../../assets/tabStopChainError.svg";
 import tabStopError from "../../assets/tabStopError.svg";
 import { DocPage } from "./components/DocPage";
-import { Link, ListItem, OrderedList, UnorderedList, Theme } from "@carbon/react";
+import { Link, 
+    ListItem, 
+    OrderedList, 
+    UnorderedList, 
+} from "@carbon/react";
 import "./quickGuide.scss";
 import { BrowserDetection } from "../util/browserDetection";
 
@@ -34,8 +38,8 @@ export class QuickGuideACApp extends React.Component<{}, quickGuideACAppState> {
     state: quickGuideACAppState = {};
 
     render() {
+        BrowserDetection.setDarkLight();
         let aside = (<>
-            <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
             <div style={{ marginTop: "1.5rem" }} />
             <OrderedList style={{ marginLeft: "1.5rem" }}>
                 <ListItem><Link href="#checker">Accessibility Checker</Link></ListItem>
@@ -53,11 +57,9 @@ export class QuickGuideACApp extends React.Component<{}, quickGuideACAppState> {
                     inline={true}
                     size="lg">user guide</Link>
             </p>
-            </Theme>
         </>)
         return (
             <DocPage aside={aside} sm={4} md={8} lg={8}>
-                <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
                 <main
                     role="main"
                     aria-label="Quick guide details"
@@ -243,7 +245,6 @@ export class QuickGuideACApp extends React.Component<{}, quickGuideACAppState> {
                     </UnorderedList>
                     
                 </main>
-                </Theme>
             </DocPage>
         );
     }
diff --git a/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx b/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx
index b4c25e80d..a6a13460e 100644
--- a/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx
+++ b/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx
@@ -33,7 +33,7 @@ import tab from "../../assets/tab.svg";
 import upDown from "../../assets/up_down.svg";
 import { DocPage } from "./components/DocPage";
 import "./usingAC.scss";
-import { Link, ListItem, OrderedList, UnorderedList, Theme } from "@carbon/react";
+import { Link, ListItem, OrderedList, UnorderedList } from "@carbon/react";
 import { BrowserDetection } from "../util/browserDetection";
 
 interface UsingACAppState { }
@@ -42,8 +42,9 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
     state: UsingACAppState = {};
 
     render() {
+        BrowserDetection.setDarkLight();
         let aside = (<>
-            <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
+            {/* <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}> */}
             <div style={{ marginTop: "1.5rem" }} />
             <OrderedList>
                 <ListItem><Link href="#install">How to install</Link></ListItem>
@@ -66,13 +67,13 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
             </OrderedList>
             <p>For bite-sized guidance, see <Link inline={true} size="lg" href={chrome.runtime.getURL("quickGuideAC.html")} target="_blank" rel="noopener noreferred">quick guide</Link>
             </p>
-            </Theme>
+            {/* </Theme> */}
             </>)
 
         return (
             
             <DocPage aside={aside} sm={4} md={8} lg={8}>
-            <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
+            {/* <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}> */}
             <main
                 aria-label="User guide details"
             >
@@ -817,7 +818,7 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
                 </p>
                 
             </main>
-            </Theme>
+            {/* </Theme> */}
         </DocPage>
         
         );
diff --git a/accessibility-checker-extension/src/ts/options/OptionsApp.tsx b/accessibility-checker-extension/src/ts/options/OptionsApp.tsx
index 6fdba530a..a1fcb7de6 100644
--- a/accessibility-checker-extension/src/ts/options/OptionsApp.tsx
+++ b/accessibility-checker-extension/src/ts/options/OptionsApp.tsx
@@ -21,7 +21,6 @@ import React from "react";
 import { IArchiveDefinition, IPolicyDefinition, ISettings } from "../interfaces/interfaces";
 import { getBGController } from "../background/backgroundController";
 import { DocPage } from "../docs/components/DocPage";
-import {  Theme } from "@carbon/react";
 import { BrowserDetection } from "../util/browserDetection";
 
 import {
@@ -279,6 +278,7 @@ export class OptionsApp extends React.Component<{}, OptionsAppState> {
     };
 
     render() {
+        BrowserDetection.setDarkLight();
         let {
             archives,
             selected_archive,
@@ -292,7 +292,6 @@ export class OptionsApp extends React.Component<{}, OptionsAppState> {
         // reset with "Reset to defaults"
 
         let aside = (<>
-            <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
             <aside aria-label="About Accessibility Checker Options">
             <p>
                 By default, the Accessibility Checker uses a set of rules that correspond to 
@@ -310,11 +309,9 @@ export class OptionsApp extends React.Component<{}, OptionsAppState> {
                     rel="noopener noreferred"
                 >user guide</Link>.
             </p>
-        </aside>;
-        </Theme>
+        </aside>
         </>)
         return (<DocPage aside={aside} sm={4} md={6} lg={6}>
-            <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
             <main aria-labelledby="options">
                 <h1 id="options">IBM Accessibility Checker options</h1>
                 {!archives || !rulesets && <>
@@ -513,7 +510,6 @@ export class OptionsApp extends React.Component<{}, OptionsAppState> {
                     </ButtonSet>
                 </>}
             </main>
-            </Theme>
         </DocPage>);
     }
 }
diff --git a/accessibility-checker-extension/src/ts/options/index.tsx b/accessibility-checker-extension/src/ts/options/index.tsx
index 60884472b..a146eae46 100644
--- a/accessibility-checker-extension/src/ts/options/index.tsx
+++ b/accessibility-checker-extension/src/ts/options/index.tsx
@@ -29,6 +29,6 @@ class PageApp extends React.Component<{}, {}> {
     }
 }
 
-ReactDOM.render(<Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}><PageApp /></Theme>
+ReactDOM.render(<PageApp />
     , document.getElementById('pageapp-root'));
     
\ No newline at end of file
diff --git a/accessibility-checker-extension/src/ts/popup/PopupApp.tsx b/accessibility-checker-extension/src/ts/popup/PopupApp.tsx
index 741a1faa0..5a6ac39ec 100644
--- a/accessibility-checker-extension/src/ts/popup/PopupApp.tsx
+++ b/accessibility-checker-extension/src/ts/popup/PopupApp.tsx
@@ -28,6 +28,7 @@
     export default class PopupApp extends React.Component {
     
       render() {
+        BrowserDetection.setDarkLight();
         const manifest = chrome.runtime.getManifest();
         function displayVersion() {
             let extVersion = manifest.version;
diff --git a/accessibility-checker-extension/src/ts/popup/index.tsx b/accessibility-checker-extension/src/ts/popup/index.tsx
index 61c6ef1ea..78d972329 100644
--- a/accessibility-checker-extension/src/ts/popup/index.tsx
+++ b/accessibility-checker-extension/src/ts/popup/index.tsx
@@ -16,6 +16,8 @@
 
 import * as React from 'react';
 import ReactDOM from 'react-dom';
+// import {  Theme } from "@carbon/react";
+// import { BrowserDetection } from "../util/browserDetection";
     
 import "../styles/index.scss";
 import PopupApp from './PopupApp';
diff --git a/accessibility-checker-extension/src/ts/popup/popup.scss b/accessibility-checker-extension/src/ts/popup/popup.scss
index d2bf9cfe2..b3cad13bf 100644
--- a/accessibility-checker-extension/src/ts/popup/popup.scss
+++ b/accessibility-checker-extension/src/ts/popup/popup.scss
@@ -3,7 +3,7 @@
 .popupPanel {
     min-width: 552px;
     margin: 1.5rem .5rem 1rem .5rem;
-    color: $gray-90;
+    // color: $gray-90; // JCH needs to go for light dark mode
 
     .popupTitle {
         @include type-style("helper-text-02");
@@ -11,7 +11,7 @@
 
     .versionDec {
         @include type-style("helper-text-01");
-        color: $gray-80;
+        // color: $gray-80; // JCH needs to go for light dark mode
         margin-top: .25rem;
     }
 
@@ -22,58 +22,8 @@
 
     .popupPanelDesc {
         @include type-style("helper-text-01");
-        color: $gray-70;
+        // color: $gray-70; // JCH needs to go for light dark mode
         margin-top: .5rem;
         margin-bottom: .5rem;
     }
-}
-// .popupPanel {
-//   width: 500px;
-//     margin: 26px 26px 24px 26px
-// }
-
-// .popupPanel a {
-//   color: #0062ff;
-//   text-decoration: none;
-// }
-
-// .popupTitle {
-//   font-size: 1rem;
-//   letter-spacing: 0;
-//   line-height: 1.25rem;
-//   color: #252525;
-//   font-family: "IBM Plex Sans";
-//   padding-top: 8px;
-// }
-
-// .versionDec {
-//   color: #3c3838;
-//   font-family: "IBM Plex Sans";
-//   font-size: 11px;
-//   letter-spacing: 0.13px;
-//   line-height: 18px;
-//   margin-top: 3px;
-// }
-
-// .popupSubTitle {
-//   color: #252525;
-//   font-size: 0.875rem;
-//   letter-spacing: 0.01rem;
-//   line-height: 1.125rem;
-//   margin-top: 1rem;
-// }
-
-// .popupPanelDesc {
-//   color: #565151;
-//   font-size: 0.6875rem;
-//   letter-spacing: 0;
-//   line-height: 0.875rem;
-//   margin-top: 0.5rem;
-// }
-
-// .links {
-//   color: #0062ff;
-//   font-size: 14px;
-//   letter-spacing: 0.16px;
-//   line-height: 18px;
-// }
+}
\ No newline at end of file
diff --git a/accessibility-checker-extension/src/ts/util/browserDetection.ts b/accessibility-checker-extension/src/ts/util/browserDetection.ts
index 617f7a9f4..af58b7466 100644
--- a/accessibility-checker-extension/src/ts/util/browserDetection.ts
+++ b/accessibility-checker-extension/src/ts/util/browserDetection.ts
@@ -13,6 +13,7 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 *****************************************************************************/
+declare var document: Document;
 
 export class BrowserDetection {
 
@@ -31,4 +32,14 @@ export class BrowserDetection {
     public static isDarkMode(): boolean {
         return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
     }
+
+    public static setDarkLight() {
+        if (typeof document !== "undefined" && typeof document.body !== "undefined") {
+            if (BrowserDetection.isDarkMode()) {
+                document.body.setAttribute("class", "cds--g90");
+            } else {
+                document.body.setAttribute("class", "cds--g10");
+            }
+        }
+    }
 }

From 534cec6c87906059ba917761d6fdea1638b5f72e Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Tue, 6 Jun 2023 14:33:46 -0500
Subject: [PATCH 05/23] Special theme for kb visualization guide

---
 .../src/ts/devtools/components/kcmOverviewScreen.tsx           | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/accessibility-checker-extension/src/ts/devtools/components/kcmOverviewScreen.tsx b/accessibility-checker-extension/src/ts/devtools/components/kcmOverviewScreen.tsx
index 6df50fb98..e33cc7218 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/kcmOverviewScreen.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/kcmOverviewScreen.tsx
@@ -50,10 +50,10 @@ export default class KCMOverviewScreen extends React.Component<IKCMOverviewScree
     }
 
     render() {
+        BrowserDetection.setDarkLight();
         let showAgainChecked: boolean = this.state.settings ? !this.state.settings?.tabStopAlerts : false;
         return <aside className="kcmOverview">
             {/* KCM Overview Title */}
-            <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
             <Grid style={{marginTop: "1rem", marginBottom: "1rem"}}>
                 <Column sm={{ span: 4 }} md={{ span: 8 }} lg={{ span: 8 }}>
                     <span className="kcmTitle">Keyboard tab stops </span>
@@ -159,7 +159,6 @@ export default class KCMOverviewScreen extends React.Component<IKCMOverviewScree
                     </div>
                 </Column>
             </Grid>
-            </Theme>
         </aside>
     }
 }
\ No newline at end of file

From 2f5f0a8bf69257adb9af572db8011add194fa044 Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Fri, 9 Jun 2023 16:11:22 -0500
Subject: [PATCH 06/23] more dark mode

---
 .../src/assets/BE_for_DarkMode.svg               | 16 ++++++++++++++++
 ...ssibility_darker.svg => BE_for_LightMode.svg} |  0
 .../src/ts/docs/QuickGuideACApp.tsx              |  8 ++++++--
 .../src/ts/docs/UsingACApp.tsx                   |  6 +++---
 .../src/ts/docs/components/DocPage.scss          |  4 ++--
 .../src/ts/docs/components/DocPage.tsx           | 10 ++++++----
 .../src/ts/docs/quickGuide.tsx                   |  9 ++++++---
 .../src/ts/docs/usingAC.tsx                      |  9 ++++++---
 8 files changed, 45 insertions(+), 17 deletions(-)
 create mode 100644 accessibility-checker-extension/src/assets/BE_for_DarkMode.svg
 rename accessibility-checker-extension/src/assets/{BE_for_Accessibility_darker.svg => BE_for_LightMode.svg} (100%)

diff --git a/accessibility-checker-extension/src/assets/BE_for_DarkMode.svg b/accessibility-checker-extension/src/assets/BE_for_DarkMode.svg
new file mode 100644
index 000000000..3b9140249
--- /dev/null
+++ b/accessibility-checker-extension/src/assets/BE_for_DarkMode.svg
@@ -0,0 +1,16 @@
+<svg width="40" height="31" viewBox="0 0 40 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_139_6375)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.4194 20.2471H13.5801V23.7038H26.4187L26.4194 20.2471ZM26.4194 13.8271H13.5801V17.2838H26.4187L26.4194 13.8271Z" fill="#F4F4F4"/>
+<mask id="mask0_139_6375" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="31">
+<path d="M0 0H39.9997V30.3706H0V0Z" fill="#A56EFF"/>
+</mask>
+<g mask="url(#mask0_139_6375)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4767 14.3113L26.4193 9.866L29.8107 20.6333C30.454 22.552 32.0753 24.434 34.8147 24.434C37.666 24.434 40 22.1067 40 19.2553C40 16.84 38.5147 15.226 36.4767 14.3113ZM14.1973 26.6667C15.222 28.85 17.442 30.3707 20.0133 30.3707C22.5867 30.3707 24.792 28.8527 25.816 26.6667H14.1973ZM25.816 10.8647C24.7907 8.68133 22.5713 7.16067 20 7.16067C17.4267 7.16067 15.2213 8.67867 14.1973 10.8647H25.816ZM0 19.2553C0 22.1067 2.334 24.434 5.18467 24.434C7.92333 24.434 9.54533 22.552 10.1887 20.6333L13.58 9.866L3.52267 14.3113C1.48467 15.226 0 16.84 0 19.2553ZM23.7087 0C22.0753 0 20.7513 1.32467 20.7513 2.95733C20.7513 4.59067 22.0753 5.91533 23.7087 5.91533C25.342 5.91533 26.6667 4.59067 26.6667 2.95733C26.6667 1.32467 25.342 0 23.7087 0ZM16.2907 0C14.6573 0 13.3333 1.32467 13.3333 2.95733C13.3333 4.59067 14.6573 5.91533 16.2907 5.91533C17.924 5.91533 19.248 4.59067 19.248 2.95733C19.248 1.32467 17.924 0 16.2907 0Z" fill="#A56EFF"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_139_6375">
+<rect width="40" height="30.6667" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/accessibility-checker-extension/src/assets/BE_for_Accessibility_darker.svg b/accessibility-checker-extension/src/assets/BE_for_LightMode.svg
similarity index 100%
rename from accessibility-checker-extension/src/assets/BE_for_Accessibility_darker.svg
rename to accessibility-checker-extension/src/assets/BE_for_LightMode.svg
diff --git a/accessibility-checker-extension/src/ts/docs/QuickGuideACApp.tsx b/accessibility-checker-extension/src/ts/docs/QuickGuideACApp.tsx
index 12c9f5dd7..2fa3bfc13 100644
--- a/accessibility-checker-extension/src/ts/docs/QuickGuideACApp.tsx
+++ b/accessibility-checker-extension/src/ts/docs/QuickGuideACApp.tsx
@@ -30,7 +30,6 @@ import { Link,
     UnorderedList, 
 } from "@carbon/react";
 import "./quickGuide.scss";
-import { BrowserDetection } from "../util/browserDetection";
 
 interface quickGuideACAppState { }
 
@@ -38,8 +37,10 @@ export class QuickGuideACApp extends React.Component<{}, quickGuideACAppState> {
     state: quickGuideACAppState = {};
 
     render() {
-        BrowserDetection.setDarkLight();
+        // BrowserDetection.setDarkLight();
+        
         let aside = (<>
+            
             <div style={{ marginTop: "1.5rem" }} />
             <OrderedList style={{ marginLeft: "1.5rem" }}>
                 <ListItem><Link href="#checker">Accessibility Checker</Link></ListItem>
@@ -57,9 +58,11 @@ export class QuickGuideACApp extends React.Component<{}, quickGuideACAppState> {
                     inline={true}
                     size="lg">user guide</Link>
             </p>
+            
         </>)
         return (
             <DocPage aside={aside} sm={4} md={8} lg={8}>
+                
                 <main
                     role="main"
                     aria-label="Quick guide details"
@@ -245,6 +248,7 @@ export class QuickGuideACApp extends React.Component<{}, quickGuideACAppState> {
                     </UnorderedList>
                     
                 </main>
+               
             </DocPage>
         );
     }
diff --git a/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx b/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx
index a6a13460e..237ad7392 100644
--- a/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx
+++ b/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 *****************************************************************************/
 
 import React from "react";
-import beeLogoUrl from "../../assets/BE_for_Accessibility_darker.svg";
+import beeLogoUrl from "../../assets/BE_for_DarkMode.svg";
 import violation from "../../assets/Violation16.svg";
 import needsReview from "../../assets/NeedsReview16.svg";
 import recommendation from "../../assets/Recommendation16.svg";
@@ -34,7 +34,7 @@ import upDown from "../../assets/up_down.svg";
 import { DocPage } from "./components/DocPage";
 import "./usingAC.scss";
 import { Link, ListItem, OrderedList, UnorderedList } from "@carbon/react";
-import { BrowserDetection } from "../util/browserDetection";
+// import { BrowserDetection } from "../util/browserDetection";
 
 interface UsingACAppState { }
 
@@ -42,7 +42,7 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
     state: UsingACAppState = {};
 
     render() {
-        BrowserDetection.setDarkLight();
+        // BrowserDetection.setDarkLight();
         let aside = (<>
             {/* <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}> */}
             <div style={{ marginTop: "1.5rem" }} />
diff --git a/accessibility-checker-extension/src/ts/docs/components/DocPage.scss b/accessibility-checker-extension/src/ts/docs/components/DocPage.scss
index d328ecb1c..11a4c9ee5 100644
--- a/accessibility-checker-extension/src/ts/docs/components/DocPage.scss
+++ b/accessibility-checker-extension/src/ts/docs/components/DocPage.scss
@@ -9,7 +9,7 @@ body {
 #pageapp-root {
     min-height: 100%;
     height: 100%;
-    color: $gray-90;
+    color: $gray-30;
     
     > .cds--css-grid {
         margin-left: 0rem;
@@ -51,7 +51,7 @@ body {
         }
         .op_version {
             @include type-style("label-01");
-            color: $gray-70;
+            color: $gray-30;
             margin-top: .5rem;
         }
         p {
diff --git a/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx b/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx
index 8c07f2175..c1b00e460 100644
--- a/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx
+++ b/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx
@@ -19,12 +19,14 @@ limitations under the License.
 import React from "react";
 import {
     Column,
-    Grid
+    Grid,
+    //Theme
 } from "@carbon/react";
 
 // import OptionUtil  from '../util/optionUtil';
-import beeLogoUrl from "../../../assets/BE_for_Accessibility_darker.svg";
+import beeLogoUrl from "../../../assets/BE_for_DarkMode.svg";
 import "./DocPage.scss";
+import { BrowserDetection } from "../../util/browserDetection";
 
 type ColDef = number | {
     span: number
@@ -55,8 +57,8 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
         }
 
         return (<>
-            <Grid>
-                <Column sm={4} md={8} lg={4} className="leftCol">
+            <Grid className={BrowserDetection.isDarkMode()?"cds--g100":"white"}>
+                <Column sm={4} md={8} lg={4} className={`leftCol ${BrowserDetection.isDarkMode()?"cds--g90":"cds--g10"}`}>
                     <div role="banner">
                         <img src={beeLogoUrl} alt="purple bee icon" className="icon" />
                         <div style={{marginTop:"2rem"}} />
diff --git a/accessibility-checker-extension/src/ts/docs/quickGuide.tsx b/accessibility-checker-extension/src/ts/docs/quickGuide.tsx
index 4abd49572..5ffe09e09 100644
--- a/accessibility-checker-extension/src/ts/docs/quickGuide.tsx
+++ b/accessibility-checker-extension/src/ts/docs/quickGuide.tsx
@@ -16,11 +16,14 @@
 
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import {  Theme } from "@carbon/react";
+// import {  Theme } from "@carbon/react";
 import { BrowserDetection } from "../util/browserDetection";
 import {QuickGuideACApp} from "./QuickGuideACApp";
 import "../styles/index.scss";
 
-ReactDOM.render(<Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}><QuickGuideACApp /></Theme>
-    , document.getElementById('pageapp-root'));
+let element = document.getElementById('pageapp-root');
+element?.setAttribute("class", BrowserDetection.isDarkMode()?"cds--g100":"white")
+
+ReactDOM.render(<QuickGuideACApp />
+    , element);
     
\ No newline at end of file
diff --git a/accessibility-checker-extension/src/ts/docs/usingAC.tsx b/accessibility-checker-extension/src/ts/docs/usingAC.tsx
index e1f31db27..e353a3d1b 100644
--- a/accessibility-checker-extension/src/ts/docs/usingAC.tsx
+++ b/accessibility-checker-extension/src/ts/docs/usingAC.tsx
@@ -16,17 +16,20 @@
 
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import {  Theme } from "@carbon/react";
+// import {  Theme } from "@carbon/react";
 import { BrowserDetection } from "../util/browserDetection";
 import "../styles/index.scss";
 import UsingACApp from './UsingACApp';
 
 class PageApp extends React.Component<{}, {}> {
     render() {
-        return <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}><UsingACApp /></Theme>
+        return <UsingACApp />
     }
 }
 
+let element = document.getElementById('pageapp-root');
+element?.setAttribute("class", BrowserDetection.isDarkMode()?"cds--g100":"white")
+
 ReactDOM.render(<PageApp />
-    , document.getElementById('pageapp-root'));
+    , element);
     
\ No newline at end of file

From 54c19196f7bdfa018043fe3fe21b3b0469cb834c Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Mon, 12 Jun 2023 14:15:40 -0500
Subject: [PATCH 07/23] Quick and User Guide

---
 .../src/ts/docs/components/DocPage.scss                         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/accessibility-checker-extension/src/ts/docs/components/DocPage.scss b/accessibility-checker-extension/src/ts/docs/components/DocPage.scss
index 11a4c9ee5..aeaa48cb4 100644
--- a/accessibility-checker-extension/src/ts/docs/components/DocPage.scss
+++ b/accessibility-checker-extension/src/ts/docs/components/DocPage.scss
@@ -8,7 +8,7 @@ body {
 }
 #pageapp-root {
     min-height: 100%;
-    height: 100%;
+    // height: 100%; // JCH remove for Dark Mode
     color: $gray-30;
     
     > .cds--css-grid {

From 251c7212ead6ed5cb98c4b8b21cde21345cda25b Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Mon, 12 Jun 2023 15:22:46 -0500
Subject: [PATCH 08/23] Store scans button color

---
 .../src/ts/devtools/components/scanSection.scss                  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss b/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
index f83dad18f..52a2b1e5e 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
@@ -11,6 +11,7 @@
 .scanSection {
     .cds--overflow-menu--sm {
         min-height: 2rem;
+        background-color: #6f6f6f;
     }
 
     .cds--btn {

From 2147b6fadf7c60c607b81a1b3cd026166edad074 Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Tue, 13 Jun 2023 09:44:38 -0500
Subject: [PATCH 09/23] separating lines right color and size

---
 .../src/ts/devtools/components/reportSection.scss          | 4 ++--
 .../src/ts/devtools/components/reportTreeGrid.scss         | 4 ++--
 .../src/ts/devtools/devToolsApp.scss                       | 7 +++++++
 .../src/ts/devtools/devToolsApp.tsx                        | 2 +-
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/accessibility-checker-extension/src/ts/devtools/components/reportSection.scss b/accessibility-checker-extension/src/ts/devtools/components/reportSection.scss
index 0b347e9e2..f24d3c04d 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/reportSection.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/reportSection.scss
@@ -16,7 +16,7 @@
 
 .reportSection {
     .reportSectionColumn {
-        border-top: solid $gray-20 1px;
+        border-top: solid $gray-40 1px;
     }
     margin-top: 1rem;
     .cds--tab-content {
@@ -58,7 +58,7 @@
 }
 
 .reportFilterBorder {
-    border-top: solid $gray-20 1px;    
+    border-top: solid $gray-40 1px;    
 }
 
 .reportFilterSection {
diff --git a/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.scss b/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.scss
index bd622115a..f36b0ba33 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.scss
@@ -23,8 +23,8 @@
         @include type-style('label-01');
         > div { // column
             > div { // cell
-                border-top: solid var(--cds-background) var(--border-width);
-                border-bottom: solid $gray-30 var(--border-width);
+                border-top: solid $gray-40 var(--border-width);
+                border-bottom: solid $gray-40 var(--border-width);
                 margin: 0rem -1rem;
                 padding: 0.5rem 0rem .5rem 1rem;
                 height: 100%;
diff --git a/accessibility-checker-extension/src/ts/devtools/devToolsApp.scss b/accessibility-checker-extension/src/ts/devtools/devToolsApp.scss
index 64c42dc48..61009b207 100644
--- a/accessibility-checker-extension/src/ts/devtools/devToolsApp.scss
+++ b/accessibility-checker-extension/src/ts/devtools/devToolsApp.scss
@@ -12,6 +12,13 @@ body {
     .primaryColumn {
         background-color: var(--cds-background);
     }
+
+    // .primaryPanelColumn {
+        
+    //     border-right: solid $gray-40 2px;
+       
+    // }
+
     .secondaryColumn {
         // background-color: $gray-10;
         .cds--subgrid {
diff --git a/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx b/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx
index 1128de822..fa6930aad 100644
--- a/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx
@@ -94,7 +94,7 @@ export class DevToolsApp extends React.Component<DevToolsAppProps, DevToolsAppSt
         </>;
 
         return <Grid fullWidth={true} narrow={true} className="primaryColumn" style={{padding: "0rem", minHeight: "100%", maxHeight: "100%", height: "100%"}}>
-                <Column sm={4} md={8} lg={8} style={{margin: "0rem", minHeight: "100%", maxHeight: "100%", height: "100%" }}>
+                <Column className="primaryPanelColumn" sm={4} md={8} lg={8} style={{margin: "0rem", minHeight: "100%", maxHeight: "100%", height: "100%" }}>
                     <div style={{ width: "calc(100% - 1rem", minHeight: "100%", maxHeight: "100%", height: "100%" }}>
                         {primaryPanel}
                     </div>

From debe0d5a48c5b23fad95febe8e5789f5aae1a612 Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Tue, 13 Jun 2023 14:50:12 -0500
Subject: [PATCH 10/23] background issues

---
 .../src/html/darkMode.js                      | 18 --------------
 .../devtools/components/kcmOverviewScreen.tsx |  2 +-
 .../devtools/components/reportTreeGrid.scss   |  2 +-
 .../ts/devtools/components/summaryScreen.scss |  2 +-
 .../ts/devtools/components/summaryScreen.tsx  |  7 +++---
 .../src/ts/devtools/devToolsApp.scss          |  1 -
 .../src/ts/devtools/devToolsApp.tsx           | 24 ++++++++++++-------
 .../src/ts/options/index.tsx                  |  2 +-
 .../src/ts/util/browserDetection.ts           |  4 ++--
 9 files changed, 26 insertions(+), 36 deletions(-)
 delete mode 100644 accessibility-checker-extension/src/html/darkMode.js

diff --git a/accessibility-checker-extension/src/html/darkMode.js b/accessibility-checker-extension/src/html/darkMode.js
deleted file mode 100644
index 6f81fa2a6..000000000
--- a/accessibility-checker-extension/src/html/darkMode.js
+++ /dev/null
@@ -1,18 +0,0 @@
-function darkMode() {
-        // Check to see if Media-Queries are supported
-    if (window.matchMedia) {
-    // Check if the dark-mode Media-Query matches
-    if(window.matchMedia('(prefers-color-scheme: dark)').matches){
-        // Dark g90
-        console.log("change body element to class = g90");
-        body.setAttribute("class", "cds--g90");
-    } else {
-        // Light g10
-        console.log("change body element to class = g10");
-        body.setAttribute("class", "cds--g10");
-    }
-    } else {
-    // Default (when Media-Queries are not supported)
-    console.log("watch.media not supported")
-    }
-}
\ No newline at end of file
diff --git a/accessibility-checker-extension/src/ts/devtools/components/kcmOverviewScreen.tsx b/accessibility-checker-extension/src/ts/devtools/components/kcmOverviewScreen.tsx
index e33cc7218..e1aa1ddeb 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/kcmOverviewScreen.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/kcmOverviewScreen.tsx
@@ -132,7 +132,7 @@ export default class KCMOverviewScreen extends React.Component<IKCMOverviewScree
                     </div>
                     <div style={{clear: "both", marginTop: "1rem"}} />
                     <div className="iconText">
-                        <Theme theme="g90" className="iconBox">
+                        <Theme theme="g100" className="iconBox">
                             <KeyboardOff size={16} />
                         </Theme>
                         Click on the keyboard icon to return to the regular view.
diff --git a/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.scss b/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.scss
index f36b0ba33..4c290c127 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.scss
@@ -47,7 +47,7 @@
     .gridBody.selectedNode {
         > div { // column
             > div {
-                // background-color: var(--selected-node-background); // JCH remove for Dark Mode
+                background-color: var(--selected-node-background);
                 border-top: solid var(--selected-node-border-color) var(--border-width);
                 border-bottom: solid var(--selected-node-border-color) var(--border-width);
             }
diff --git a/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.scss b/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.scss
index a48ad7106..c7518158a 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.scss
@@ -11,7 +11,7 @@
 
     .summaryTitle {
         @include type-style('productive-heading-02');
-        color: #171717;
+        // color: #171717; // JCH remove for Dark Mode
     }
 
     .summaryTitleDetail {
diff --git a/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.tsx b/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.tsx
index 49e62cf8e..9b786ee74 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.tsx
@@ -16,12 +16,13 @@
 
 import React from "react";
 
-import { Column, Grid, Tile } from '@carbon/react';
+import { Column, Grid, Tile, } from '@carbon/react';
 import Violation16 from "../../../assets/Violation16.svg";
 import NeedsReview16 from "../../../assets/NeedsReview16.svg";
 import Recommendation16 from "../../../assets/Recommendation16.svg";
 import { IReport, IStoredReportMeta } from "../../interfaces/interfaces";
 import { getDevtoolsController } from "../devtoolsController";
+import { BrowserDetection } from '../../util/browserDetection';
 import "./summaryScreen.scss";
 
 interface ISummaryScreenState {
@@ -80,7 +81,7 @@ export default class SummaryScreen extends React.Component<ISummaryScreenProps,
         // Calculate score
         let currentStatus = (100 - ((failUniqueElements.length / testedElements) * 100)).toFixed(0);
 
-        return <aside className="reportSummary" aria-labelledby="summaryTitle">
+        return <aside className={`reportSummary ${BrowserDetection.isDarkMode()?"cds--g90":"cds--g10"}`} aria-labelledby="summaryTitle">
             <div style={{ margin: "1rem -1rem 0rem 0rem" }}>
                 <Grid style={{margin: "0rem"}}>
                     <Column sm={{ span: 4 }} md={{ span: 6 }} lg={{ span: 6 }}>
@@ -134,6 +135,6 @@ export default class SummaryScreen extends React.Component<ISummaryScreenProps,
                     </Column>
                 </Grid>
             </div>
-        </aside>;
+        </aside>
     }
 }
\ No newline at end of file
diff --git a/accessibility-checker-extension/src/ts/devtools/devToolsApp.scss b/accessibility-checker-extension/src/ts/devtools/devToolsApp.scss
index 61009b207..4b7b77bc7 100644
--- a/accessibility-checker-extension/src/ts/devtools/devToolsApp.scss
+++ b/accessibility-checker-extension/src/ts/devtools/devToolsApp.scss
@@ -47,5 +47,4 @@ body {
             }
         }
     }
-
 }
diff --git a/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx b/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx
index fa6930aad..8d43cccb5 100644
--- a/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx
@@ -28,7 +28,8 @@ import {
     ComposedModal,
     Grid,
     ModalBody,
-    ModalHeader
+    ModalHeader,
+    Theme
 } from "@carbon/react";
 
 import "../styles/index.scss";
@@ -71,7 +72,7 @@ export class DevToolsApp extends React.Component<DevToolsAppProps, DevToolsAppSt
     }
 
     render() {
-        BrowserDetection.setDarkLight();
+        
         let primaryPanel = <div style={{display: "flex", flexFlow: "column", height: "100%"}}>
             <HeaderSection />
             <ScanSection />
@@ -93,20 +94,24 @@ export class DevToolsApp extends React.Component<DevToolsAppProps, DevToolsAppSt
             {this.state.secondaryView === "kcm_overview" && <KCMOverviewScreen /> }
         </>;
 
-        return <Grid fullWidth={true} narrow={true} className="primaryColumn" style={{padding: "0rem", minHeight: "100%", maxHeight: "100%", height: "100%"}}>
+        return <Theme theme={BrowserDetection.isDarkMode()?"g100":"white"} style={{padding: "0rem", minHeight: "100%", maxHeight: "100%", height: "100%"}}>
+        <Grid fullWidth={true} narrow={true} className="primaryColumn" style={{padding: "0rem", minHeight: "100%", maxHeight: "100%", height: "100%"}}>
+                
                 <Column className="primaryPanelColumn" sm={4} md={8} lg={8} style={{margin: "0rem", minHeight: "100%", maxHeight: "100%", height: "100%" }}>
                     <div style={{ width: "calc(100% - 1rem", minHeight: "100%", maxHeight: "100%", height: "100%" }}>
                         {primaryPanel}
                     </div>
                 </Column>
-                    <Column sm={0} md={0} lg={8} className="secondaryColumn" style={{margin: "0rem", overflowY: "auto", maxHeight: "100%" }}>
-                            {secondaryPanel}
-                    </Column>
+                    
+                <Column sm={0} md={0} lg={8} className={`secondaryColumn ${BrowserDetection.isDarkMode()?"cds--g90":"cds--g10"}`} style={{margin: "0rem", overflowY: "auto", maxHeight: "100%" }}>
+                        {secondaryPanel}
+                </Column>
             </Grid>
             {typeof document === 'undefined'
                 ? null
                 : ReactDOM.createPortal(
-                    <div className="secondaryDialog">
+                    
+                    <div className={`secondaryDialog ${BrowserDetection.isDarkMode()?"cds--g90":"cds--g10"}`}>
                         <ComposedModal 
                             open={this.state.secondaryOpen} 
                             onClose={() => {
@@ -120,7 +125,7 @@ export class DevToolsApp extends React.Component<DevToolsAppProps, DevToolsAppSt
                             { Config.SECONDARY_MODAL && <ModalHeader /> }
                             { !Config.SECONDARY_MODAL && <>
                                 <div style={{
-                                    // backgroundColor: "white",
+                                    backgroundColor: "#262626",
                                     padding: "1rem"
                                 }}>
                                     <Button 
@@ -140,5 +145,8 @@ export class DevToolsApp extends React.Component<DevToolsAppProps, DevToolsAppSt
                     document.body
                 )
             }
+        </Theme>   
     }
+    
+    
 }
diff --git a/accessibility-checker-extension/src/ts/options/index.tsx b/accessibility-checker-extension/src/ts/options/index.tsx
index a146eae46..b10d9dff3 100644
--- a/accessibility-checker-extension/src/ts/options/index.tsx
+++ b/accessibility-checker-extension/src/ts/options/index.tsx
@@ -23,7 +23,7 @@ import { OptionsApp } from './OptionsApp';
 
 class PageApp extends React.Component<{}, {}> {
     render() {
-        return <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}>
+        return <Theme theme={BrowserDetection.isDarkMode()?"g100":"white"}>
                     <OptionsApp />
                 </Theme>
     }
diff --git a/accessibility-checker-extension/src/ts/util/browserDetection.ts b/accessibility-checker-extension/src/ts/util/browserDetection.ts
index af58b7466..da6d5d82f 100644
--- a/accessibility-checker-extension/src/ts/util/browserDetection.ts
+++ b/accessibility-checker-extension/src/ts/util/browserDetection.ts
@@ -36,9 +36,9 @@ export class BrowserDetection {
     public static setDarkLight() {
         if (typeof document !== "undefined" && typeof document.body !== "undefined") {
             if (BrowserDetection.isDarkMode()) {
-                document.body.setAttribute("class", "cds--g90");
+                document.body.setAttribute("class", "cds--g100");
             } else {
-                document.body.setAttribute("class", "cds--g10");
+                document.body.setAttribute("class", "white");
             }
         }
     }

From 96d5d793fd012510e0963cff7281da98340f6746 Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Tue, 13 Jun 2023 15:58:43 -0500
Subject: [PATCH 11/23] more background fixes

---
 .../src/ts/devtools/components/splashScreen.scss  |  2 +-
 .../src/ts/devtools/components/storedScreen.scss  |  3 ++-
 .../src/ts/devtools/components/storedScreen.tsx   |  3 ++-
 .../src/ts/devtools/components/summaryScreen.scss | 15 ++++++++++++++-
 .../src/ts/devtools/devToolsApp.tsx               |  9 +++++----
 5 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/accessibility-checker-extension/src/ts/devtools/components/splashScreen.scss b/accessibility-checker-extension/src/ts/devtools/components/splashScreen.scss
index 42d1fb850..10f62b591 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/splashScreen.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/splashScreen.scss
@@ -16,7 +16,7 @@
 
     .version {
         @include type-style("label-01");
-        color: $gray-70;
+        color: $gray-30;
         margin-top: .5rem;
     }
 
diff --git a/accessibility-checker-extension/src/ts/devtools/components/storedScreen.scss b/accessibility-checker-extension/src/ts/devtools/components/storedScreen.scss
index 1520e8495..203e73973 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/storedScreen.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/storedScreen.scss
@@ -5,7 +5,8 @@
 .storedScreen {
     margin: 0rem;
     padding: 1rem 0rem;
-
+    min-height: 100%;
+    
     h2 {
         @include type-style("heading-03");
     }
diff --git a/accessibility-checker-extension/src/ts/devtools/components/storedScreen.tsx b/accessibility-checker-extension/src/ts/devtools/components/storedScreen.tsx
index eae00b23c..053b508bc 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/storedScreen.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/storedScreen.tsx
@@ -31,6 +31,7 @@ import {
 
 import { IStoredReportMeta } from "../../interfaces/interfaces";
 import { getDevtoolsController } from "../devtoolsController";
+import { BrowserDetection } from '../../util/browserDetection';
 import "./storedScreen.scss";
 import { BasicTable } from "./BasicTable";
 
@@ -66,7 +67,7 @@ export default class StoredScreen extends React.Component<IStoredScreenProps, IS
     render() {
         let detailRow = typeof this.state.detailSelectedRow !== "undefined" && this.state.storedReports[this.state.detailSelectedRow] || undefined;
         return (
-            <Grid className="storedScreen">
+            <Grid className={`storedScreen ${BrowserDetection.isDarkMode()?"cds--g90":"cds--g10"}`}>
                 <Column sm={{span: 4}} md={{span: 8}} lg={{span: 8}}>
                     <h2>Stored scans</h2>
                     <div style={{marginTop: "1rem"}} />
diff --git a/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.scss b/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.scss
index c7518158a..2ff0dc607 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.scss
@@ -63,14 +63,27 @@
         height: 10rem;
     }
 
+    &.cds--g10 {
+        .status-score-tile {
+            background-color: #BE95FF; // purple / 40
+        }
+    }
+
+    &.cds--g90 {
+        .status-score-tile {
+            background-color: #31135E; // purple / 90
+        }
+    }
+
     .status-score-tile {
         box-sizing: border-box;
         border: solid #8A3FFC 1px;
-        // background-color: #E8DAFF; // JCH remove for Dark Mode
         margin-top: 18px;
         height: 10rem;
     }
 
+    
+
     .count-tile {
         box-sizing: border-box; // JCH remove for Dark Mode
         // background-color: #FFFFFF;
diff --git a/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx b/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx
index 8d43cccb5..732e82968 100644
--- a/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/devToolsApp.tsx
@@ -124,10 +124,11 @@ export class DevToolsApp extends React.Component<DevToolsAppProps, DevToolsAppSt
                         >
                             { Config.SECONDARY_MODAL && <ModalHeader /> }
                             { !Config.SECONDARY_MODAL && <>
-                                <div style={{
-                                    backgroundColor: "#262626",
-                                    padding: "1rem"
-                                }}>
+                                <div 
+                                    className={`${BrowserDetection.isDarkMode()?"cds--g90":"cds--g10"}`}
+                                    style={{
+                                        padding: "1rem"
+                                    }}>
                                     <Button 
                                         id="backToListViewButton"
                                         size="sm"

From 90950fccb905a6e0aa696ef1c24cef3879244744 Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Wed, 14 Jun 2023 13:37:06 -0500
Subject: [PATCH 12/23] Fix more backgrounds

---
 .../src/ts/docs/UsingACApp.tsx                         |  4 ----
 .../src/ts/docs/components/DocPage.scss                |  3 +--
 .../src/ts/docs/components/DocPage.tsx                 |  6 +++---
 .../src/ts/docs/quickGuide.tsx                         |  2 +-
 .../src/ts/docs/usingAC.tsx                            |  2 +-
 .../src/ts/options/OptionsApp.tsx                      |  4 ++--
 .../src/ts/options/index.tsx                           | 10 +++++-----
 7 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx b/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx
index 237ad7392..aed323827 100644
--- a/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx
+++ b/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx
@@ -34,7 +34,6 @@ import upDown from "../../assets/up_down.svg";
 import { DocPage } from "./components/DocPage";
 import "./usingAC.scss";
 import { Link, ListItem, OrderedList, UnorderedList } from "@carbon/react";
-// import { BrowserDetection } from "../util/browserDetection";
 
 interface UsingACAppState { }
 
@@ -42,9 +41,7 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
     state: UsingACAppState = {};
 
     render() {
-        // BrowserDetection.setDarkLight();
         let aside = (<>
-            {/* <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}> */}
             <div style={{ marginTop: "1.5rem" }} />
             <OrderedList>
                 <ListItem><Link href="#install">How to install</Link></ListItem>
@@ -73,7 +70,6 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
         return (
             
             <DocPage aside={aside} sm={4} md={8} lg={8}>
-            {/* <Theme theme={BrowserDetection.isDarkMode()?"g90":"g10"}> */}
             <main
                 aria-label="User guide details"
             >
diff --git a/accessibility-checker-extension/src/ts/docs/components/DocPage.scss b/accessibility-checker-extension/src/ts/docs/components/DocPage.scss
index aeaa48cb4..b1a702ae5 100644
--- a/accessibility-checker-extension/src/ts/docs/components/DocPage.scss
+++ b/accessibility-checker-extension/src/ts/docs/components/DocPage.scss
@@ -8,7 +8,7 @@ body {
 }
 #pageapp-root {
     min-height: 100%;
-    // height: 100%; // JCH remove for Dark Mode
+    height: 100%;
     color: $gray-30;
     
     > .cds--css-grid {
@@ -21,7 +21,6 @@ body {
         }
     }
     .leftCol {
-        // background-color: $gray-10; // JCH remove for Dark Mode
         padding-right: var(--cds-grid-gutter-end);
         padding-left: var(--cds-grid-gutter-start);
         margin-left: 0rem;
diff --git a/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx b/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx
index c1b00e460..c49c8e265 100644
--- a/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx
+++ b/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx
@@ -57,8 +57,8 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
         }
 
         return (<>
-            <Grid className={BrowserDetection.isDarkMode()?"cds--g100":"white"}>
-                <Column sm={4} md={8} lg={4} className={`leftCol ${BrowserDetection.isDarkMode()?"cds--g90":"cds--g10"}`}>
+            <Grid className={BrowserDetection.isDarkMode()?"cds--g90":"g10"}>
+                <Column sm={4} md={8} lg={4} className={`leftCol ${BrowserDetection.isDarkMode()?"cds--g100":"white"}`}>
                     <div role="banner">
                         <img src={beeLogoUrl} alt="purple bee icon" className="icon" />
                         <div style={{marginTop:"2rem"}} />
@@ -79,7 +79,7 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
                 </Column>
                 <Column sm={0} md={0} lg={1}>
                 </Column>
-                <Column sm={this.props.sm} md={this.props.md} lg={this.props.lg} className="rightCol">
+                <Column sm={this.props.sm} md={this.props.md} lg={this.props.lg} className={`rightCol ${BrowserDetection.isDarkMode()?"cds--g90":"cds--g10"}`}>
                     {this.props.children}
                 </Column>
             </Grid>
diff --git a/accessibility-checker-extension/src/ts/docs/quickGuide.tsx b/accessibility-checker-extension/src/ts/docs/quickGuide.tsx
index 5ffe09e09..9a9e092ae 100644
--- a/accessibility-checker-extension/src/ts/docs/quickGuide.tsx
+++ b/accessibility-checker-extension/src/ts/docs/quickGuide.tsx
@@ -22,7 +22,7 @@ import {QuickGuideACApp} from "./QuickGuideACApp";
 import "../styles/index.scss";
 
 let element = document.getElementById('pageapp-root');
-element?.setAttribute("class", BrowserDetection.isDarkMode()?"cds--g100":"white")
+element?.setAttribute("class", BrowserDetection.isDarkMode()?"cds--g90":"g10")
 
 ReactDOM.render(<QuickGuideACApp />
     , element);
diff --git a/accessibility-checker-extension/src/ts/docs/usingAC.tsx b/accessibility-checker-extension/src/ts/docs/usingAC.tsx
index e353a3d1b..da3272c1f 100644
--- a/accessibility-checker-extension/src/ts/docs/usingAC.tsx
+++ b/accessibility-checker-extension/src/ts/docs/usingAC.tsx
@@ -28,7 +28,7 @@ class PageApp extends React.Component<{}, {}> {
 }
 
 let element = document.getElementById('pageapp-root');
-element?.setAttribute("class", BrowserDetection.isDarkMode()?"cds--g100":"white")
+element?.setAttribute("class", BrowserDetection.isDarkMode()?"cds--g90":"cds--g10")
 
 ReactDOM.render(<PageApp />
     , element);
diff --git a/accessibility-checker-extension/src/ts/options/OptionsApp.tsx b/accessibility-checker-extension/src/ts/options/OptionsApp.tsx
index a1fcb7de6..292eb0b9a 100644
--- a/accessibility-checker-extension/src/ts/options/OptionsApp.tsx
+++ b/accessibility-checker-extension/src/ts/options/OptionsApp.tsx
@@ -21,7 +21,7 @@ import React from "react";
 import { IArchiveDefinition, IPolicyDefinition, ISettings } from "../interfaces/interfaces";
 import { getBGController } from "../background/backgroundController";
 import { DocPage } from "../docs/components/DocPage";
-import { BrowserDetection } from "../util/browserDetection";
+// import { BrowserDetection } from "../util/browserDetection";
 
 import {
     Button,
@@ -278,7 +278,7 @@ export class OptionsApp extends React.Component<{}, OptionsAppState> {
     };
 
     render() {
-        BrowserDetection.setDarkLight();
+        // BrowserDetection.setDarkLight();
         let {
             archives,
             selected_archive,
diff --git a/accessibility-checker-extension/src/ts/options/index.tsx b/accessibility-checker-extension/src/ts/options/index.tsx
index b10d9dff3..a04f92dc5 100644
--- a/accessibility-checker-extension/src/ts/options/index.tsx
+++ b/accessibility-checker-extension/src/ts/options/index.tsx
@@ -16,19 +16,19 @@
 
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import {  Theme } from "@carbon/react";
 import { BrowserDetection } from "../util/browserDetection";
 import "../styles/index.scss";
 import { OptionsApp } from './OptionsApp';
 
 class PageApp extends React.Component<{}, {}> {
     render() {
-        return <Theme theme={BrowserDetection.isDarkMode()?"g100":"white"}>
-                    <OptionsApp />
-                </Theme>
+        return <OptionsApp />
     }
 }
 
+let element = document.getElementById('pageapp-root');
+element?.setAttribute("class", BrowserDetection.isDarkMode()?"cds--g90":"cds--g10")
+
 ReactDOM.render(<PageApp />
-    , document.getElementById('pageapp-root'));
+    , element);
     
\ No newline at end of file

From 9073bd67609f2eca21a5811a328fa77077e5195b Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Thu, 15 Jun 2023 11:25:01 -0500
Subject: [PATCH 13/23] Better Bee

---
 accessibility-checker-extension/src/assets/Mask group.svg | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 accessibility-checker-extension/src/assets/Mask group.svg

diff --git a/accessibility-checker-extension/src/assets/Mask group.svg b/accessibility-checker-extension/src/assets/Mask group.svg
new file mode 100644
index 000000000..f9ea1d25d
--- /dev/null
+++ b/accessibility-checker-extension/src/assets/Mask group.svg	
@@ -0,0 +1,8 @@
+E<svg width="40" height="31" viewBox="0 0 40 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_139_6382" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="31">
+<path d="M0 0H39.9997V30.3706H0V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_139_6382)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4767 14.3113L26.4193 9.866L29.8107 20.6333C30.454 22.552 32.0753 24.434 34.8147 24.434C37.666 24.434 40 22.1067 40 19.2553C40 16.84 38.5147 15.226 36.4767 14.3113ZM14.1973 26.6667C15.222 28.85 17.442 30.3707 20.0133 30.3707C22.5867 30.3707 24.792 28.8527 25.816 26.6667H14.1973ZM25.816 10.8647C24.7907 8.68133 22.5713 7.16067 20 7.16067C17.4267 7.16067 15.2213 8.67867 14.1973 10.8647H25.816ZM0 19.2553C0 22.1067 2.334 24.434 5.18467 24.434C7.92333 24.434 9.54533 22.552 10.1887 20.6333L13.58 9.866L3.52267 14.3113C1.48467 15.226 0 16.84 0 19.2553ZM23.7087 0C22.0753 0 20.7513 1.32467 20.7513 2.95733C20.7513 4.59067 22.0753 5.91533 23.7087 5.91533C25.342 5.91533 26.6667 4.59067 26.6667 2.95733C26.6667 1.32467 25.342 0 23.7087 0ZM16.2907 0C14.6573 0 13.3333 1.32467 13.3333 2.95733C13.3333 4.59067 14.6573 5.91533 16.2907 5.91533C17.924 5.91533 19.248 4.59067 19.248 2.95733C19.248 1.32467 17.924 0 16.2907 0Z" fill="#A56EFF"/>
+</g>
+</svg>

From 70984ebfb8ea21f3c87f379f0643ee477b8dd844 Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Thu, 15 Jun 2023 11:25:18 -0500
Subject: [PATCH 14/23] Better Bee

---
 .../src/assets/Mask group2.svg                |  9 +++++++
 .../src/assets/bee 3 (2).svg                  | 24 +++++++++++++++++++
 .../src/assets/bee 3.svg                      | 16 +++++++++++++
 .../src/ts/docs/UsingACApp.tsx                |  2 +-
 .../src/ts/docs/components/DocPage.tsx        |  2 +-
 .../src/ts/popup/PopupApp.tsx                 |  2 +-
 6 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 accessibility-checker-extension/src/assets/Mask group2.svg
 create mode 100644 accessibility-checker-extension/src/assets/bee 3 (2).svg
 create mode 100644 accessibility-checker-extension/src/assets/bee 3.svg

diff --git a/accessibility-checker-extension/src/assets/Mask group2.svg b/accessibility-checker-extension/src/assets/Mask group2.svg
new file mode 100644
index 000000000..6c9689b2f
--- /dev/null
+++ b/accessibility-checker-extension/src/assets/Mask group2.svg	
@@ -0,0 +1,9 @@
+<svg width="40" height="31" viewBox="0 0 40 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.4199 20.2471H13.5806V23.7038H26.4192L26.4199 20.2471ZM26.4199 13.8271H13.5806V17.2838H26.4192L26.4199 13.8271Z" fill="#F4F4F4"/>
+<mask id="mask0_216_6406" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="31">
+<path d="M0 0H39.9997V30.3706H0V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_216_6406)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4767 14.3113L26.4193 9.866L29.8107 20.6333C30.454 22.552 32.0753 24.434 34.8147 24.434C37.666 24.434 40 22.1067 40 19.2553C40 16.84 38.5147 15.226 36.4767 14.3113ZM14.1973 26.6667C15.222 28.85 17.442 30.3707 20.0133 30.3707C22.5867 30.3707 24.792 28.8527 25.816 26.6667H14.1973ZM25.816 10.8647C24.7907 8.68133 22.5713 7.16067 20 7.16067C17.4267 7.16067 15.2213 8.67867 14.1973 10.8647H25.816ZM0 19.2553C0 22.1067 2.334 24.434 5.18467 24.434C7.92333 24.434 9.54533 22.552 10.1887 20.6333L13.58 9.866L3.52267 14.3113C1.48467 15.226 0 16.84 0 19.2553ZM23.7087 0C22.0753 0 20.7513 1.32467 20.7513 2.95733C20.7513 4.59067 22.0753 5.91533 23.7087 5.91533C25.342 5.91533 26.6667 4.59067 26.6667 2.95733C26.6667 1.32467 25.342 0 23.7087 0ZM16.2907 0C14.6573 0 13.3333 1.32467 13.3333 2.95733C13.3333 4.59067 14.6573 5.91533 16.2907 5.91533C17.924 5.91533 19.248 4.59067 19.248 2.95733C19.248 1.32467 17.924 0 16.2907 0Z" fill="#A56EFF"/>
+</g>
+</svg>
diff --git a/accessibility-checker-extension/src/assets/bee 3 (2).svg b/accessibility-checker-extension/src/assets/bee 3 (2).svg
new file mode 100644
index 000000000..f3000af4e
--- /dev/null
+++ b/accessibility-checker-extension/src/assets/bee 3 (2).svg	
@@ -0,0 +1,24 @@
+<svg width="40" height="31" viewBox="0 0 40 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="31" fill="#1E1E1E"/>
+<g clip-path="url(#clip0_0_1)">
+<rect width="1312" height="17207" transform="translate(-32 -32)" fill="#262626"/>
+<rect x="-32" y="-32" width="336" height="19061" fill="#161616"/>
+<g clip-path="url(#clip1_0_1)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.4194 20.2471H13.5801V23.7038H26.4187L26.4194 20.2471ZM26.4194 13.8271H13.5801V17.2838H26.4187L26.4194 13.8271Z" fill="#F4F4F4"/>
+<mask id="mask0_0_1" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="31">
+<path d="M0 0H39.9997V30.3706H0V0Z" fill="#A56EFF"/>
+</mask>
+<g mask="url(#mask0_0_1)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4767 14.3113L26.4193 9.866L29.8107 20.6333C30.454 22.552 32.0753 24.434 34.8147 24.434C37.666 24.434 40 22.1067 40 19.2553C40 16.84 38.5147 15.226 36.4767 14.3113ZM14.1973 26.6667C15.222 28.85 17.442 30.3707 20.0133 30.3707C22.5867 30.3707 24.792 28.8527 25.816 26.6667H14.1973ZM25.816 10.8647C24.7907 8.68133 22.5713 7.16067 20 7.16067C17.4267 7.16067 15.2213 8.67867 14.1973 10.8647H25.816ZM0 19.2553C0 22.1067 2.334 24.434 5.18467 24.434C7.92333 24.434 9.54533 22.552 10.1887 20.6333L13.58 9.866L3.52267 14.3113C1.48467 15.226 0 16.84 0 19.2553ZM23.7087 0C22.0753 0 20.7513 1.32467 20.7513 2.95733C20.7513 4.59067 22.0753 5.91533 23.7087 5.91533C25.342 5.91533 26.6667 4.59067 26.6667 2.95733C26.6667 1.32467 25.342 0 23.7087 0ZM16.2907 0C14.6573 0 13.3333 1.32467 13.3333 2.95733C13.3333 4.59067 14.6573 5.91533 16.2907 5.91533C17.924 5.91533 19.248 4.59067 19.248 2.95733C19.248 1.32467 17.924 0 16.2907 0Z" fill="#A56EFF"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_0_1">
+<rect width="1312" height="17207" fill="white" transform="translate(-32 -32)"/>
+</clipPath>
+<clipPath id="clip1_0_1">
+<rect width="40" height="30.6667" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/accessibility-checker-extension/src/assets/bee 3.svg b/accessibility-checker-extension/src/assets/bee 3.svg
new file mode 100644
index 000000000..3b9140249
--- /dev/null
+++ b/accessibility-checker-extension/src/assets/bee 3.svg	
@@ -0,0 +1,16 @@
+<svg width="40" height="31" viewBox="0 0 40 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_139_6375)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.4194 20.2471H13.5801V23.7038H26.4187L26.4194 20.2471ZM26.4194 13.8271H13.5801V17.2838H26.4187L26.4194 13.8271Z" fill="#F4F4F4"/>
+<mask id="mask0_139_6375" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="31">
+<path d="M0 0H39.9997V30.3706H0V0Z" fill="#A56EFF"/>
+</mask>
+<g mask="url(#mask0_139_6375)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4767 14.3113L26.4193 9.866L29.8107 20.6333C30.454 22.552 32.0753 24.434 34.8147 24.434C37.666 24.434 40 22.1067 40 19.2553C40 16.84 38.5147 15.226 36.4767 14.3113ZM14.1973 26.6667C15.222 28.85 17.442 30.3707 20.0133 30.3707C22.5867 30.3707 24.792 28.8527 25.816 26.6667H14.1973ZM25.816 10.8647C24.7907 8.68133 22.5713 7.16067 20 7.16067C17.4267 7.16067 15.2213 8.67867 14.1973 10.8647H25.816ZM0 19.2553C0 22.1067 2.334 24.434 5.18467 24.434C7.92333 24.434 9.54533 22.552 10.1887 20.6333L13.58 9.866L3.52267 14.3113C1.48467 15.226 0 16.84 0 19.2553ZM23.7087 0C22.0753 0 20.7513 1.32467 20.7513 2.95733C20.7513 4.59067 22.0753 5.91533 23.7087 5.91533C25.342 5.91533 26.6667 4.59067 26.6667 2.95733C26.6667 1.32467 25.342 0 23.7087 0ZM16.2907 0C14.6573 0 13.3333 1.32467 13.3333 2.95733C13.3333 4.59067 14.6573 5.91533 16.2907 5.91533C17.924 5.91533 19.248 4.59067 19.248 2.95733C19.248 1.32467 17.924 0 16.2907 0Z" fill="#A56EFF"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_139_6375">
+<rect width="40" height="30.6667" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx b/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx
index aed323827..282a44321 100644
--- a/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx
+++ b/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 *****************************************************************************/
 
 import React from "react";
-import beeLogoUrl from "../../assets/BE_for_DarkMode.svg";
+import beeLogoUrl from "../../assets/Mask group2.svg";
 import violation from "../../assets/Violation16.svg";
 import needsReview from "../../assets/NeedsReview16.svg";
 import recommendation from "../../assets/Recommendation16.svg";
diff --git a/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx b/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx
index c49c8e265..a4f7fe21f 100644
--- a/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx
+++ b/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx
@@ -24,7 +24,7 @@ import {
 } from "@carbon/react";
 
 // import OptionUtil  from '../util/optionUtil';
-import beeLogoUrl from "../../../assets/BE_for_DarkMode.svg";
+import beeLogoUrl from "../../../assets/Mask group2.svg";
 import "./DocPage.scss";
 import { BrowserDetection } from "../../util/browserDetection";
 
diff --git a/accessibility-checker-extension/src/ts/popup/PopupApp.tsx b/accessibility-checker-extension/src/ts/popup/PopupApp.tsx
index 5a6ac39ec..8fcfd125a 100644
--- a/accessibility-checker-extension/src/ts/popup/PopupApp.tsx
+++ b/accessibility-checker-extension/src/ts/popup/PopupApp.tsx
@@ -19,7 +19,7 @@
     import { Column, Link, Grid } from "@carbon/react";
     import "./popup.scss";
     
-    const purple_bee = "/assets/Bee_Logo@64px.png";
+    const purple_bee = "/assets/Mask group2";
     const checker_chrome = "/assets/img/Chrome_Checker.png";
     const checker_firefox = "/assets/img/Firefox_Checker.png";
     const assessment_chrome = "/assets/img/Chrome_Assessment.png";

From 15a4e1a758f4a82132931f4f8010319db0b9ea12 Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Thu, 15 Jun 2023 12:38:16 -0500
Subject: [PATCH 15/23] backgrounds on guides and options

---
 .../src/ts/docs/components/DocPage.scss                       | 2 --
 .../src/ts/docs/components/DocPage.tsx                        | 4 ++--
 accessibility-checker-extension/src/ts/docs/quickGuide.tsx    | 2 +-
 accessibility-checker-extension/src/ts/docs/usingAC.tsx       | 2 +-
 accessibility-checker-extension/src/ts/options/index.tsx      | 2 +-
 5 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/accessibility-checker-extension/src/ts/docs/components/DocPage.scss b/accessibility-checker-extension/src/ts/docs/components/DocPage.scss
index b1a702ae5..73ff3a224 100644
--- a/accessibility-checker-extension/src/ts/docs/components/DocPage.scss
+++ b/accessibility-checker-extension/src/ts/docs/components/DocPage.scss
@@ -9,7 +9,6 @@ body {
 #pageapp-root {
     min-height: 100%;
     height: 100%;
-    color: $gray-30;
     
     > .cds--css-grid {
         margin-left: 0rem;
@@ -50,7 +49,6 @@ body {
         }
         .op_version {
             @include type-style("label-01");
-            color: $gray-30;
             margin-top: .5rem;
         }
         p {
diff --git a/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx b/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx
index a4f7fe21f..1e9bda3f5 100644
--- a/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx
+++ b/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx
@@ -58,7 +58,7 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
 
         return (<>
             <Grid className={BrowserDetection.isDarkMode()?"cds--g90":"g10"}>
-                <Column sm={4} md={8} lg={4} className={`leftCol ${BrowserDetection.isDarkMode()?"cds--g100":"white"}`}>
+                <Column sm={4} md={8} lg={4} className={`leftCol ${BrowserDetection.isDarkMode()?"cds--g100":"cds--g10"}`}>
                     <div role="banner">
                         <img src={beeLogoUrl} alt="purple bee icon" className="icon" />
                         <div style={{marginTop:"2rem"}} />
@@ -79,7 +79,7 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
                 </Column>
                 <Column sm={0} md={0} lg={1}>
                 </Column>
-                <Column sm={this.props.sm} md={this.props.md} lg={this.props.lg} className={`rightCol ${BrowserDetection.isDarkMode()?"cds--g90":"cds--g10"}`}>
+                <Column sm={this.props.sm} md={this.props.md} lg={this.props.lg} className={`rightCol ${BrowserDetection.isDarkMode()?"cds--g90":"white"}`}>
                     {this.props.children}
                 </Column>
             </Grid>
diff --git a/accessibility-checker-extension/src/ts/docs/quickGuide.tsx b/accessibility-checker-extension/src/ts/docs/quickGuide.tsx
index 9a9e092ae..40baee9d1 100644
--- a/accessibility-checker-extension/src/ts/docs/quickGuide.tsx
+++ b/accessibility-checker-extension/src/ts/docs/quickGuide.tsx
@@ -22,7 +22,7 @@ import {QuickGuideACApp} from "./QuickGuideACApp";
 import "../styles/index.scss";
 
 let element = document.getElementById('pageapp-root');
-element?.setAttribute("class", BrowserDetection.isDarkMode()?"cds--g90":"g10")
+element?.setAttribute("class", BrowserDetection.isDarkMode()?"cds--g90":"white")
 
 ReactDOM.render(<QuickGuideACApp />
     , element);
diff --git a/accessibility-checker-extension/src/ts/docs/usingAC.tsx b/accessibility-checker-extension/src/ts/docs/usingAC.tsx
index da3272c1f..6f00a9acd 100644
--- a/accessibility-checker-extension/src/ts/docs/usingAC.tsx
+++ b/accessibility-checker-extension/src/ts/docs/usingAC.tsx
@@ -28,7 +28,7 @@ class PageApp extends React.Component<{}, {}> {
 }
 
 let element = document.getElementById('pageapp-root');
-element?.setAttribute("class", BrowserDetection.isDarkMode()?"cds--g90":"cds--g10")
+element?.setAttribute("class", BrowserDetection.isDarkMode()?"cds--g90":"white")
 
 ReactDOM.render(<PageApp />
     , element);
diff --git a/accessibility-checker-extension/src/ts/options/index.tsx b/accessibility-checker-extension/src/ts/options/index.tsx
index a04f92dc5..7c8a20271 100644
--- a/accessibility-checker-extension/src/ts/options/index.tsx
+++ b/accessibility-checker-extension/src/ts/options/index.tsx
@@ -27,7 +27,7 @@ class PageApp extends React.Component<{}, {}> {
 }
 
 let element = document.getElementById('pageapp-root');
-element?.setAttribute("class", BrowserDetection.isDarkMode()?"cds--g90":"cds--g10")
+element?.setAttribute("class", BrowserDetection.isDarkMode()?"cds--g90":"white")
 
 ReactDOM.render(<PageApp />
     , element);

From f27f611c421f8d3d450ae27fd877640cad616793 Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Thu, 15 Jun 2023 13:54:47 -0500
Subject: [PATCH 16/23] fix scan options

---
 .../src/ts/devtools/components/scanSection.scss                | 3 ++-
 .../src/ts/devtools/components/scanSection.tsx                 | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss b/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
index 52a2b1e5e..23e9606ea 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
@@ -24,6 +24,7 @@
     }
 
     .inlineLoading {
-        background-color: $layer;
+        // background-color: $layer;
+        background-color: #161616
     }
 }
\ No newline at end of file
diff --git a/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx b/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
index cda9b123e..4cc6a3158 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
@@ -191,7 +191,6 @@ export class ScanSection extends React.Component<{}, ScanSectionState> {
                                 <OverflowMenu 
                                     size="sm" 
                                     ariaLabel="stored scans" 
-                                    //align="bottom" 
                                     renderIcon={ChevronDown}
                                 >
                                     <OverflowMenuItem

From 7a6b93a0512e076e448ac101951c96fd83f0b2b3 Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Thu, 15 Jun 2023 14:56:57 -0500
Subject: [PATCH 17/23] background colors

---
 .../src/ts/devtools/components/scanSection.scss  | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss b/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
index 23e9606ea..b5ca815e3 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
@@ -9,11 +9,22 @@
 }
 
 .scanSection {
+
     .cds--overflow-menu--sm {
         min-height: 2rem;
-        background-color: #6f6f6f;
     }
 
+    // &.cds--g100 {
+    //     .cds--overflow-menu__wrapper {
+    //         background-color: #696969;
+    //     }
+    // }
+
+    .cds--100 .cds--overflow-menu__wrapper {
+        background-color: #696969;
+    }
+    
+
     .cds--btn {
         min-height: none;
     }
@@ -24,7 +35,6 @@
     }
 
     .inlineLoading {
-        // background-color: $layer;
-        background-color: #161616
+        background-color: $layer;
     }
 }
\ No newline at end of file

From 65f1913a78ab886a793b6b842591c6189edbbcba Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Thu, 15 Jun 2023 17:27:34 -0500
Subject: [PATCH 18/23] Menu button sizing

---
 .../ts/devtools/components/scanSection.scss   | 63 ++++++++++++++-----
 1 file changed, 47 insertions(+), 16 deletions(-)

diff --git a/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss b/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
index b5ca815e3..a30c0237c 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
@@ -9,22 +9,6 @@
 }
 
 .scanSection {
-
-    .cds--overflow-menu--sm {
-        min-height: 2rem;
-    }
-
-    // &.cds--g100 {
-    //     .cds--overflow-menu__wrapper {
-    //         background-color: #696969;
-    //     }
-    // }
-
-    .cds--100 .cds--overflow-menu__wrapper {
-        background-color: #696969;
-    }
-    
-
     .cds--btn {
         min-height: none;
     }
@@ -37,4 +21,51 @@
     .inlineLoading {
         background-color: $layer;
     }
+}
+
+.cds--g100 {
+    .scanSection {
+        .cds--overflow-menu__wrapper {
+            button {
+                height: 2rem;
+                width: 2rem;
+                background-color: #696969;
+                min-height: 2rem;
+                .cds--btn--md.cds--btn--icon-only {
+                    padding-right: 0.5rem;
+                    padding-left: 0.5rem;
+                }
+                svg {
+                    .cds--overflow-menu__icon {
+                        fill: black;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.cds--white {
+    .scanSection {
+        .cds--overflow-menu__wrapper {
+            .cds--overflow-menu__icon {
+                fill: white;
+            }
+            button {
+                height: 2rem;
+                width: 2rem;
+                background-color: #161616;
+                min-height: 2rem;
+                .cds--btn--md.cds--btn--icon-only {
+                    padding-right: 0.5rem;
+                    padding-left: 0.5rem;
+                }
+                svg {
+                    .cds--overflow-menu__icon {
+                        fill: white;
+                    }
+                }
+            }
+        }
+    }
 }
\ No newline at end of file

From 8162b7d696288a91a7d1028e1e67586ea1b51cf9 Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Mon, 19 Jun 2023 10:07:49 -0500
Subject: [PATCH 19/23] Document overflow menu button control

---
 .../ts/devtools/components/scanSection.scss   | 80 ++++++++++++-------
 .../ts/devtools/components/scanSection.tsx    |  4 +-
 2 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss b/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
index a30c0237c..75178f516 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
@@ -1,6 +1,8 @@
 @use '@carbon/styles/scss/type'as *;
 @use '@carbon/styles/scss/theme'as *;
 
+
+
 .cds--overflow-menu-options[aria-label='stored scans'] {
     min-width: 12rem;
     .cds--overflow-menu-options__btn {
@@ -8,20 +10,7 @@
     }
 }
 
-.scanSection {
-    .cds--btn {
-        min-height: none;
-    }
-    
-    .storedCount {
-        margin-top:.5rem;
-        @include type-style("label-01");
-    }
 
-    .inlineLoading {
-        background-color: $layer;
-    }
-}
 
 .cds--g100 {
     .scanSection {
@@ -29,17 +18,27 @@
             button {
                 height: 2rem;
                 width: 2rem;
-                background-color: #696969;
+                background-color: #393939; // color of initial menu button
+                // border: 1px solid gray;
                 min-height: 2rem;
+                .cds--overflow-menu__icon {
+                    fill: white;
+                }
                 .cds--btn--md.cds--btn--icon-only {
                     padding-right: 0.5rem;
                     padding-left: 0.5rem;
                 }
-                svg {
-                    .cds--overflow-menu__icon {
-                        fill: black;
-                    }
-                }
+            }
+        }
+        .cds--overflow-menu.cds--overflow-menu--open:hover {
+            background-color: 393939; // color of button on hover
+        }
+        .cds--overflow-menu.cds--overflow-menu--open {
+            height: 2rem;
+            min-height: 2rem;
+            background-color: #393939; // color of secondary button and menu items
+            .cds--overflow-menu__icon {
+                fill: white;
             }
         }
     }
@@ -48,24 +47,43 @@
 .cds--white {
     .scanSection {
         .cds--overflow-menu__wrapper {
-            .cds--overflow-menu__icon {
-                fill: white;
-            }
-            button {
-                height: 2rem;
+            button { height: 2rem;
                 width: 2rem;
-                background-color: #161616;
                 min-height: 2rem;
+                background-color: #e0e0e0; // color of initial menu button
+                .cds--overflow-menu__icon {
+                    fill: black;
+                }
                 .cds--btn--md.cds--btn--icon-only {
                     padding-right: 0.5rem;
                     padding-left: 0.5rem;
                 }
-                svg {
-                    .cds--overflow-menu__icon {
-                        fill: white;
-                    }
-                }
+            }
+        }
+        .cds--overflow-menu.cds--overflow-menu--open:hover {
+            background-color: #e0e0e0; // color of button on hover
+        }
+        .cds--overflow-menu.cds--overflow-menu--open {
+            height: 2rem;
+            min-height: 2rem;
+            background-color: #e0e0e0; // color of secondary button and menu items
+            .cds--overflow-menu__icon {
+                fill: black;
             }
         }
     }
-}
\ No newline at end of file
+}
+
+.scanSection {
+    .storedCount {
+        margin-top:.5rem;
+        @include type-style("label-01");
+    }
+
+    .inlineLoading {
+        background-color: $layer;
+    }
+    
+}
+
+
diff --git a/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx b/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
index 4cc6a3158..0442f2080 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/scanSection.tsx
@@ -29,7 +29,7 @@ import {
     OverflowMenu,
     OverflowMenuItem,
     Switch,
-    Tooltip
+    Tooltip,
 } from "@carbon/react";
 import {
     Keyboard,
@@ -40,6 +40,7 @@ import { IReport } from '../../interfaces/interfaces';
 import { ChevronDown } from "@carbon/react/icons";
 import "./scanSection.scss";
 import { getDevtoolsAppController } from '../devtoolsAppController';
+// import { BrowserDetection } from '../../util/browserDetection';
 
 let devtoolsController = getDevtoolsController();
 let bgController = getBGController();
@@ -189,6 +190,7 @@ export class ScanSection extends React.Component<{}, ScanSectionState> {
                                     }>Scan</Button>
                                 </div>
                                 <OverflowMenu 
+                                    data-floating-menu-container
                                     size="sm" 
                                     ariaLabel="stored scans" 
                                     renderIcon={ChevronDown}

From ba449a806137f30693c2578743b06ad0a9559c17 Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Thu, 22 Jun 2023 14:02:57 -0500
Subject: [PATCH 20/23] color change

---
 .../src/ts/devtools/components/reportSection.tsx              | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx b/accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx
index 04c883b6d..7c16e6a82 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx
@@ -287,8 +287,8 @@ export class ReportSection extends React.Component<ReportSectionProps, ReportSec
                         inline={true}
                         onClick={() => {
                             let appController = getDevtoolsAppController();
-                            appController.setSecondaryView("summary");
-                            appController.openSecondary("totalIssuesCount");
+                            ("summary");
+                            appController.openSecondary("tappController.setSecondaryViewotalIssuesCount");
                     }}>{totalCount} issues found</Link>
                 </Column>
             </Grid>

From b1ad281a8ae6f51b1279e133a9a6145971f79ced Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Thu, 22 Jun 2023 14:05:56 -0500
Subject: [PATCH 21/23] Update scanSection.scss

---
 .../src/ts/devtools/components/scanSection.scss        | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss b/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
index 75178f516..2cf4ae9fb 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
+++ b/accessibility-checker-extension/src/ts/devtools/components/scanSection.scss
@@ -18,7 +18,7 @@
             button {
                 height: 2rem;
                 width: 2rem;
-                background-color: #393939; // color of initial menu button
+                background-color: #393939; // color of initial menu button and menu items
                 // border: 1px solid gray;
                 min-height: 2rem;
                 .cds--overflow-menu__icon {
@@ -31,12 +31,12 @@
             }
         }
         .cds--overflow-menu.cds--overflow-menu--open:hover {
-            background-color: 393939; // color of button on hover
+            background-color: #595959; // color of button on hover
         }
         .cds--overflow-menu.cds--overflow-menu--open {
             height: 2rem;
             min-height: 2rem;
-            background-color: #393939; // color of secondary button and menu items
+            background-color: #393939; // color of secondary button
             .cds--overflow-menu__icon {
                 fill: white;
             }
@@ -50,7 +50,7 @@
             button { height: 2rem;
                 width: 2rem;
                 min-height: 2rem;
-                background-color: #e0e0e0; // color of initial menu button
+                background-color: #e0e0e0; // color of initial menu button and menu items
                 .cds--overflow-menu__icon {
                     fill: black;
                 }
@@ -66,7 +66,7 @@
         .cds--overflow-menu.cds--overflow-menu--open {
             height: 2rem;
             min-height: 2rem;
-            background-color: #e0e0e0; // color of secondary button and menu items
+            background-color: #e0e0e0; // color of secondary button 
             .cds--overflow-menu__icon {
                 fill: black;
             }

From e4b71a0ad6423879e2b11845b8b83c0e8cb7dfe2 Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Sat, 24 Jun 2023 14:13:15 -0500
Subject: [PATCH 22/23] Fix Bee icons Light and Dark, Mask group gone

---
 .../src/assets/Mask group.svg                            | 8 --------
 .../src/assets/Mask group2.svg                           | 9 ---------
 .../src/ts/devtools/components/reportSection.tsx         | 2 +-
 .../src/ts/docs/UsingACApp.tsx                           | 6 ++++--
 .../src/ts/docs/components/DocPage.tsx                   | 5 +++--
 .../src/ts/popup/PopupApp.tsx                            | 6 ++++--
 accessibility-checker-extension/src/ts/popup/index.tsx   | 3 ---
 7 files changed, 12 insertions(+), 27 deletions(-)
 delete mode 100644 accessibility-checker-extension/src/assets/Mask group.svg
 delete mode 100644 accessibility-checker-extension/src/assets/Mask group2.svg

diff --git a/accessibility-checker-extension/src/assets/Mask group.svg b/accessibility-checker-extension/src/assets/Mask group.svg
deleted file mode 100644
index f9ea1d25d..000000000
--- a/accessibility-checker-extension/src/assets/Mask group.svg	
+++ /dev/null
@@ -1,8 +0,0 @@
-E<svg width="40" height="31" viewBox="0 0 40 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_139_6382" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="31">
-<path d="M0 0H39.9997V30.3706H0V0Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_139_6382)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4767 14.3113L26.4193 9.866L29.8107 20.6333C30.454 22.552 32.0753 24.434 34.8147 24.434C37.666 24.434 40 22.1067 40 19.2553C40 16.84 38.5147 15.226 36.4767 14.3113ZM14.1973 26.6667C15.222 28.85 17.442 30.3707 20.0133 30.3707C22.5867 30.3707 24.792 28.8527 25.816 26.6667H14.1973ZM25.816 10.8647C24.7907 8.68133 22.5713 7.16067 20 7.16067C17.4267 7.16067 15.2213 8.67867 14.1973 10.8647H25.816ZM0 19.2553C0 22.1067 2.334 24.434 5.18467 24.434C7.92333 24.434 9.54533 22.552 10.1887 20.6333L13.58 9.866L3.52267 14.3113C1.48467 15.226 0 16.84 0 19.2553ZM23.7087 0C22.0753 0 20.7513 1.32467 20.7513 2.95733C20.7513 4.59067 22.0753 5.91533 23.7087 5.91533C25.342 5.91533 26.6667 4.59067 26.6667 2.95733C26.6667 1.32467 25.342 0 23.7087 0ZM16.2907 0C14.6573 0 13.3333 1.32467 13.3333 2.95733C13.3333 4.59067 14.6573 5.91533 16.2907 5.91533C17.924 5.91533 19.248 4.59067 19.248 2.95733C19.248 1.32467 17.924 0 16.2907 0Z" fill="#A56EFF"/>
-</g>
-</svg>
diff --git a/accessibility-checker-extension/src/assets/Mask group2.svg b/accessibility-checker-extension/src/assets/Mask group2.svg
deleted file mode 100644
index 6c9689b2f..000000000
--- a/accessibility-checker-extension/src/assets/Mask group2.svg	
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="40" height="31" viewBox="0 0 40 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M26.4199 20.2471H13.5806V23.7038H26.4192L26.4199 20.2471ZM26.4199 13.8271H13.5806V17.2838H26.4192L26.4199 13.8271Z" fill="#F4F4F4"/>
-<mask id="mask0_216_6406" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="31">
-<path d="M0 0H39.9997V30.3706H0V0Z" fill="white"/>
-</mask>
-<g mask="url(#mask0_216_6406)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4767 14.3113L26.4193 9.866L29.8107 20.6333C30.454 22.552 32.0753 24.434 34.8147 24.434C37.666 24.434 40 22.1067 40 19.2553C40 16.84 38.5147 15.226 36.4767 14.3113ZM14.1973 26.6667C15.222 28.85 17.442 30.3707 20.0133 30.3707C22.5867 30.3707 24.792 28.8527 25.816 26.6667H14.1973ZM25.816 10.8647C24.7907 8.68133 22.5713 7.16067 20 7.16067C17.4267 7.16067 15.2213 8.67867 14.1973 10.8647H25.816ZM0 19.2553C0 22.1067 2.334 24.434 5.18467 24.434C7.92333 24.434 9.54533 22.552 10.1887 20.6333L13.58 9.866L3.52267 14.3113C1.48467 15.226 0 16.84 0 19.2553ZM23.7087 0C22.0753 0 20.7513 1.32467 20.7513 2.95733C20.7513 4.59067 22.0753 5.91533 23.7087 5.91533C25.342 5.91533 26.6667 4.59067 26.6667 2.95733C26.6667 1.32467 25.342 0 23.7087 0ZM16.2907 0C14.6573 0 13.3333 1.32467 13.3333 2.95733C13.3333 4.59067 14.6573 5.91533 16.2907 5.91533C17.924 5.91533 19.248 4.59067 19.248 2.95733C19.248 1.32467 17.924 0 16.2907 0Z" fill="#A56EFF"/>
-</g>
-</svg>
diff --git a/accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx b/accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx
index 7c16e6a82..05835a84d 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx
@@ -287,7 +287,7 @@ export class ReportSection extends React.Component<ReportSectionProps, ReportSec
                         inline={true}
                         onClick={() => {
                             let appController = getDevtoolsAppController();
-                            ("summary");
+                            getDevtoolsAppController().setSecondaryView("summary");
                             appController.openSecondary("tappController.setSecondaryViewotalIssuesCount");
                     }}>{totalCount} issues found</Link>
                 </Column>
diff --git a/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx b/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx
index 282a44321..6bb05cd63 100644
--- a/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx
+++ b/accessibility-checker-extension/src/ts/docs/UsingACApp.tsx
@@ -17,7 +17,9 @@ limitations under the License.
 *****************************************************************************/
 
 import React from "react";
-import beeLogoUrl from "../../assets/Mask group2.svg";
+import beeLogoDark from "../../assets/BE_for_DarkMode.svg";
+import beeLogoLight from "../../assets/BE_for_LightMode.svg";
+import { BrowserDetection } from '../util/browserDetection';
 import violation from "../../assets/Violation16.svg";
 import needsReview from "../../assets/NeedsReview16.svg";
 import recommendation from "../../assets/Recommendation16.svg";
@@ -528,7 +530,7 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
                         In the browser tool bar, select the IBM Equal Access
                         Accessibility Checker icon as shown {" "}
                         <img
-                            src={beeLogoUrl}
+                            src={BrowserDetection.isDarkMode()?beeLogoDark:beeLogoLight}
                             width="16px"
                             height="16px"
                             alt="Accessibility checker application icon"
diff --git a/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx b/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx
index 1e9bda3f5..cbcd73fa4 100644
--- a/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx
+++ b/accessibility-checker-extension/src/ts/docs/components/DocPage.tsx
@@ -24,7 +24,8 @@ import {
 } from "@carbon/react";
 
 // import OptionUtil  from '../util/optionUtil';
-import beeLogoUrl from "../../../assets/Mask group2.svg";
+import beeLogoDark from "../../../assets/BE_for_DarkMode.svg";
+import beeLogoLight from "../../../assets/BE_for_LightMode.svg";
 import "./DocPage.scss";
 import { BrowserDetection } from "../../util/browserDetection";
 
@@ -60,7 +61,7 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
             <Grid className={BrowserDetection.isDarkMode()?"cds--g90":"g10"}>
                 <Column sm={4} md={8} lg={4} className={`leftCol ${BrowserDetection.isDarkMode()?"cds--g100":"cds--g10"}`}>
                     <div role="banner">
-                        <img src={beeLogoUrl} alt="purple bee icon" className="icon" />
+                        <img src={BrowserDetection.isDarkMode()?beeLogoDark:beeLogoLight} alt="purple bee icon" className="icon" />
                         <div style={{marginTop:"2rem"}} />
                         <div className="division">
                             IBM <strong>Accessibility</strong>
diff --git a/accessibility-checker-extension/src/ts/popup/PopupApp.tsx b/accessibility-checker-extension/src/ts/popup/PopupApp.tsx
index 8fcfd125a..ec4b908d0 100644
--- a/accessibility-checker-extension/src/ts/popup/PopupApp.tsx
+++ b/accessibility-checker-extension/src/ts/popup/PopupApp.tsx
@@ -19,7 +19,9 @@
     import { Column, Link, Grid } from "@carbon/react";
     import "./popup.scss";
     
-    const purple_bee = "/assets/Mask group2";
+    import beeLogoDark from "../../assets/BE_for_DarkMode.svg";
+    import beeLogoLight from "../../assets/BE_for_LightMode.svg";
+
     const checker_chrome = "/assets/img/Chrome_Checker.png";
     const checker_firefox = "/assets/img/Firefox_Checker.png";
     const assessment_chrome = "/assets/img/Chrome_Assessment.png";
@@ -58,7 +60,7 @@
                     </Column>
                     <Column sm={1} style={{ textAlign: "right" }}>
                         <img
-                            src={purple_bee}
+                            src={BrowserDetection.isDarkMode()?beeLogoDark:beeLogoLight}
                             style={{ width: "2.25rem", height: "2.25rem" }}
                             alt="purple bee icon"
                         />
diff --git a/accessibility-checker-extension/src/ts/popup/index.tsx b/accessibility-checker-extension/src/ts/popup/index.tsx
index 78d972329..6df42dbe7 100644
--- a/accessibility-checker-extension/src/ts/popup/index.tsx
+++ b/accessibility-checker-extension/src/ts/popup/index.tsx
@@ -16,9 +16,6 @@
 
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-// import {  Theme } from "@carbon/react";
-// import { BrowserDetection } from "../util/browserDetection";
-    
 import "../styles/index.scss";
 import PopupApp from './PopupApp';
 

From a70eb63924a0c8e13d5510980c3e666fc911758c Mon Sep 17 00:00:00 2001
From: Josiah Hoskins <Josiah.Hoskins@ibm.com>
Date: Wed, 28 Jun 2023 12:07:34 -0500
Subject: [PATCH 23/23] Cleanup

---
 .../src/assets/bee 3 (2).svg                  | 24 -------------------
 .../src/assets/bee 3.svg                      | 16 -------------
 .../ts/devtools/components/reportSection.tsx  |  2 +-
 3 files changed, 1 insertion(+), 41 deletions(-)
 delete mode 100644 accessibility-checker-extension/src/assets/bee 3 (2).svg
 delete mode 100644 accessibility-checker-extension/src/assets/bee 3.svg

diff --git a/accessibility-checker-extension/src/assets/bee 3 (2).svg b/accessibility-checker-extension/src/assets/bee 3 (2).svg
deleted file mode 100644
index f3000af4e..000000000
--- a/accessibility-checker-extension/src/assets/bee 3 (2).svg	
+++ /dev/null
@@ -1,24 +0,0 @@
-<svg width="40" height="31" viewBox="0 0 40 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="40" height="31" fill="#1E1E1E"/>
-<g clip-path="url(#clip0_0_1)">
-<rect width="1312" height="17207" transform="translate(-32 -32)" fill="#262626"/>
-<rect x="-32" y="-32" width="336" height="19061" fill="#161616"/>
-<g clip-path="url(#clip1_0_1)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M26.4194 20.2471H13.5801V23.7038H26.4187L26.4194 20.2471ZM26.4194 13.8271H13.5801V17.2838H26.4187L26.4194 13.8271Z" fill="#F4F4F4"/>
-<mask id="mask0_0_1" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="31">
-<path d="M0 0H39.9997V30.3706H0V0Z" fill="#A56EFF"/>
-</mask>
-<g mask="url(#mask0_0_1)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4767 14.3113L26.4193 9.866L29.8107 20.6333C30.454 22.552 32.0753 24.434 34.8147 24.434C37.666 24.434 40 22.1067 40 19.2553C40 16.84 38.5147 15.226 36.4767 14.3113ZM14.1973 26.6667C15.222 28.85 17.442 30.3707 20.0133 30.3707C22.5867 30.3707 24.792 28.8527 25.816 26.6667H14.1973ZM25.816 10.8647C24.7907 8.68133 22.5713 7.16067 20 7.16067C17.4267 7.16067 15.2213 8.67867 14.1973 10.8647H25.816ZM0 19.2553C0 22.1067 2.334 24.434 5.18467 24.434C7.92333 24.434 9.54533 22.552 10.1887 20.6333L13.58 9.866L3.52267 14.3113C1.48467 15.226 0 16.84 0 19.2553ZM23.7087 0C22.0753 0 20.7513 1.32467 20.7513 2.95733C20.7513 4.59067 22.0753 5.91533 23.7087 5.91533C25.342 5.91533 26.6667 4.59067 26.6667 2.95733C26.6667 1.32467 25.342 0 23.7087 0ZM16.2907 0C14.6573 0 13.3333 1.32467 13.3333 2.95733C13.3333 4.59067 14.6573 5.91533 16.2907 5.91533C17.924 5.91533 19.248 4.59067 19.248 2.95733C19.248 1.32467 17.924 0 16.2907 0Z" fill="#A56EFF"/>
-</g>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_0_1">
-<rect width="1312" height="17207" fill="white" transform="translate(-32 -32)"/>
-</clipPath>
-<clipPath id="clip1_0_1">
-<rect width="40" height="30.6667" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/accessibility-checker-extension/src/assets/bee 3.svg b/accessibility-checker-extension/src/assets/bee 3.svg
deleted file mode 100644
index 3b9140249..000000000
--- a/accessibility-checker-extension/src/assets/bee 3.svg	
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg width="40" height="31" viewBox="0 0 40 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_139_6375)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M26.4194 20.2471H13.5801V23.7038H26.4187L26.4194 20.2471ZM26.4194 13.8271H13.5801V17.2838H26.4187L26.4194 13.8271Z" fill="#F4F4F4"/>
-<mask id="mask0_139_6375" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="31">
-<path d="M0 0H39.9997V30.3706H0V0Z" fill="#A56EFF"/>
-</mask>
-<g mask="url(#mask0_139_6375)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4767 14.3113L26.4193 9.866L29.8107 20.6333C30.454 22.552 32.0753 24.434 34.8147 24.434C37.666 24.434 40 22.1067 40 19.2553C40 16.84 38.5147 15.226 36.4767 14.3113ZM14.1973 26.6667C15.222 28.85 17.442 30.3707 20.0133 30.3707C22.5867 30.3707 24.792 28.8527 25.816 26.6667H14.1973ZM25.816 10.8647C24.7907 8.68133 22.5713 7.16067 20 7.16067C17.4267 7.16067 15.2213 8.67867 14.1973 10.8647H25.816ZM0 19.2553C0 22.1067 2.334 24.434 5.18467 24.434C7.92333 24.434 9.54533 22.552 10.1887 20.6333L13.58 9.866L3.52267 14.3113C1.48467 15.226 0 16.84 0 19.2553ZM23.7087 0C22.0753 0 20.7513 1.32467 20.7513 2.95733C20.7513 4.59067 22.0753 5.91533 23.7087 5.91533C25.342 5.91533 26.6667 4.59067 26.6667 2.95733C26.6667 1.32467 25.342 0 23.7087 0ZM16.2907 0C14.6573 0 13.3333 1.32467 13.3333 2.95733C13.3333 4.59067 14.6573 5.91533 16.2907 5.91533C17.924 5.91533 19.248 4.59067 19.248 2.95733C19.248 1.32467 17.924 0 16.2907 0Z" fill="#A56EFF"/>
-</g>
-</g>
-<defs>
-<clipPath id="clip0_139_6375">
-<rect width="40" height="30.6667" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx b/accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx
index 05835a84d..b4b67bf32 100644
--- a/accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx
+++ b/accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx
@@ -288,7 +288,7 @@ export class ReportSection extends React.Component<ReportSectionProps, ReportSec
                         onClick={() => {
                             let appController = getDevtoolsAppController();
                             getDevtoolsAppController().setSecondaryView("summary");
-                            appController.openSecondary("tappController.setSecondaryViewotalIssuesCount");
+                            appController.openSecondary("totalIssuesCount");
                     }}>{totalCount} issues found</Link>
                 </Column>
             </Grid>