From ed7b36791a4d5e97569ca6f8734c5b6087fb8628 Mon Sep 17 00:00:00 2001
From: PhilReact <philliplangmartinez@gmail.com>
Date: Mon, 28 Apr 2025 19:55:48 +0300
Subject: [PATCH] add css vars to theme palette

---
 src/App.tsx                                   | 14 +++---
 src/ExtStates/NotAuthenticated.tsx            |  7 +--
 src/Wallets.tsx                               |  6 +--
 src/components/Apps/AppsDesktop.tsx           |  4 +-
 src/components/Apps/AppsDevMode.tsx           |  4 +-
 src/components/Apps/AppsNavBarDesktop.tsx     |  4 +-
 src/components/Chat/ChatDirect.tsx            |  3 +-
 src/components/Chat/ChatGroup.tsx             |  3 +-
 src/components/Chat/ChatList.tsx              |  2 +-
 src/components/Chat/ChatOptions.tsx           |  2 +-
 src/components/Chat/GroupAnnouncements.tsx    |  2 +-
 src/components/Desktop/DesktopFooter.tsx      |  4 +-
 src/components/Desktop/DesktopHeader.tsx      |  8 ++--
 src/components/DesktopSideBar.tsx             |  4 +-
 src/components/Embeds/AttachmentEmbed.tsx     |  2 +-
 src/components/Embeds/ImageEmbed.tsx          |  2 +-
 src/components/Embeds/PollEmbed.tsx           |  2 +-
 src/components/GeneralNotifications.tsx       |  2 +-
 src/components/GlobalActions/JoinGroup.tsx    |  4 +-
 src/components/Group/AddGroupList.tsx         |  7 +--
 src/components/Group/Forum/GroupMail.tsx      | 12 +++--
 src/components/Group/Forum/Mail-styles.ts     | 44 +++++++------------
 src/components/Group/Group.tsx                | 26 +++++------
 .../Group/ListOfGroupPromotions.tsx           |  4 +-
 src/components/Group/QMailMessages.tsx        | 12 +++--
 src/components/Group/UserListOfInvites.tsx    |  7 +--
 src/components/Minting/Minting.tsx            | 12 ++---
 src/components/QMailStatus.tsx                |  2 +-
 src/components/Save/Save.tsx                  | 16 +++----
 src/components/Theme/ThemeManager.tsx         | 18 ++++++++
 src/styles/theme-dark.ts                      |  5 +++
 src/styles/theme-light.ts                     |  5 +++
 src/styles/theme.d.ts                         | 10 +++++
 33 files changed, 149 insertions(+), 110 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index dbdc846..d31f4d7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3121,12 +3121,12 @@ function App() {
             <DialogActions>
               <Button
                 sx={{
-                  backgroundColor: 'var(--green)',
+                  backgroundColor: theme.palette.other.positive,
                   color: theme.palette.text.primary,
                   fontWeight: 'bold',
                   opacity: 0.7,
                   '&:hover': {
-                    backgroundColor: 'var(--green)',
+                    backgroundColor: theme.palette.other.positive,
                     color: 'black',
                     opacity: 1,
                   },
@@ -3141,12 +3141,12 @@ function App() {
               </Button>
               <Button
                 sx={{
-                  backgroundColor: 'var(--danger)',
+                  backgroundColor: theme.palette.other.danger,
                   color: 'black',
                   fontWeight: 'bold',
                   opacity: 0.7,
                   '&:hover': {
-                    backgroundColor: 'var(--danger)',
+                    backgroundColor: theme.palette.other.danger,
                     color: 'black',
                     opacity: 1,
                   },
@@ -3500,7 +3500,7 @@ function App() {
               >
                 <CustomButtonAccept
                   color="black"
-                  bgColor="var(--green)"
+                  bgColor={theme.palette.other.positive}
                   sx={{
                     minWidth: '102px',
                     opacity:
@@ -3536,7 +3536,7 @@ function App() {
                 </CustomButtonAccept>
                 <CustomButtonAccept
                   color="black"
-                  bgColor="var(--danger)"
+                  bgColor={theme.palette.other.danger}
                   sx={{
                     minWidth: '102px',
                   }}
@@ -3593,7 +3593,7 @@ function App() {
         >
           <HelpIcon
             sx={{
-              color: 'var(--unread)',
+              color: theme.palette.other.unread,
             }}
           />
         </ButtonBase>
diff --git a/src/ExtStates/NotAuthenticated.tsx b/src/ExtStates/NotAuthenticated.tsx
index a99a970..04f068e 100644
--- a/src/ExtStates/NotAuthenticated.tsx
+++ b/src/ExtStates/NotAuthenticated.tsx
@@ -562,11 +562,12 @@ export const NotAuthenticated = ({
             }}
             sx={{
               backgroundColor:
-                hasSeenGettingStarted === false && 'var(--green)',
+                hasSeenGettingStarted === false && theme.palette.other.positive,
               color: hasSeenGettingStarted === false && 'black',
               '&:hover': {
                 backgroundColor:
-                  hasSeenGettingStarted === false && 'var(--green)',
+                  hasSeenGettingStarted === false &&
+                  theme.palette.other.positive,
                 color: hasSeenGettingStarted === false && 'black',
               },
             }}
@@ -1077,7 +1078,7 @@ export const NotAuthenticated = ({
       >
         <HelpIcon
           sx={{
-            color: 'var(--unread)',
+            color: theme.palette.other.unread,
           }}
         />
       </ButtonBase>
diff --git a/src/Wallets.tsx b/src/Wallets.tsx
index cb66936..1f218da 100644
--- a/src/Wallets.tsx
+++ b/src/Wallets.tsx
@@ -539,12 +539,12 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
             </Button>
             <Button
               sx={{
-                backgroundColor: 'var(--danger)',
+                backgroundColor: theme.palette.other.danger,
                 '&:hover': {
-                  backgroundColor: 'var(--danger)',
+                  backgroundColor: theme.palette.other.danger,
                 },
                 '&:focus': {
-                  backgroundColor: 'var(--danger)',
+                  backgroundColor: theme.palette.other.danger,
                 },
               }}
               size="small"
diff --git a/src/components/Apps/AppsDesktop.tsx b/src/components/Apps/AppsDesktop.tsx
index 32098e2..1fc8f65 100644
--- a/src/components/Apps/AppsDesktop.tsx
+++ b/src/components/Apps/AppsDesktop.tsx
@@ -387,7 +387,7 @@ export const AppsDesktop = ({
           <IconWrapper
             color={
               hasUnreadDirects || hasUnreadGroups
-                ? 'var(--unread)'
+                ? theme.palette.other.unread
                 : desktopViewMode === 'chat'
                   ? theme.palette.text.primary
                   : theme.palette.text.secondary
@@ -399,7 +399,7 @@ export const AppsDesktop = ({
               height={30}
               color={
                 hasUnreadDirects || hasUnreadGroups
-                  ? 'var(--unread)'
+                  ? theme.palette.other.unread
                   : desktopViewMode === 'chat'
                     ? theme.palette.text.primary
                     : theme.palette.text.secondary
diff --git a/src/components/Apps/AppsDevMode.tsx b/src/components/Apps/AppsDevMode.tsx
index df7e0ca..1538a92 100644
--- a/src/components/Apps/AppsDevMode.tsx
+++ b/src/components/Apps/AppsDevMode.tsx
@@ -290,7 +290,7 @@ export const AppsDevMode = ({
           <IconWrapper
             color={
               hasUnreadDirects || hasUnreadGroups
-                ? 'var(--unread)'
+                ? theme.palette.other.unread
                 : desktopViewMode === 'chat'
                   ? theme.palette.text.primary
                   : theme.palette.text.secondary
@@ -302,7 +302,7 @@ export const AppsDevMode = ({
               height={30}
               color={
                 hasUnreadDirects || hasUnreadGroups
-                  ? 'var(--unread)'
+                  ? theme.palette.other.unread
                   : desktopViewMode === 'chat'
                     ? theme.palette.text.primary
                     : theme.palette.text.secondary
diff --git a/src/components/Apps/AppsNavBarDesktop.tsx b/src/components/Apps/AppsNavBarDesktop.tsx
index 3c6d91c..a274abf 100644
--- a/src/components/Apps/AppsNavBarDesktop.tsx
+++ b/src/components/Apps/AppsNavBarDesktop.tsx
@@ -361,7 +361,7 @@ export const AppsNavBarDesktop = ({ disableBack }) => {
               height={20}
               sx={{
                 color: isSelectedAppPinned
-                  ? 'var(--danger)'
+                  ? theme.palette.other.danger
                   : theme.palette.text.primary,
               }}
             />
@@ -372,7 +372,7 @@ export const AppsNavBarDesktop = ({ disableBack }) => {
                 fontSize: '12px',
                 fontWeight: 600,
                 color: isSelectedAppPinned
-                  ? 'var(--danger)'
+                  ? theme.palette.other.danger
                   : theme.palette.text.primary,
               },
             }}
diff --git a/src/components/Chat/ChatDirect.tsx b/src/components/Chat/ChatDirect.tsx
index d9cebd7..a3973e1 100644
--- a/src/components/Chat/ChatDirect.tsx
+++ b/src/components/Chat/ChatDirect.tsx
@@ -690,7 +690,8 @@ export const ChatDirect = ({
               <Typography
                 sx={{
                   fontSize: '12px',
-                  color: messageSize > 4000 ? 'var(--danger)' : 'unset',
+                  color:
+                    messageSize > 4000 ? theme.palette.other.danger : 'unset',
                 }}
               >{`Your message size is of ${messageSize} bytes out of a maximum of 4000`}</Typography>
             </Box>
diff --git a/src/components/Chat/ChatGroup.tsx b/src/components/Chat/ChatGroup.tsx
index 503ec3a..154427d 100644
--- a/src/components/Chat/ChatGroup.tsx
+++ b/src/components/Chat/ChatGroup.tsx
@@ -1118,7 +1118,8 @@ export const ChatGroup = ({
                 <Typography
                   sx={{
                     fontSize: '12px',
-                    color: messageSize > 4000 ? 'var(--danger)' : 'unset',
+                    color:
+                      messageSize > 4000 ? theme.palette.other.danger : 'unset',
                   }}
                 >{`Your message size is of ${messageSize} bytes out of a maximum of 4000`}</Typography>
               </Box>
diff --git a/src/components/Chat/ChatList.tsx b/src/components/Chat/ChatList.tsx
index 94cd551..56acbc7 100644
--- a/src/components/Chat/ChatList.tsx
+++ b/src/components/Chat/ChatList.tsx
@@ -390,7 +390,7 @@ export const ChatList = ({
           <button
             onClick={() => scrollToBottom()}
             style={{
-              backgroundColor: 'var(--unread)',
+              backgroundColor: theme.palette.other.unread,
               border: 'none',
               borderRadius: '20px',
               bottom: 20,
diff --git a/src/components/Chat/ChatOptions.tsx b/src/components/Chat/ChatOptions.tsx
index 49d5150..4f92f53 100644
--- a/src/components/Chat/ChatOptions.tsx
+++ b/src/components/Chat/ChatOptions.tsx
@@ -714,7 +714,7 @@ export const ChatOptions = ({
                     mentionList?.length > 0 &&
                     (!lastMentionTimestamp ||
                       lastMentionTimestamp < mentionList[0]?.timestamp)
-                      ? 'var(--unread)'
+                      ? theme.palette.other.unread
                       : theme.palette.text.primary,
                 }}
               />
diff --git a/src/components/Chat/GroupAnnouncements.tsx b/src/components/Chat/GroupAnnouncements.tsx
index 7f22d76..71e1613 100644
--- a/src/components/Chat/GroupAnnouncements.tsx
+++ b/src/components/Chat/GroupAnnouncements.tsx
@@ -674,7 +674,7 @@ export const GroupAnnouncements = ({
                 }}
                 style={{
                   alignSelf: 'center',
-                  background: 'var(--danger)',
+                  background: theme.palette.other.danger,
                   cursor: isSending ? 'default' : 'pointer',
                   flexShrink: 0,
                   fontSize: '14px',
diff --git a/src/components/Desktop/DesktopFooter.tsx b/src/components/Desktop/DesktopFooter.tsx
index 47a8181..3bef9cc 100644
--- a/src/components/Desktop/DesktopFooter.tsx
+++ b/src/components/Desktop/DesktopFooter.tsx
@@ -122,7 +122,7 @@ export const DesktopFooter = ({
               height={30}
               color={
                 hasUnreadGroups
-                  ? 'var(--danger)'
+                  ? theme.palette.other.danger
                   : isGroups
                     ? theme.palette.text.primary
                     : theme.palette.text.secondary
@@ -141,7 +141,7 @@ export const DesktopFooter = ({
               height={30}
               color={
                 hasUnreadDirects
-                  ? 'var(--danger)'
+                  ? theme.palette.other.danger
                   : isDirects
                     ? theme.palette.text.primary
                     : theme.palette.text.secondary
diff --git a/src/components/Desktop/DesktopHeader.tsx b/src/components/Desktop/DesktopHeader.tsx
index d04a803..0b6cff8 100644
--- a/src/components/Desktop/DesktopHeader.tsx
+++ b/src/components/Desktop/DesktopHeader.tsx
@@ -104,14 +104,14 @@ export const DesktopHeader = ({
         {isPrivate && (
           <LockIcon
             sx={{
-              color: 'var(--green)',
+              color: theme.palette.other.positive,
             }}
           />
         )}
         {isPrivate === false && (
           <NoEncryptionGmailerrorredIcon
             sx={{
-              color: 'var(--danger)',
+              color: theme.palette.other.danger,
             }}
           />
         )}
@@ -155,7 +155,7 @@ export const DesktopHeader = ({
               width={20}
               color={
                 isUnread
-                  ? 'var(--unread)'
+                  ? theme.palette.other.unread
                   : isAnnouncement
                     ? theme.palette.text.primary
                     : theme.palette.text.secondary
@@ -183,7 +183,7 @@ export const DesktopHeader = ({
               width={20}
               color={
                 isUnreadChat
-                  ? 'var(--unread)'
+                  ? theme.palette.other.unread
                   : isChat
                     ? theme.palette.text.primary
                     : theme.palette.text.secondary
diff --git a/src/components/DesktopSideBar.tsx b/src/components/DesktopSideBar.tsx
index f1ccf22..616a128 100644
--- a/src/components/DesktopSideBar.tsx
+++ b/src/components/DesktopSideBar.tsx
@@ -103,7 +103,7 @@ export const DesktopSideBar = ({
         <IconWrapper
           color={
             hasUnreadDirects || hasUnreadGroups
-              ? 'var(--unread)'
+              ? theme.palette.other.unread
               : desktopViewMode === 'chat'
                 ? theme.palette.text.primary
                 : theme.palette.text.secondary
@@ -115,7 +115,7 @@ export const DesktopSideBar = ({
             height={30}
             color={
               hasUnreadDirects || hasUnreadGroups
-                ? 'var(--unread)'
+                ? theme.palette.other.unread
                 : desktopViewMode === 'chat'
                   ? theme.palette.text.primary
                   : theme.palette.text.secondary
diff --git a/src/components/Embeds/AttachmentEmbed.tsx b/src/components/Embeds/AttachmentEmbed.tsx
index 6fde16e..ebc5625 100644
--- a/src/components/Embeds/AttachmentEmbed.tsx
+++ b/src/components/Embeds/AttachmentEmbed.tsx
@@ -225,7 +225,7 @@ export const AttachmentCard = ({
             <Typography
               sx={{
                 fontSize: '14px',
-                color: 'var(--danger)',
+                color: theme.palette.other.danger,
               }}
             >
               {errorMsg}
diff --git a/src/components/Embeds/ImageEmbed.tsx b/src/components/Embeds/ImageEmbed.tsx
index 24cab97..ec25e25 100644
--- a/src/components/Embeds/ImageEmbed.tsx
+++ b/src/components/Embeds/ImageEmbed.tsx
@@ -160,7 +160,7 @@ export const ImageCard = ({
             <Typography
               sx={{
                 fontSize: '14px',
-                color: 'var(--danger)',
+                color: theme.palette.other.danger,
               }}
             >
               {errorMsg}
diff --git a/src/components/Embeds/PollEmbed.tsx b/src/components/Embeds/PollEmbed.tsx
index 4adda15..8ca2fd4 100644
--- a/src/components/Embeds/PollEmbed.tsx
+++ b/src/components/Embeds/PollEmbed.tsx
@@ -220,7 +220,7 @@ export const PollCard = ({
             <Typography
               sx={{
                 fontSize: '14px',
-                color: 'var(--danger)',
+                color: theme.palette.other.danger,
               }}
             >
               {errorMsg}
diff --git a/src/components/GeneralNotifications.tsx b/src/components/GeneralNotifications.tsx
index 3e9cd02..c7a6072 100644
--- a/src/components/GeneralNotifications.tsx
+++ b/src/components/GeneralNotifications.tsx
@@ -76,7 +76,7 @@ export const GeneralNotifications = ({ address }) => {
           <NotificationsIcon
             sx={{
               color: hasNewPayment
-                ? 'var(--unread)'
+                ? theme.palette.other.unread
                 : theme.palette.text.secondary,
             }}
           />
diff --git a/src/components/GlobalActions/JoinGroup.tsx b/src/components/GlobalActions/JoinGroup.tsx
index 016959e..58ff5ed 100644
--- a/src/components/GlobalActions/JoinGroup.tsx
+++ b/src/components/GlobalActions/JoinGroup.tsx
@@ -230,7 +230,7 @@ export const JoinGroup = ({ memberGroups }) => {
           >
             <CustomButtonAccept
               color="black"
-              bgColor="var(--green)"
+              bgColor={theme.palette.other.positive}
               sx={{
                 minWidth: '102px',
                 height: '45px',
@@ -244,7 +244,7 @@ export const JoinGroup = ({ memberGroups }) => {
 
           <CustomButtonAccept
             color="black"
-            bgColor="var(--danger)"
+            bgColor={theme.palette.other.danger}
             sx={{
               minWidth: '102px',
               height: '45px',
diff --git a/src/components/Group/AddGroupList.tsx b/src/components/Group/AddGroupList.tsx
index efc7dbf..3030c55 100644
--- a/src/components/Group/AddGroupList.tsx
+++ b/src/components/Group/AddGroupList.tsx
@@ -6,6 +6,7 @@ import {
   Popover,
   TextField,
   Typography,
+  useTheme,
 } from '@mui/material';
 import {
   useCallback,
@@ -45,7 +46,7 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
   const [inputValue, setInputValue] = useState('');
   const [filteredItems, setFilteredItems] = useState(groups);
   const [isLoading, setIsLoading] = useState(false);
-
+  const theme = useTheme();
   const handleFilter = useCallback(
     (query) => {
       if (query) {
@@ -254,14 +255,14 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
                 {group?.isOpen === false && (
                   <LockIcon
                     sx={{
-                      color: 'var(--green)',
+                      color: theme.palette.other.positive,
                     }}
                   />
                 )}
                 {group?.isOpen === true && (
                   <NoEncryptionGmailerrorredIcon
                     sx={{
-                      color: 'var(--danger)',
+                      color: theme.palette.other.danger,
                     }}
                   />
                 )}
diff --git a/src/components/Group/Forum/GroupMail.tsx b/src/components/Group/Forum/GroupMail.tsx
index d6a3700..60bfd12 100644
--- a/src/components/Group/Forum/GroupMail.tsx
+++ b/src/components/Group/Forum/GroupMail.tsx
@@ -60,7 +60,7 @@ import { SortIcon } from '../../../assets/Icons/SortIcon';
 import { CustomButton } from '../../../styles/App-styles';
 
 const filterOptions = ['Recently active', 'Newest', 'Oldest'];
-
+import CheckIcon from '@mui/icons-material/Check';
 export const threadIdentifier = 'DOCUMENT';
 
 export const GroupMail = ({
@@ -606,13 +606,19 @@ export const GroupMail = ({
                   }}
                   sx={{
                     backgroundColor:
-                      filterMode === filter ? 'rgba(74, 158, 244, 1)' : 'unset',
+                      filterMode === filter
+                        ? theme.palette.action.selected
+                        : 'unset',
                   }}
                   key={filter}
                 >
                   <InstanceListContainerRowCheck>
                     {filter === filterMode && (
-                      <InstanceListContainerRowCheckIcon src={CheckSVG} />
+                      <CheckIcon
+                        sx={{
+                          color: theme.palette.text.primary,
+                        }}
+                      />
                     )}
                   </InstanceListContainerRowCheck>
                   <InstanceListContainerRowMain>
diff --git a/src/components/Group/Forum/Mail-styles.ts b/src/components/Group/Forum/Mail-styles.ts
index 6fc12de..85cbfe2 100644
--- a/src/components/Group/Forum/Mail-styles.ts
+++ b/src/components/Group/Forum/Mail-styles.ts
@@ -1,16 +1,6 @@
 import { Typography, Box } from '@mui/material';
 import { styled } from '@mui/system';
 
-export const InstanceContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  width: '100%',
-  backgroundColor: 'var(--color-instance)',
-  height: '59px',
-  flexShrink: 0,
-  justifyContent: 'space-between',
-}));
-
 export const MailContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
@@ -161,24 +151,20 @@ export const InstanceP = styled(Typography)(({ theme }) => ({
   fontWeight: 500,
 }));
 
-export const InstanceListParent = styled(Box)`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-height: 246px;
-  max-height: 325px;
-  width: 425px;
-  padding: 10px 0px 7px 0px;
-  background-color: var(--color-instance-popover-bg);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-`;
-
-export const InstanceListHeader = styled(Box)`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  background-color: var(--color-instance-popover-bg);
-`;
+export const InstanceListParent = styled(Typography)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '425px', // only one width now
+  minHeight: '246px',
+  maxHeight: '325px',
+  padding: '10px 0px 7px 0px',
+  border: '1px solid rgba(0, 0, 0, 0.1)',
+}));
+export const InstanceListHeader = styled(Typography)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+}));
 
 export const InstanceFooter = styled(Box)`
   display: flex;
@@ -242,7 +228,7 @@ export const InstanceListContainerRow = styled(Box)(({ theme }) => ({
   cursor: 'pointer',
   transition: '0.2s background',
   '&:hover': {
-    background: 'rgba(67, 68, 72, 1)',
+    background: theme.palette.action.hover,
   },
   flexShrink: 0,
 }));
diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx
index 4e04b02..5009a01 100644
--- a/src/components/Group/Group.tsx
+++ b/src/components/Group/Group.tsx
@@ -1582,7 +1582,7 @@ export const Group = ({
             <IconWrapper
               color={
                 groupChatHasUnread || groupsAnnHasUnread
-                  ? 'var(--unread)'
+                  ? theme.palette.other.unread
                   : desktopSideView === 'groups'
                     ? theme.palette.text.primary
                     : theme.palette.text.secondary
@@ -1595,7 +1595,7 @@ export const Group = ({
                 height={24}
                 color={
                   groupChatHasUnread || groupsAnnHasUnread
-                    ? 'var(--unread)'
+                    ? theme.palette.other.unread
                     : desktopSideView === 'groups'
                       ? theme.palette.text.primary
                       : theme.palette.text.secondary
@@ -1612,7 +1612,7 @@ export const Group = ({
               customWidth="75px"
               color={
                 directChatHasUnread
-                  ? 'var(--unread)'
+                  ? theme.palette.other.unread
                   : desktopSideView === 'directs'
                     ? theme.palette.text.primary
                     : theme.palette.text.secondary
@@ -1624,7 +1624,7 @@ export const Group = ({
                 height={24}
                 color={
                   directChatHasUnread
-                    ? 'var(--unread)'
+                    ? theme.palette.other.unread
                     : desktopSideView === 'directs'
                       ? theme.palette.text.primary
                       : theme.palette.text.secondary
@@ -1745,7 +1745,7 @@ export const Group = ({
                         direct?.timestamp) && (
                       <MarkChatUnreadIcon
                         sx={{
-                          color: 'var(--unread)',
+                          color: theme.palette.other.unread,
                         }}
                       />
                     )}
@@ -1812,7 +1812,7 @@ export const Group = ({
             <IconWrapper
               color={
                 groupChatHasUnread || groupsAnnHasUnread
-                  ? 'var(--unread)'
+                  ? theme.palette.other.unread
                   : desktopSideView === 'groups'
                     ? theme.palette.text.primary
                     : theme.palette.text.secondary
@@ -1825,7 +1825,7 @@ export const Group = ({
                 height={24}
                 color={
                   groupChatHasUnread || groupsAnnHasUnread
-                    ? 'var(--unread)'
+                    ? theme.palette.other.unread
                     : desktopSideView === 'groups'
                       ? theme.palette.text.primary
                       : theme.palette.text.secondary
@@ -1842,7 +1842,7 @@ export const Group = ({
               customWidth="75px"
               color={
                 directChatHasUnread
-                  ? 'var(--unread)'
+                  ? theme.palette.other.unread
                   : desktopSideView === 'directs'
                     ? theme.palette.text.primary
                     : theme.palette.text.secondary
@@ -1854,7 +1854,7 @@ export const Group = ({
                 height={24}
                 color={
                   directChatHasUnread
-                    ? 'var(--unread)'
+                    ? theme.palette.other.unread
                     : desktopSideView === 'directs'
                       ? theme.palette.text.primary
                       : theme.palette.text.secondary
@@ -1959,7 +1959,7 @@ export const Group = ({
                   }/qortal_avatar?async=true`} /> */}
                           <LockIcon
                             sx={{
-                              color: 'var(--green)',
+                              color: theme.palette.other.positive,
                             }}
                           />
                         </Box>
@@ -1977,7 +1977,7 @@ export const Group = ({
                         >
                           <NoEncryptionGmailerrorredIcon
                             sx={{
-                              color: 'var(--danger)',
+                              color: theme.palette.other.danger,
                             }}
                           />
                         </Box>
@@ -2018,7 +2018,7 @@ export const Group = ({
                       !groupAnnouncements[group?.groupId]?.seentimestamp && (
                         <CampaignIcon
                           sx={{
-                            color: 'var(--unread)',
+                            color: theme.palette.other.unread,
                             marginRight: '5px',
                           }}
                         />
@@ -2034,7 +2034,7 @@ export const Group = ({
                           group?.timestamp) && (
                         <MarkChatUnreadIcon
                           sx={{
-                            color: 'var(--unread)',
+                            color: theme.palette.other.unread,
                           }}
                         />
                       )}
diff --git a/src/components/Group/ListOfGroupPromotions.tsx b/src/components/Group/ListOfGroupPromotions.tsx
index 7942dd2..598f828 100644
--- a/src/components/Group/ListOfGroupPromotions.tsx
+++ b/src/components/Group/ListOfGroupPromotions.tsx
@@ -717,14 +717,14 @@ export const ListOfGroupPromotions = () => {
                                 {promotion?.isOpen === false && (
                                   <LockIcon
                                     sx={{
-                                      color: 'var(--green)',
+                                      color: theme.palette.other.positive,
                                     }}
                                   />
                                 )}
                                 {promotion?.isOpen === true && (
                                   <NoEncryptionGmailerrorredIcon
                                     sx={{
-                                      color: 'var(--danger)',
+                                      color: theme.palette.other.danger,
                                     }}
                                   />
                                 )}
diff --git a/src/components/Group/QMailMessages.tsx b/src/components/Group/QMailMessages.tsx
index 238a2aa..624d371 100644
--- a/src/components/Group/QMailMessages.tsx
+++ b/src/components/Group/QMailMessages.tsx
@@ -153,7 +153,9 @@ export const QMailMessages = ({ userName, userAddress }) => {
         </Typography>
         <MarkEmailUnreadIcon
           sx={{
-            color: anyUnread ? 'var(--unread)' : theme.palette.text.primary,
+            color: anyUnread
+              ? theme.palette.other.unread
+              : theme.palette.text.primary,
           }}
         />
         {isExpanded ? (
@@ -165,7 +167,9 @@ export const QMailMessages = ({ userName, userAddress }) => {
         ) : (
           <ExpandMoreIcon
             sx={{
-              color: anyUnread ? 'var(--unread)' : theme.palette.text.primary,
+              color: anyUnread
+                ? theme.palette.other.unread
+                : theme.palette.text.primary,
               marginLeft: 'auto',
             }}
           />
@@ -262,7 +266,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
                       isLessThanOneWeekOld(mail?.created) ? (
                         <MailIcon
                           sx={{
-                            color: 'var(--unread)',
+                            color: theme.palette.other.unread,
                           }}
                         />
                       ) : !lastEnteredTimestamp ? (
@@ -275,7 +279,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
                         isLessThanOneWeekOld(mail?.created) ? (
                         <MailIcon
                           sx={{
-                            color: 'var(--unread)',
+                            color: theme.palette.other.unread,
                           }}
                         />
                       ) : (
diff --git a/src/components/Group/UserListOfInvites.tsx b/src/components/Group/UserListOfInvites.tsx
index 58efd9a..c6bb8d3 100644
--- a/src/components/Group/UserListOfInvites.tsx
+++ b/src/components/Group/UserListOfInvites.tsx
@@ -5,6 +5,7 @@ import {
   ListItemText,
   Popover,
   Typography,
+  useTheme,
 } from '@mui/material';
 import { useContext, useEffect, useRef, useState } from 'react';
 import {
@@ -54,7 +55,7 @@ export const UserListOfInvites = ({
   const { txList, setTxList, show } = useContext(MyContext);
   const [invites, setInvites] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState(false);
-
+  const theme = useTheme();
   const [popoverAnchor, setPopoverAnchor] = useState(null); // Track which list item the popover is anchored to
   const [openPopoverIndex, setOpenPopoverIndex] = useState(null); // Track which list item has the popover open
   const listRef = useRef();
@@ -205,14 +206,14 @@ export const UserListOfInvites = ({
                 {invite?.isOpen === false && (
                   <LockIcon
                     sx={{
-                      color: 'var(--green)',
+                      color: theme.palette.other.positive,
                     }}
                   />
                 )}
                 {invite?.isOpen === true && (
                   <NoEncryptionGmailerrorredIcon
                     sx={{
-                      color: 'var(--danger)',
+                      color: theme.palette.other.danger,
                     }}
                   />
                 )}
diff --git a/src/components/Minting/Minting.tsx b/src/components/Minting/Minting.tsx
index 4c98fa1..552d39c 100644
--- a/src/components/Minting/Minting.tsx
+++ b/src/components/Minting/Minting.tsx
@@ -638,14 +638,14 @@ export const Minting = ({
               }}
               disabled={mintingAccounts?.length > 1}
               sx={{
-                backgroundColor: 'var(--green)',
+                backgroundColor: theme.palette.other.positive,
                 color: 'black',
                 fontWeight: 'bold',
                 opacity: 0.7,
                 maxWidth: '90%',
                 width: '200px',
                 '&:hover': {
-                  backgroundColor: 'var(--green)',
+                  backgroundColor: theme.palette.other.positive,
                   color: 'black',
                   opacity: 1,
                 },
@@ -702,14 +702,14 @@ export const Minting = ({
               <Button
                 size="small"
                 sx={{
-                  backgroundColor: 'var(--danger)',
+                  backgroundColor: theme.palette.other.danger,
                   color: theme.palette.text.primary,
                   fontWeight: 'bold',
                   maxWidth: '90%',
                   opacity: 0.7,
                   width: '200px',
                   '&:hover': {
-                    backgroundColor: 'var(--danger)',
+                    backgroundColor: theme.palette.other.danger,
                     color: theme.palette.text.primary,
                     opacity: 1,
                   },
@@ -763,13 +763,13 @@ export const Minting = ({
               <Button
                 size="small"
                 sx={{
-                  backgroundColor: 'var(--green)',
+                  backgroundColor: theme.palette.other.positive,
                   color: theme.palette.text.primary,
                   fontWeight: 'bold',
                   opacity: 0.7,
 
                   '&:hover': {
-                    backgroundColor: 'var(--green)',
+                    backgroundColor: theme.palette.other.positive,
                     color: 'black',
                     opacity: 1,
                   },
diff --git a/src/components/QMailStatus.tsx b/src/components/QMailStatus.tsx
index f62b346..c665145 100644
--- a/src/components/QMailStatus.tsx
+++ b/src/components/QMailStatus.tsx
@@ -43,7 +43,7 @@ export const QMailStatus = () => {
       {hasNewMail && (
         <div
           style={{
-            backgroundColor: 'var(--unread)',
+            backgroundColor: theme.palette.other.unread,
             borderRadius: '50%',
             height: '15px',
             outline: '1px solid white',
diff --git a/src/components/Save/Save.tsx b/src/components/Save/Save.tsx
index 413b9a5..a19efd2 100644
--- a/src/components/Save/Save.tsx
+++ b/src/components/Save/Save.tsx
@@ -321,12 +321,12 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
                 }}
                 variant="contained"
                 sx={{
-                  backgroundColor: 'var(--danger)',
+                  backgroundColor: theme.palette.other.danger,
                   color: 'black',
                   fontWeight: 'bold',
                   opacity: 0.7,
                   '&:hover': {
-                    backgroundColor: 'var(--danger)',
+                    backgroundColor: theme.palette.other.danger,
                     color: 'black',
                     opacity: 1,
                   },
@@ -393,12 +393,12 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
 
                     <LoadingButton
                       sx={{
-                        backgroundColor: 'var(--green)',
+                        backgroundColor: theme.palette.other.positive,
                         color: 'black',
                         opacity: 0.7,
                         fontWeight: 'bold',
                         '&:hover': {
-                          backgroundColor: 'var(--green)',
+                          backgroundColor: theme.palette.other.positive,
                           color: 'black',
                           opacity: 1,
                         },
@@ -432,12 +432,12 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
                             onClick={revertChanges}
                             variant="contained"
                             sx={{
-                              backgroundColor: 'var(--danger)',
+                              backgroundColor: theme.palette.other.danger,
                               color: 'black',
                               fontWeight: 'bold',
                               opacity: 0.7,
                               '&:hover': {
-                                backgroundColor: 'var(--danger)',
+                                backgroundColor: theme.palette.other.danger,
                                 color: 'black',
                                 opacity: 1,
                               },
@@ -503,12 +503,12 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
                         onClick={saveToQdn}
                         variant="contained"
                         sx={{
-                          backgroundColor: 'var(--danger)',
+                          backgroundColor: theme.palette.other.danger,
                           color: 'black',
                           fontWeight: 'bold',
                           opacity: 0.7,
                           '&:hover': {
-                            backgroundColor: 'var(--danger)',
+                            backgroundColor: theme.palette.other.danger,
                             color: 'black',
                             opacity: 1,
                           },
diff --git a/src/components/Theme/ThemeManager.tsx b/src/components/Theme/ThemeManager.tsx
index 3b2b711..2043eac 100644
--- a/src/components/Theme/ThemeManager.tsx
+++ b/src/components/Theme/ThemeManager.tsx
@@ -291,6 +291,24 @@ export default function ThemeManager() {
               'border.subtle',
               themeDraft[currentTab]?.border?.subtle
             )}
+            {renderColorPicker(
+              currentTab,
+              'Positive',
+              'other.positive',
+              themeDraft[currentTab]?.other?.positive
+            )}
+            {renderColorPicker(
+              currentTab,
+              'Danger',
+              'other.danger',
+              themeDraft[currentTab]?.other?.danger
+            )}
+            {renderColorPicker(
+              currentTab,
+              'Unread',
+              'other.unread',
+              themeDraft[currentTab]?.other?.unread
+            )}
           </Box>
         </DialogContent>
         <DialogActions>
diff --git a/src/styles/theme-dark.ts b/src/styles/theme-dark.ts
index d54a1c1..8929561 100644
--- a/src/styles/theme-dark.ts
+++ b/src/styles/theme-dark.ts
@@ -26,6 +26,11 @@ export const darkThemeOptions: ThemeOptions = {
       main: 'rgba(255, 255, 255, 0.12)',
       subtle: 'rgba(255, 255, 255, 0.08)',
     },
+    other: {
+      positive: 'rgb(94, 176, 73)',
+      danger: 'rgb(177, 70, 70)',
+      unread: 'rgb(66, 151, 226)',
+    },
   },
   components: {
     MuiCard: {
diff --git a/src/styles/theme-light.ts b/src/styles/theme-light.ts
index e66788f..15b1f8b 100644
--- a/src/styles/theme-light.ts
+++ b/src/styles/theme-light.ts
@@ -26,6 +26,11 @@ export const lightThemeOptions: ThemeOptions = {
       main: 'rgba(0, 0, 0, 0.12)',
       subtle: 'rgba(0, 0, 0, 0.08)',
     },
+    other: {
+      positive: 'rgb(94, 176, 73)',
+      danger: 'rgb(177, 70, 70)',
+      unread: 'rgb(66, 151, 226)',
+    },
   },
   components: {
     MuiCard: {
diff --git a/src/styles/theme.d.ts b/src/styles/theme.d.ts
index 762b526..e10c5c1 100644
--- a/src/styles/theme.d.ts
+++ b/src/styles/theme.d.ts
@@ -9,11 +9,21 @@ declare module '@mui/material/styles' {
       main: string;
       subtle: string;
     };
+    other: {
+      positive: string;
+      danger: string;
+      unread: string;
+    };
   }
   interface PaletteOptions {
     border?: {
       main?: string;
       subtle?: string;
     };
+    other?: {
+      positive?: string;
+      danger?: string;
+      unread?: string;
+    };
   }
 }