diff --git a/app/src/components/Common.js b/app/src/components/Common.js
index d7b89253..755ee423 100644
--- a/app/src/components/Common.js
+++ b/app/src/components/Common.js
@@ -1,5 +1,5 @@
 import React, {useContext, useEffect, useState} from "react";
-import {Card, Container, IconGroup, Input, Modal, Pagination} from 'semantic-ui-react';
+import {Card, Container, IconGroup, Input, Modal, Pagination, Icon as SIcon} from 'semantic-ui-react';
 import {Link, NavLink, useNavigate} from "react-router-dom";
 import Message from "semantic-ui-react/dist/commonjs/collections/Message";
 import {useDirectories, useDownloads, useHotspot, useSettings, useThrottle} from "../hooks/customHooks";
@@ -779,7 +779,8 @@ export function DarkModeToggle() {
         iconName = 'sun';
     }
 
-    return <Icon
+    return <SIcon
+        inverted
         name={iconName}
         onClick={cycleSavedTheme}
         style={{cursor: 'pointer'}}
diff --git a/app/src/components/Nav.js b/app/src/components/Nav.js
index 6929370b..5f35ecc3 100644
--- a/app/src/components/Nav.js
+++ b/app/src/components/Nav.js
@@ -58,7 +58,6 @@ export function NavBar() {
     const wrolpiIcon = <img src='/icon.svg' height='32px' width='32px' alt='WROLPi Home Icon'/>;
     const name = NAME || wrolpiIcon;
     const topNavText = wrol_mode ? <>{name}&nbsp; <Icon name='lock'/></> : name;
-    const {i} = useContext(ThemeContext);
 
     const homeLink = <NavLink className='item' to='/' style={{paddingTop: 0, paddingBottom: 0}}>
         {topNavText}
@@ -70,7 +69,7 @@ export function NavBar() {
 
     return <>
         <Media at='mobile'>
-            <Menu {...i} attached='top'>
+            <Menu attached='top' inverted color='violet'>
                 {homeLink}
                 <Menu.Menu position='right'>
                     {icons}
@@ -83,7 +82,7 @@ export function NavBar() {
             </Menu>
         </Media>
         <Media greaterThanOrEqual='tablet'>
-            <Menu {...i} attached='top'>
+            <Menu attached='top' inverted color='violet'>
                 {homeLink}
                 {links.map(i => <MenuLink link={i} key={i.key}/>)}