dark mode widget colors change

web/src/components/App/Sidebar.jsx

@@ -36,6 +36,7 @@ const Sidebar = ({ isDrawerOpen, setIsDonationDialogOpen, isOffline, isLoading }
           <ListItemIcon>
             <CreditCardIcon />
           </ListItemIcon>
+
           <ListItemText primary={t('Donate')} />
         </ListItem>
 

web/src/components/DialogTorrentDetailsContent/style.js

@@ -144,7 +144,7 @@ export const SectionTitle = styled.div`
   ${({
     color,
     theme: {
-      dialogTorrentDetailsContent: { fontColor },
+      dialogTorrentDetailsContent: { titleFontColor },
     },
   }) => css`
     ${({ mb }) => css`
@@ -153,7 +153,7 @@ export const SectionTitle = styled.div`
       font-weight: 300;
       line-height: 1;
       word-break: break-word;
-      color: ${color || fontColor};
+      color: ${color || titleFontColor};
 
       @media (max-width: 800px) {
         font-size: 25px;
@@ -223,7 +223,7 @@ export const WidgetFieldWrapper = styled.div`
 export const WidgetFieldTitle = styled.div`
   ${({
     theme: {
-      dialogTorrentDetailsContent: { fontColor },
+      dialogTorrentDetailsContent: { titleFontColor },
     },
   }) => css`
     grid-area: title;
@@ -232,7 +232,7 @@ export const WidgetFieldTitle = styled.div`
     font-size: 11px;
     margin-bottom: 2px;
     font-weight: 600;
-    color: ${fontColor};
+    color: ${titleFontColor};
   `}
 `
 
@@ -251,10 +251,15 @@ export const WidgetFieldIcon = styled.div`
   `}
 `
 export const WidgetFieldValue = styled.div`
-  ${({ bgColor }) => css`
+  ${({
+    bgColor,
+    theme: {
+      dialogTorrentDetailsContent: { widgetFontColor },
+    },
+  }) => css`
     grid-area: value;
     padding: 0 20px;
-    color: #fff;
+    color: ${widgetFontColor};
     font-size: 25px;
     background: ${bgColor};
     border-radius: 0 5px 5px 0;

web/src/components/DialogTorrentDetailsContent/widgets/index.jsx

@@ -11,16 +11,19 @@ import { getPeerString, humanizeSize } from 'utils/Utils'
 import { useTranslation } from 'react-i18next'
 import { GETTING_INFO, IN_DB, CLOSED, PRELOAD, WORKING } from 'torrentStates'
 
-import StatisticsField from './StatisticsField'
+import StatisticsField from '../StatisticsField'
+import useGetWidgetColors from './useGetWidgetColors'
 
 export const DownlodSpeedWidget = ({ data }) => {
   const { t } = useTranslation()
+  const { iconBGColor, valueBGColor } = useGetWidgetColors('downloadSpeed')
+
   return (
     <StatisticsField
       title={t('DownloadSpeed')}
       value={humanizeSize(data) || '0 B'}
-      iconBg='#118f00'
+      iconBg={iconBGColor}
-      valueBg='#13a300'
+      valueBg={valueBGColor}
       icon={ArrowDownwardIcon}
     />
   )
@@ -28,12 +31,14 @@ export const DownlodSpeedWidget = ({ data }) => {
 
 export const UploadSpeedWidget = ({ data }) => {
   const { t } = useTranslation()
+  const { iconBGColor, valueBGColor } = useGetWidgetColors('uploadSpeed')
+
   return (
     <StatisticsField
       title={t('UploadSpeed')}
       value={humanizeSize(data) || '0 B'}
-      iconBg='#0146ad'
+      iconBg={iconBGColor}
-      valueBg='#0058db'
+      valueBg={valueBGColor}
       icon={ArrowUpwardIcon}
     />
   )
@@ -41,12 +46,14 @@ export const UploadSpeedWidget = ({ data }) => {
 
 export const PeersWidget = ({ data }) => {
   const { t } = useTranslation()
+  const { iconBGColor, valueBGColor } = useGetWidgetColors('peers')
+
   return (
     <StatisticsField
       title={t('Peers')}
       value={getPeerString(data) || '[0] 0 / 0'}
-      iconBg='#cdc118'
+      iconBg={iconBGColor}
-      valueBg='#d8cb18'
+      valueBg={valueBGColor}
       icon={SwapVerticalCircleIcon}
     />
   )
@@ -54,17 +61,29 @@ export const PeersWidget = ({ data }) => {
 
 export const PiecesCountWidget = ({ data }) => {
   const { t } = useTranslation()
-  return <StatisticsField title={t('PiecesCount')} value={data} iconBg='#b6c95e' valueBg='#c0d076' icon={WidgetsIcon} />
+  const { iconBGColor, valueBGColor } = useGetWidgetColors('piecesCount')
+
+  return (
+    <StatisticsField
+      title={t('PiecesCount')}
+      value={data}
+      iconBg={iconBGColor}
+      valueBg={valueBGColor}
+      icon={WidgetsIcon}
+    />
+  )
 }
 
 export const PiecesLengthWidget = ({ data }) => {
   const { t } = useTranslation()
+  const { iconBGColor, valueBGColor } = useGetWidgetColors('piecesLength')
+
   return (
     <StatisticsField
       title={t('PiecesLength')}
       value={humanizeSize(data)}
-      iconBg='#0982c8'
+      iconBg={iconBGColor}
-      valueBg='#098cd7'
+      valueBg={valueBGColor}
       icon={PhotoSizeSelectSmallIcon}
     />
   )
@@ -80,13 +99,14 @@ export const StatusWidget = ({ stat }) => {
     [CLOSED]: t('TorrentClosed'),
     [IN_DB]: t('TorrentInDb'),
   }
+  const { iconBGColor, valueBGColor } = useGetWidgetColors('status')
 
   return (
     <StatisticsField
       title={t('TorrentStatus')}
       value={values[stat]}
-      iconBg='#aea25b'
+      iconBg={iconBGColor}
-      valueBg='#b4aa6e'
+      valueBg={valueBGColor}
       icon={BuildIcon}
     />
   )
@@ -94,12 +114,14 @@ export const StatusWidget = ({ stat }) => {
 
 export const SizeWidget = ({ data }) => {
   const { t } = useTranslation()
+  const { iconBGColor, valueBGColor } = useGetWidgetColors('size')
+
   return (
     <StatisticsField
       title={t('TorrentSize')}
       value={humanizeSize(data)}
-      iconBg='#9b01ad'
+      iconBg={iconBGColor}
-      valueBg='#ac03bf'
+      valueBg={valueBGColor}
       icon={ViewAgendaIcon}
     />
   )

web/src/components/DialogTorrentDetailsContent/widgets/useGetWidgetColors.jsx

@@ -0,0 +1,33 @@
+import { DarkModeContext } from 'components/App'
+import { useContext } from 'react'
+import { THEME_MODES } from 'style/materialUISetup'
+
+const { LIGHT, DARK } = THEME_MODES
+
+const colors = {
+  light: {
+    downloadSpeed: { iconBGColor: '#118f00', valueBGColor: '#13a300' },
+    uploadSpeed: { iconBGColor: '#0146ad', valueBGColor: '#0058db' },
+    peers: { iconBGColor: '#cdc118', valueBGColor: '#d8cb18' },
+    piecesCount: { iconBGColor: '#b6c95e', valueBGColor: '#c0d076' },
+    piecesLength: { iconBGColor: '#0982c8', valueBGColor: '#098cd7' },
+    status: { iconBGColor: '#aea25b', valueBGColor: '#b4aa6e' },
+    size: { iconBGColor: '#9b01ad', valueBGColor: '#ac03bf' },
+  },
+  dark: {
+    downloadSpeed: { iconBGColor: '#0c6600', valueBGColor: '#0d7000' },
+    uploadSpeed: { iconBGColor: '#003f9e', valueBGColor: '#0047b3' },
+    peers: { iconBGColor: '#a69c11', valueBGColor: '#b4a913' },
+    piecesCount: { iconBGColor: '#8da136', valueBGColor: '#99ae3d' },
+    piecesLength: { iconBGColor: '#07659c', valueBGColor: '#0872af' },
+    status: { iconBGColor: '#938948', valueBGColor: '#9f9450' },
+    size: { iconBGColor: '#81008f', valueBGColor: '#9102a1' },
+  },
+}
+
+export default function useGetWidgetColors(widgetName) {
+  const { isDarkMode } = useContext(DarkModeContext)
+  const widgetColors = colors[isDarkMode ? DARK : LIGHT][widgetName]
+
+  return widgetColors
+}

web/src/style/colors.js

@@ -19,7 +19,8 @@ export const themeColors = {
       gradientStartColor: '#e4f6ed',
       gradientEndColor: '#b5dec9',
       chacheSectionBGColor: '#88cdaa',
-      fontColor: '#000',
+      widgetFontColor: '#fff',
+      titleFontColor: '#000',
       subNameFontColor: '#7c7b7c',
       torrentFilesSectionBGColor: '#f1eff3',
     },
@@ -65,7 +66,8 @@ export const themeColors = {
       gradientStartColor: '#656f76',
       gradientEndColor: '#545a5e',
       chacheSectionBGColor: '#3c4244',
-      fontColor: '#f1eff3',
+      widgetFontColor: rgba('#fff', 0.8),
+      titleFontColor: '#f1eff3',
       subNameFontColor: '#dee3e5',
       torrentFilesSectionBGColor: rgba('#545a5e', 0.9),
     },