...

4 files changed, 19 insertions, 2 deletions

diff --git a/FrontEnd/src/components/AppBar.tsx b/FrontEnd/src/components/AppBar.tsx
index 1a5c1941..9dfec3e1 100644
--- a/FrontEnd/src/components/AppBar.tsx
+++ b/FrontEnd/src/components/AppBar.tsx
@@ -92,7 +92,12 @@ export default function AppBar() {
       </div>
 
       {isMobile && (
-        <IconButton icon="list" className="toggler" onClick={toggleCollapse} />
+        <IconButton
+          icon="list"
+          color="light"
+          className="toggler"
+          onClick={toggleCollapse}
+        />
       )}
     </nav>
   );
diff --git a/FrontEnd/src/components/common.ts b/FrontEnd/src/components/common.ts
index 48473269..b9b55f9b 100644
--- a/FrontEnd/src/components/common.ts
+++ b/FrontEnd/src/components/common.ts
@@ -12,7 +12,7 @@ export const themeColors = [
 
 export type ThemeColor = (typeof themeColors)[number];
 
-export type ClickableColor = ThemeColor | "grayscale" | "minor";
+export type ClickableColor = ThemeColor | "grayscale" | "light" | "minor";
 
 export { breakpoints } from "./breakpoints";
 
diff --git a/FrontEnd/src/components/dialog/FullPageDialog.tsx b/FrontEnd/src/components/dialog/FullPageDialog.tsx
index d18bcf73..575abf7f 100644
--- a/FrontEnd/src/components/dialog/FullPageDialog.tsx
+++ b/FrontEnd/src/components/dialog/FullPageDialog.tsx
@@ -33,6 +33,7 @@ export default function FullPageDialog({
       <div className="cru-dialog-full-page-top-bar">
         <IconButton
           icon="arrow-left"
+          color="light"
           className="cru-dialog-full-page-back-button"
           onClick={closeDialog}
         />
diff --git a/FrontEnd/src/components/theme.css b/FrontEnd/src/components/theme.css
index bd7805cf..487ab959 100644
--- a/FrontEnd/src/components/theme.css
+++ b/FrontEnd/src/components/theme.css
@@ -87,6 +87,10 @@
   --cru-clickable-grayscale-hover-color: hsl(0 0% 92%);
   --cru-clickable-grayscale-focus-color: hsl(0 0% 92%);
   --cru-clickable-grayscale-active-color: hsl(0 0% 88%);
+  --cru-clickable-light-normal-color: hsl(0 0% 100%);
+  --cru-clickable-light-hover-color: hsl(0 0% 92%);
+  --cru-clickable-light-focus-color: hsl(0 0% 92%);
+  --cru-clickable-light-active-color: hsl(0 0% 88%);
   --cru-clickable-minor-normal-color: hsl(0 0% 30%);
   --cru-clickable-minor-hover-color: hsl(0 0% 40%);
   --cru-clickable-minor-focus-color: hsl(0 0% 40%);
@@ -142,6 +146,13 @@
   --cru-clickable-active-color: var(--cru-clickable-grayscale-active-color);
 }
 
+.cru-clickable-light {
+  --cru-clickable-normal-color: var(--cru-clickable-light-normal-color);
+  --cru-clickable-hover-color: var(--cru-clickable-light-hover-color);
+  --cru-clickable-focus-color: var(--cru-clickable-light-focus-color);
+  --cru-clickable-active-color: var(--cru-clickable-light-active-color);
+}
+
 .cru-clickable-minor {
   --cru-clickable-normal-color: var(--cru-clickable-minor-normal-color);
   --cru-clickable-hover-color: var(--cru-clickable-minor-hover-color);