add css vars to theme palette

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>

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>

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"

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

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

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,
               },
             }}

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>

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>

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,

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,
                 }}
               />

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',

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

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

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

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}

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}

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}

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,
             }}
           />

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',

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,
                     }}
                   />
                 )}

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>

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)`
+export const InstanceListParent = styled(Typography)(({ theme }) => ({
-  display: flex;
+  display: 'flex',
-  flex-direction: column;
+  flexDirection: 'column',
-  width: 100%;
+  width: '425px', // only one width now
-  min-height: 246px;
+  minHeight: '246px',
-  max-height: 325px;
+  maxHeight: '325px',
-  width: 425px;
+  padding: '10px 0px 7px 0px',
-  padding: 10px 0px 7px 0px;
+  border: '1px solid rgba(0, 0, 0, 0.1)',
-  background-color: var(--color-instance-popover-bg);
+}));
-  border: 1px solid rgba(0, 0, 0, 0.1);
+export const InstanceListHeader = styled(Typography)(({ theme }) => ({
-`;
+  display: 'flex',
-
+  flexDirection: 'column',
-export const InstanceListHeader = styled(Box)`
+  width: '100%',
-  display: flex;
+}));
-  flex-direction: column;
-  width: 100%;
-  background-color: var(--color-instance-popover-bg);
-`;
 
 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,
 }));

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,
                           }}
                         />
                       )}

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,
                                     }}
                                   />
                                 )}

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,
                           }}
                         />
                       ) : (

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,
                     }}
                   />
                 )}

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,
                   },

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',

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,
                           },

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>

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: {

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: {

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;
+    };
   }
 }