added dark theme

2025-12-19 21:46:11 +05:00 · 2021-06-26 21:31:43 +03:00
parent d5458a112e
commit 72ff729ee8
24 changed files with 950 additions and 587 deletions
--- a/web/src/components/About.jsx
+++ b/web/src/components/About.jsx
@@ -11,13 +11,10 @@ import ListItemIcon from '@material-ui/core/ListItemIcon'
 import ListItemText from '@material-ui/core/ListItemText'
 import { useTranslation } from 'react-i18next'
 import { echoHost } from 'utils/Hosts'
-import { ThemeProvider } from '@material-ui/core/styles'
-import { mainColors } from 'style/colors'
+import { ThemeProvider, useTheme } from '@material-ui/core/styles'

 import { lightTheme } from '../style/materialUISetup'

-const { primary } = mainColors
-
 export default function AboutDialog() {
  const { t } = useTranslation()
  const [open, setOpen] = useState(false)
@@ -26,6 +23,8 @@ export default function AboutDialog() {
    axios.get(echoHost()).then(({ data }) => setTorrServerVersion(data))
  }, [])

+  const primary = useTheme().palette.primary.main
+
  return (
    <div>
      <ListItem button key='Settings' onClick={() => setOpen(true)}>
--- a/web/src/components/Add/AddDialog.jsx
+++ b/web/src/components/Add/AddDialog.jsx
@@ -12,8 +12,6 @@ import usePreviousState from 'utils/usePreviousState'
 import { useQuery } from 'react-query'
 import { getTorrents } from 'utils/Utils'
 import parseTorrent from 'parse-torrent'
-import { ThemeProvider } from '@material-ui/core/styles'
-import { lightTheme } from 'style/materialUISetup'

 import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers'
 import { ButtonWrapper, Content, Header } from './style'
@@ -221,71 +219,69 @@ export default function AddDialog({
  }

  return (
-    <ThemeProvider theme={lightTheme}>
-      <Dialog
-        open
-        onClose={handleClose}
-        aria-labelledby='form-dialog-title'
-        fullScreen={fullScreen}
-        fullWidth
-        maxWidth='md'
-      >
-        <Header>{t(isEditMode ? 'EditTorrent' : 'AddNewTorrent')}</Header>
+    <Dialog
+      open
+      onClose={handleClose}
+      aria-labelledby='form-dialog-title'
+      fullScreen={fullScreen}
+      fullWidth
+      maxWidth='md'
+    >
+      <Header>{t(isEditMode ? 'EditTorrent' : 'AddNewTorrent')}</Header>

-        <Content isEditMode={isEditMode}>
-          {!isEditMode && (
-            <LeftSideComponent
-              setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
-              setSelectedFile={setSelectedFile}
-              torrentSource={torrentSource}
-              setTorrentSource={setTorrentSource}
-              selectedFile={selectedFile}
-            />
-          )}
-
-          <RightSideComponent
-            originalTorrentTitle={originalTorrentTitle}
-            setTitle={setTitle}
-            setPosterUrl={setPosterUrl}
-            setIsPosterUrlCorrect={setIsPosterUrlCorrect}
+      <Content isEditMode={isEditMode}>
+        {!isEditMode && (
+          <LeftSideComponent
            setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
-            setPosterList={setPosterList}
-            isTorrentSourceCorrect={isTorrentSourceCorrect}
-            isHashAlreadyExists={isHashAlreadyExists}
-            title={title}
-            parsedTitle={parsedTitle}
-            posterUrl={posterUrl}
-            isPosterUrlCorrect={isPosterUrlCorrect}
-            posterList={posterList}
-            currentLang={currentLang}
-            posterSearchLanguage={posterSearchLanguage}
-            setPosterSearchLanguage={setPosterSearchLanguage}
-            posterSearch={posterSearch}
-            removePoster={removePoster}
-            updateTitleFromSource={updateTitleFromSource}
+            setSelectedFile={setSelectedFile}
            torrentSource={torrentSource}
-            isCustomTitleEnabled={isCustomTitleEnabled}
-            setIsCustomTitleEnabled={setIsCustomTitleEnabled}
-            isEditMode={isEditMode}
+            setTorrentSource={setTorrentSource}
+            selectedFile={selectedFile}
          />
-        </Content>
+        )}

-        <ButtonWrapper>
-          <Button onClick={handleClose} color='primary' variant='outlined'>
-            {t('Cancel')}
-          </Button>
+        <RightSideComponent
+          originalTorrentTitle={originalTorrentTitle}
+          setTitle={setTitle}
+          setPosterUrl={setPosterUrl}
+          setIsPosterUrlCorrect={setIsPosterUrlCorrect}
+          setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
+          setPosterList={setPosterList}
+          isTorrentSourceCorrect={isTorrentSourceCorrect}
+          isHashAlreadyExists={isHashAlreadyExists}
+          title={title}
+          parsedTitle={parsedTitle}
+          posterUrl={posterUrl}
+          isPosterUrlCorrect={isPosterUrlCorrect}
+          posterList={posterList}
+          currentLang={currentLang}
+          posterSearchLanguage={posterSearchLanguage}
+          setPosterSearchLanguage={setPosterSearchLanguage}
+          posterSearch={posterSearch}
+          removePoster={removePoster}
+          updateTitleFromSource={updateTitleFromSource}
+          torrentSource={torrentSource}
+          isCustomTitleEnabled={isCustomTitleEnabled}
+          setIsCustomTitleEnabled={setIsCustomTitleEnabled}
+          isEditMode={isEditMode}
+        />
+      </Content>

-          <Button
-            variant='contained'
-            style={{ minWidth: '110px' }}
-            disabled={!torrentSource || (isHashAlreadyExists && !isEditMode) || !isTorrentSourceCorrect}
-            onClick={handleSave}
-            color='primary'
-          >
-            {isSaving ? <CircularProgress style={{ color: 'white' }} size={20} /> : t(isEditMode ? 'Save' : 'Add')}
-          </Button>
-        </ButtonWrapper>
-      </Dialog>
-    </ThemeProvider>
+      <ButtonWrapper>
+        <Button onClick={handleClose} color='primary' variant='outlined'>
+          {t('Cancel')}
+        </Button>
+
+        <Button
+          variant='contained'
+          style={{ minWidth: '110px' }}
+          disabled={!torrentSource || (isHashAlreadyExists && !isEditMode) || !isTorrentSourceCorrect}
+          onClick={handleSave}
+          color='primary'
+        >
+          {isSaving ? <CircularProgress style={{ color: 'white' }} size={20} /> : t(isEditMode ? 'Save' : 'Add')}
+        </Button>
+      </ButtonWrapper>
+    </Dialog>
  )
 }
--- a/web/src/components/Add/RightSideComponent.jsx
+++ b/web/src/components/Add/RightSideComponent.jsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { NoImageIcon } from 'icons'
-import { IconButton, InputAdornment, TextField } from '@material-ui/core'
+import { IconButton, InputAdornment, TextField, useTheme } from '@material-ui/core'
 import { CheckBox as CheckBoxIcon } from '@material-ui/icons'

 import {
@@ -41,6 +41,7 @@ export default function RightSideComponent({
  isEditMode,
 }) {
  const { t } = useTranslation()
+  const primary = useTheme().palette.primary.main

  const handleTitleChange = ({ target: { value } }) => setTitle(value)
  const handlePosterUrlChange = ({ target: { value } }) => {
@@ -91,7 +92,7 @@ export default function RightSideComponent({
                        setIsUserInteractedWithPoster(false)
                      }}
                    >
-                      <CheckBoxIcon style={{ color: isCustomTitleEnabled ? 'green' : 'gray' }} />
+                      <CheckBoxIcon style={{ color: isCustomTitleEnabled ? primary : 'gray' }} />
                    </IconButton>
                  </InputAdornment>
                ),
--- a/web/src/components/Add/style.js
+++ b/web/src/components/Add/style.js
@@ -15,14 +15,20 @@ export const Header = styled.div`
 `

 export const Content = styled.div`
-  ${({ isEditMode }) => css`
+  ${({
+    isEditMode,
+    theme: {
+      addDialog: { gradientStartColor, gradientEndColor, fontColor },
+    },
+  }) => css`
    height: 550px;
-    background: linear-gradient(145deg, #e4f6ed, #b5dec9);
+    background: linear-gradient(145deg, ${gradientStartColor}, ${gradientEndColor});
    flex: 1;
    display: grid;
    grid-template-columns: repeat(${isEditMode ? '1' : '2'}, 1fr);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    overflow: auto;
+    color: ${fontColor};

    @media (max-width: 540px) {
      ${'' /* Just for bug fixing on small screens */}
@@ -44,7 +50,14 @@ export const RightSide = styled.div`
 `

 export const RightSideContainer = styled.div`
-  ${({ isHidden, notificationMessage, isError }) => css`
+  ${({
+    isHidden,
+    notificationMessage,
+    isError,
+    theme: {
+      addDialog: { notificationErrorBGColor, notificationSuccessBGColor },
+    },
+  }) => css`
    height: 530px;

    ${notificationMessage &&
@@ -58,7 +71,7 @@ export const RightSideContainer = styled.div`
        content: '${notificationMessage}';
        display: grid;
        place-items: center;
-        background: ${isError ? '#cda184' : '#88cdaa'};
+        background: ${isError ? notificationErrorBGColor : notificationSuccessBGColor};
        padding: 10px 15px;
        position: absolute;
        top: 52%;
@@ -172,11 +185,18 @@ export const IconWrapper = styled.div`
 `

 export const LeftSideTopSection = styled.div`
-  background: #e4f6ed;
-  padding: 0 20px 20px 20px;
-  transition: all 0.3s;
+  ${({
+    active,
+    theme: {
+      addDialog: { gradientStartColor },
+    },
+  }) => css`
+    background: ${gradientStartColor};
+    padding: 0 20px 20px 20px;
+    transition: all 0.3s;

-  ${({ active }) => active && 'box-shadow: 0 8px 10px -9px rgba(0, 0, 0, 0.5)'};
+    ${active && 'box-shadow: 0 8px 10px -9px rgba(0, 0, 0, 0.5)'};
+  `}
 `

 export const PosterWrapper = styled.div`
@@ -254,7 +274,12 @@ export const PosterSuggestionsItem = styled.div`
 `

 export const Poster = styled.div`
-  ${({ poster }) => css`
+  ${({
+    poster,
+    theme: {
+      addDialog: { posterBGColor },
+    },
+  }) => css`
    border-radius: 5px;
    overflow: hidden;
    width: 200px;
@@ -272,7 +297,7 @@ export const Poster = styled.div`
      : css`
          display: grid;
          place-items: center;
-          background: #74c39c;
+          background: ${posterBGColor};

          svg {
            transform: scale(1.5) translateY(-3px);
@@ -294,28 +319,35 @@ export const ClearPosterButton = styled(Button)`
 `

 export const PosterLanguageSwitch = styled.div`
-  grid-area: poster;
-  z-index: 5;
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 30px;
-  height: 30px;
-  background: #74c39c;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  color: #e4f6ed;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s;
+  ${({
+    showbutton,
+    theme: {
+      addDialog: { languageSwitchBGColor, languageSwitchFontColor },
+    },
+  }) => css`
+    grid-area: poster;
+    z-index: 5;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 30px;
+    height: 30px;
+    background: ${languageSwitchBGColor};
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    color: ${languageSwitchFontColor};
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;

-  ${({ showbutton }) => !showbutton && 'display: none'};
+    ${!showbutton && 'display: none'};

-  :hover {
-    filter: brightness(1.1);
-  }
+    :hover {
+      filter: brightness(1.1);
+    }
+  `}
 `

 export const ButtonWrapper = styled.div`
--- a/web/src/components/App/Sidebar.jsx
+++ b/web/src/components/App/Sidebar.jsx
@@ -21,18 +21,24 @@ const Sidebar = ({ isDrawerOpen, setIsDonationDialogOpen, isOffline, isLoading }
    <AppSidebarStyle isDrawerOpen={isDrawerOpen}>
      <List>
        <AddDialogButton isOffline={isOffline} isLoading={isLoading} />
+
        <RemoveAll isOffline={isOffline} isLoading={isLoading} />
      </List>
+
      <Divider />
+
      <List>
        <SettingsDialog />
+
        <AboutDialog />
+
        <ListItem button onClick={() => setIsDonationDialogOpen(true)}>
          <ListItemIcon>
            <CreditCardIcon />
          </ListItemIcon>
          <ListItemText primary={t('Donate')} />
        </ListItem>
+
        <CloseServer isOffline={isOffline} isLoading={isLoading} />
      </List>
    </AppSidebarStyle>
--- a/web/src/components/App/index.jsx
+++ b/web/src/components/App/index.jsx
@@ -1,8 +1,14 @@
 import CssBaseline from '@material-ui/core/CssBaseline'
-import { useEffect, useState } from 'react'
+import { createContext, useEffect, useState } from 'react'
 import Typography from '@material-ui/core/Typography'
 import IconButton from '@material-ui/core/IconButton'
-import { Menu as MenuIcon, Close as CloseIcon } from '@material-ui/icons'
+import {
+  Menu as MenuIcon,
+  Close as CloseIcon,
+  Brightness4 as Brightness4Icon,
+  Brightness5 as Brightness5Icon,
+  BrightnessAuto as BrightnessAutoIcon,
+} from '@material-ui/icons'
 import { echoHost } from 'utils/Hosts'
 import Div100vh from 'react-div-100vh'
 import axios from 'axios'
@@ -16,18 +22,20 @@ import { useQuery } from 'react-query'
 import { getTorrents } from 'utils/Utils'
 import GlobalStyle from 'style/GlobalStyle'

-import { AppWrapper, AppHeader, LanguageSwitch } from './style'
+import { AppWrapper, AppHeader, HeaderToggle } from './style'
 import Sidebar from './Sidebar'
-import { darkTheme, lightTheme, useMaterialUITheme } from '../../style/materialUISetup'
+import { lightTheme, THEME_MODES, useMaterialUITheme } from '../../style/materialUISetup'
 import getStyledComponentsTheme from '../../style/getStyledComponentsTheme'

+export const DarkModeContext = createContext()
+
 export default function App() {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
  const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false)
  const [torrServerVersion, setTorrServerVersion] = useState('')

  // https://material-ui.com/ru/customization/palette/
-  const [isDarkMode, muiTheme] = useMaterialUITheme()
+  const [isDarkMode, currentThemeMode, setCurrentThemeMode, muiTheme] = useMaterialUITheme()
  const [currentLang, changeLang] = useChangeLanguage()
  const [isOffline, setIsOffline] = useState(false)
  const { data: torrents, isLoading } = useQuery('torrents', getTorrents, {
@@ -45,54 +53,74 @@ export default function App() {
    <>
      <GlobalStyle />

-      <MuiThemeProvider theme={muiTheme}>
-        <StyledComponentsThemeProvider theme={getStyledComponentsTheme(isDarkMode ? 'dark' : 'light')}>
-          <CssBaseline />
+      <DarkModeContext.Provider value={{ isDarkMode }}>
+        <MuiThemeProvider theme={muiTheme}>
+          <StyledComponentsThemeProvider
+            theme={getStyledComponentsTheme(isDarkMode ? THEME_MODES.DARK : THEME_MODES.LIGHT)}
+          >
+            <CssBaseline />

-          {/* Div100vh - iOS WebKit fix  */}
-          <Div100vh>
-            <AppWrapper>
-              <AppHeader>
-                <IconButton
-                  style={{ marginRight: '20px' }}
-                  color='inherit'
-                  onClick={() => setIsDrawerOpen(!isDrawerOpen)}
-                  edge='start'
-                >
-                  {isDrawerOpen ? <CloseIcon /> : <MenuIcon />}
-                </IconButton>
+            {/* Div100vh - iOS WebKit fix  */}
+            <Div100vh>
+              <AppWrapper>
+                <AppHeader>
+                  <IconButton
+                    style={{ marginRight: '20px' }}
+                    color='inherit'
+                    onClick={() => setIsDrawerOpen(!isDrawerOpen)}
+                    edge='start'
+                  >
+                    {isDrawerOpen ? <CloseIcon /> : <MenuIcon />}
+                  </IconButton>

-                <Typography variant='h6' noWrap>
-                  TorrServer {torrServerVersion}
-                </Typography>
+                  <Typography variant='h6' noWrap>
+                    TorrServer {torrServerVersion}
+                  </Typography>

-                <div style={{ justifySelf: 'end' }}>
-                  <LanguageSwitch onClick={() => (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}>
-                    {currentLang === 'en' ? 'RU' : 'EN'}
-                  </LanguageSwitch>
-                </div>
-              </AppHeader>
+                  <div
+                    style={{ justifySelf: 'end', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}
+                  >
+                    <HeaderToggle
+                      onClick={() => {
+                        currentThemeMode === THEME_MODES.LIGHT && setCurrentThemeMode(THEME_MODES.DARK)
+                        currentThemeMode === THEME_MODES.DARK && setCurrentThemeMode(THEME_MODES.AUTO)
+                        currentThemeMode === THEME_MODES.AUTO && setCurrentThemeMode(THEME_MODES.LIGHT)
+                      }}
+                    >
+                      {currentThemeMode === THEME_MODES.LIGHT ? (
+                        <Brightness5Icon />
+                      ) : currentThemeMode === THEME_MODES.DARK ? (
+                        <Brightness4Icon />
+                      ) : (
+                        <BrightnessAutoIcon />
+                      )}
+                    </HeaderToggle>
+
+                    <HeaderToggle onClick={() => (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}>
+                      {currentLang === 'en' ? 'RU' : 'EN'}
+                    </HeaderToggle>
+                  </div>
+                </AppHeader>

-              <MuiThemeProvider theme={darkTheme}>
                <Sidebar
                  isOffline={isOffline}
                  isLoading={isLoading}
                  isDrawerOpen={isDrawerOpen}
                  setIsDonationDialogOpen={setIsDonationDialogOpen}
                />
-              </MuiThemeProvider>

-              <TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} />
+                <TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} />

-              <MuiThemeProvider theme={lightTheme}>
-                {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
-              </MuiThemeProvider>
+                <MuiThemeProvider theme={lightTheme}>
+                  {isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
+                </MuiThemeProvider>

-              {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
-            </AppWrapper>
-          </Div100vh>
-        </StyledComponentsThemeProvider>
-      </MuiThemeProvider>
+                {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
+              </AppWrapper>
+            </Div100vh>
+          </StyledComponentsThemeProvider>
+        </MuiThemeProvider>
+      </DarkModeContext.Provider>
    </>
  )
 }
--- a/web/src/components/App/style.js
+++ b/web/src/components/App/style.js
@@ -1,14 +1,21 @@
+import { rgba } from 'polished'
 import styled, { css } from 'styled-components'

 export const AppWrapper = styled.div`
-  height: 100%;
-  background: #cbe8d9;
-  display: grid;
-  grid-template-columns: 60px 1fr;
-  grid-template-rows: 60px 1fr;
-  grid-template-areas:
-    'head head'
-    'side content';
+  ${({
+    theme: {
+      app: { appSecondaryColor },
+    },
+  }) => css`
+    height: 100%;
+    background: ${rgba(appSecondaryColor, 0.8)};
+    display: grid;
+    grid-template-columns: 60px 1fr;
+    grid-template-rows: 60px 1fr;
+    grid-template-areas:
+      'head head'
+      'side content';
+  `}
 `

 export const CenteredGrid = styled.div`
@@ -32,16 +39,25 @@ export const AppHeader = styled.div`
  `}
 `
 export const AppSidebarStyle = styled.div`
-  ${({ isDrawerOpen }) => css`
+  ${({
+    isDrawerOpen,
+    theme: {
+      app: { appSecondaryColor, sidebarBGColor, sidebarFillColor },
+    },
+  }) => css`
    grid-area: side;
    width: ${isDrawerOpen ? '400%' : '100%'};
    z-index: 2;
    overflow-x: hidden;
    transition: width 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
-    border-right: 1px solid rgba(0, 0, 0, 0.12);
-    background: #575757;
-    color: #eee;
+    border-right: 1px solid ${rgba(appSecondaryColor, 0.12)};
+    background: ${sidebarBGColor};
+    color: ${sidebarFillColor};
    white-space: nowrap;
+
+    svg {
+      fill: ${sidebarFillColor};
+    }
  `}
 `
 export const TorrentListWrapper = styled.div`
@@ -69,25 +85,31 @@ export const TorrentListWrapper = styled.div`
  }
 `

-export const LanguageSwitch = styled.div`
-  cursor: pointer;
-  border-radius: 50%;
-  background: #56b887;
-  height: 35px;
-  width: 35px;
-  transition: all 0.2s;
-  font-weight: 600;
-  display: grid;
-  place-items: center;
-  color: #fff;
+export const HeaderToggle = styled.div`
+  ${({
+    theme: {
+      app: { headerToggleColor },
+    },
+  }) => css`
+    cursor: pointer;
+    border-radius: 50%;
+    background: ${headerToggleColor};
+    height: 35px;
+    width: 35px;
+    transition: all 0.2s;
+    font-weight: 600;
+    display: grid;
+    place-items: center;
+    color: #fff;

-  :hover {
-    background: #4db380;
-  }
+    :hover {
+      background: ${rgba(headerToggleColor, 0.9)};
+    }

-  @media (max-width: 700px) {
-    height: 28px;
-    width: 28px;
-    font-size: 12px;
-  }
+    @media (max-width: 700px) {
+      height: 28px;
+      width: 28px;
+      font-size: 12px;
+    }
+  `}
 `
--- a/web/src/components/DialogTorrentDetailsContent/DetailedView/style.js
+++ b/web/src/components/DialogTorrentDetailsContent/DetailedView/style.js
@@ -1,19 +1,33 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'

 export const DetailedViewWidgetSection = styled.section`
-  padding: 40px;
-  background: linear-gradient(145deg, #e4f6ed, #b5dec9);
+  ${({
+    theme: {
+      detailedView: { gradientStartColor, gradientEndColor },
+    },
+  }) => css`
+    padding: 40px;
+    background: linear-gradient(145deg, ${gradientStartColor}, ${gradientEndColor});

-  @media (max-width: 800px) {
-    padding: 20px;
-  }
+    @media (max-width: 800px) {
+      padding: 20px;
+    }
+  `}
 `

 export const DetailedViewCacheSection = styled.section`
-  padding: 40px;
-  box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
+  ${({
+    theme: {
+      detailedView: { cacheSectionBGColor },
+    },
+  }) => css`
+    padding: 40px;
+    box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
+    background: ${cacheSectionBGColor};
+    flex: 1;

-  @media (max-width: 800px) {
-    padding: 20px;
-  }
+    @media (max-width: 800px) {
+      padding: 20px;
+    }
+  `}
 `
--- a/web/src/components/DialogTorrentDetailsContent/Table/style.js
+++ b/web/src/components/DialogTorrentDetailsContent/Table/style.js
@@ -1,77 +1,89 @@
 import styled, { css } from 'styled-components'

-const bigTableDividerColor = '#ddd'
-const bigTableViewedColor = '#f3f3f3'
-const defaultPrimaryColor = '#009879'
-const defaultSecondaryColor = '#00a383'
-const defaultTertiaryColor = '#03aa89'
 const viewedPrimaryColor = '#bdbdbd'
 const viewedSecondaryColor = '#c4c4c4'
 const viewedTertiaryColor = '#c9c9c9'
+const bigTableDividerColor = '#ddd'
+const bigTableDefaultRowColor = '#fff'
+const bigTableViewedRowColor = '#f3f3f3'

 const viewedIndicator = css`
-  :before {
-    content: '';
-    width: 10px;
-    height: 10px;
-    background: ${defaultPrimaryColor};
-    border-radius: 50%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
+  ${({
+    theme: {
+      table: { defaultPrimaryColor },
+    },
+  }) => css`
+    :before {
+      content: '';
+      width: 10px;
+      height: 10px;
+      background: ${defaultPrimaryColor};
+      border-radius: 50%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  `}
 `
 export const TableStyle = styled.table`
-  border-collapse: collapse;
-  margin: 25px 0;
-  font-size: 0.9em;
-  width: 100%;
-  border-radius: 5px 5px 0 0;
-  overflow: hidden;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+  ${({
+    theme: {
+      table: { defaultPrimaryColor },
+    },
+  }) => css`
+    border-collapse: collapse;
+    margin: 25px 0;
+    font-size: 0.9em;
+    width: 100%;
+    border-radius: 5px 5px 0 0;
+    overflow: hidden;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+    color: #000;

-  thead tr {
-    background: ${defaultPrimaryColor};
-    color: #fff;
-    text-align: left;
-    text-transform: uppercase;
-  }
-
-  th,
-  td {
-    padding: 12px 15px;
-  }
-
-  tbody tr {
-    border-bottom: 1px solid ${bigTableDividerColor};
-
-    :last-of-type {
-      border-bottom: 2px solid ${defaultPrimaryColor};
+    thead tr {
+      background: ${defaultPrimaryColor};
+      color: #fff;
+      text-align: left;
+      text-transform: uppercase;
    }

-    &.viewed-file-row {
-      background: ${bigTableViewedColor};
+    th,
+    td {
+      padding: 12px 15px;
    }
-  }

-  td {
-    &.viewed-file-indicator {
-      position: relative;
+    tbody tr {
+      border-bottom: 1px solid ${bigTableDividerColor};
+      background: ${bigTableDefaultRowColor};

-      ${viewedIndicator}
+      :last-of-type {
+        border-bottom: 2px solid ${defaultPrimaryColor};
+      }
+
+      &.viewed-file-row {
+        background: ${bigTableViewedRowColor};
+      }
    }
-  }

-  .button-cell {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 10px;
-  }
+    td {
+      &.viewed-file-indicator {
+        position: relative;

-  @media (max-width: 970px) {
-    display: none;
-  }
+        ${viewedIndicator}
+      }
+    }
+
+    .button-cell {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px;
+    }
+
+    @media (max-width: 970px) {
+      display: none;
+    }
+  `}
 `

 export const ShortTableWrapper = styled.div`
@@ -91,7 +103,12 @@ export const ShortTableWrapper = styled.div`
 `

 export const ShortTable = styled.div`
-  ${({ isViewed }) => css`
+  ${({
+    isViewed,
+    theme: {
+      table: { defaultPrimaryColor, defaultSecondaryColor, defaultTertiaryColor },
+    },
+  }) => css`
    width: 100%;
    grid-template-rows: repeat(3, max-content);
    border-radius: 5px;
@@ -170,6 +187,7 @@ export const ShortTable = styled.div`
        grid-template-columns: repeat(3, 1fr);
        align-items: center;
        gap: 20px;
+        background: #fff;

        @media (max-width: 410px) {
          gap: 10px;
--- a/web/src/components/DialogTorrentDetailsContent/TorrentCache/index.jsx
+++ b/web/src/components/DialogTorrentDetailsContent/TorrentCache/index.jsx
@@ -1,7 +1,8 @@
 import Measure from 'react-measure'
-import { useState, memo, useRef, useEffect } from 'react'
+import { useState, memo, useRef, useEffect, useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import isEqual from 'lodash/isEqual'
+import { DarkModeContext } from 'components/App'

 import { useCreateCacheMap } from '../customHooks'
 import getShortCacheMap from './getShortCacheMap'
@@ -16,6 +17,9 @@ const TorrentCache = ({ cache, isMini }) => {
  const ctxRef = useRef(null)
  const cacheMap = useCreateCacheMap(cache)
  const settingsTarget = isMini ? 'mini' : 'default'
+  const { isDarkMode } = useContext(DarkModeContext)
+  const theme = isDarkMode ? 'dark' : 'light'
+
  const {
    readerColor,
    rangeColor,
@@ -26,7 +30,7 @@ const TorrentCache = ({ cache, isMini }) => {
    borderColor,
    cacheMaxHeight,
    completeColor,
-  } = snakeSettings[settingsTarget]
+  } = snakeSettings[theme][settingsTarget]

  const canvasWidth = isMini ? width * 0.93 : width

@@ -69,7 +73,7 @@ const TorrentCache = ({ cache, isMini }) => {

      ctx.lineWidth = borderWidth
      ctx.fillStyle = inProgress
-        ? createGradient(ctx, percentage, settingsTarget)
+        ? createGradient(ctx, percentage, theme, settingsTarget)
        : isCompleted
        ? completeColor
        : backgroundColor
@@ -102,13 +106,14 @@ const TorrentCache = ({ cache, isMini }) => {
    completeColor,
    readerColor,
    rangeColor,
+    theme,
  ])

  return (
    <Measure bounds onResize={({ bounds }) => setDimensions(bounds)}>
      {({ measureRef }) => (
        <div style={{ display: 'flex', flexDirection: 'column' }} ref={measureRef}>
-          <SnakeWrapper isMini={isMini}>
+          <SnakeWrapper themeType={theme} isMini={isMini}>
            <canvas ref={canvasRef} />
          </SnakeWrapper>

--- a/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js
+++ b/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js
@@ -1,33 +1,60 @@
 import { mainColors } from 'style/colors'

 export const snakeSettings = {
-  default: {
-    borderWidth: 1,
-    pieceSize: 14,
-    gapBetweenPieces: 3,
-    borderColor: '#dbf2e8',
-    completeColor: mainColors.primary,
-    backgroundColor: '#fff',
-    progressColor: '#b3dfc9',
-    readerColor: '#000',
-    rangeColor: '#afa6e3',
+  dark: {
+    default: {
+      borderWidth: 1,
+      pieceSize: 14,
+      gapBetweenPieces: 3,
+      borderColor: mainColors.dark.primary,
+      completeColor: mainColors.dark.primary,
+      backgroundColor: '#fff',
+      progressColor: '#545a5e',
+      readerColor: '#fff',
+      rangeColor: '#cda184',
+    },
+    mini: {
+      cacheMaxHeight: 340,
+      borderWidth: 2,
+      pieceSize: 23,
+      gapBetweenPieces: 6,
+      borderColor: '#545a5e',
+      completeColor: '#545a5e',
+      backgroundColor: '#dee3e5',
+      progressColor: '#dee3e5',
+      readerColor: '#000',
+      rangeColor: '#cda184',
+    },
  },
-  mini: {
-    cacheMaxHeight: 340,
-    borderWidth: 2,
-    pieceSize: 23,
-    gapBetweenPieces: 6,
-    borderColor: '#4db380',
-    completeColor: '#4db380',
-    backgroundColor: '#dbf2e8',
-    progressColor: '#dbf2e8',
-    readerColor: '#2d714f',
-    rangeColor: '#afa6e3',
+  light: {
+    default: {
+      borderWidth: 1,
+      pieceSize: 14,
+      gapBetweenPieces: 3,
+      borderColor: '#dbf2e8',
+      completeColor: mainColors.light.primary,
+      backgroundColor: '#fff',
+      progressColor: '#b3dfc9',
+      readerColor: '#000',
+      rangeColor: '#afa6e3',
+    },
+    mini: {
+      cacheMaxHeight: 340,
+      borderWidth: 2,
+      pieceSize: 23,
+      gapBetweenPieces: 6,
+      borderColor: '#4db380',
+      completeColor: '#4db380',
+      backgroundColor: '#dbf2e8',
+      progressColor: '#dbf2e8',
+      readerColor: '#2d714f',
+      rangeColor: '#afa6e3',
+    },
  },
 }

-export const createGradient = (ctx, percentage, snakeType) => {
-  const { pieceSize, completeColor, progressColor } = snakeSettings[snakeType]
+export const createGradient = (ctx, percentage, theme, snakeType) => {
+  const { pieceSize, completeColor, progressColor } = snakeSettings[theme][snakeType]

  const gradient = ctx.createLinearGradient(0, pieceSize, 0, 0)
  gradient.addColorStop(0, completeColor)
--- a/web/src/components/DialogTorrentDetailsContent/TorrentCache/style.js
+++ b/web/src/components/DialogTorrentDetailsContent/TorrentCache/style.js
@@ -10,12 +10,12 @@ export const ScrollNotification = styled.div`
 `

 export const SnakeWrapper = styled.div`
-  ${({ isMini }) => css`
+  ${({ isMini, themeType }) => css`
    ${isMini &&
    css`
      display: grid;
      justify-content: center;
-      max-height: ${snakeSettings.mini.cacheMaxHeight}px;
+      max-height: ${snakeSettings[themeType].mini.cacheMaxHeight}px;
      overflow: auto;
    `}

--- a/web/src/components/DialogTorrentDetailsContent/TorrentFunctions/style.js
+++ b/web/src/components/DialogTorrentDetailsContent/TorrentFunctions/style.js
@@ -19,11 +19,17 @@ export const MainSectionButtonGroup = styled.div`
 `

 export const SmallLabel = styled.div`
-  ${({ mb }) => css`
+  ${({
+    mb,
+    theme: {
+      torrentFunctions: { fontColor },
+    },
+  }) => css`
    ${mb && `margin-bottom: ${mb}px`};
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
+    color: ${fontColor};

    @media (max-width: 800px) {
      font-size: 18px;
--- a/web/src/components/DialogTorrentDetailsContent/index.jsx
+++ b/web/src/components/DialogTorrentDetailsContent/index.jsx
@@ -133,7 +133,13 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
        {...(isDetailedCacheView && { onBack: () => setIsDetailedCacheView(false) })}
      />

-      <div style={{ minHeight: '80vh', overflow: 'auto' }}>
+      <div
+        style={{
+          minHeight: '80vh',
+          overflow: 'auto',
+          ...(isDetailedCacheView && { display: 'flex', flexDirection: 'column' }),
+        }}
+      >
        {isLoading ? (
          <Loader />
        ) : isDetailedCacheView ? (
--- a/web/src/components/DialogTorrentDetailsContent/style.js
+++ b/web/src/components/DialogTorrentDetailsContent/style.js
@@ -1,3 +1,4 @@
+import { rgba } from 'polished'
 import styled, { css } from 'styled-components'

 export const DialogContentGrid = styled.div`
@@ -18,7 +19,12 @@ export const DialogContentGrid = styled.div`
  }
 `
 export const Poster = styled.div`
-  ${({ poster }) => css`
+  ${({
+    poster,
+    theme: {
+      dialogTorrentDetailsContent: { posterBGColor },
+    },
+  }) => css`
    height: 400px;
    border-radius: 5px;
    overflow: hidden;
@@ -35,7 +41,7 @@ export const Poster = styled.div`
          width: 300px;
          display: grid;
          place-items: center;
-          background: #74c39c;
+          background: ${posterBGColor};

          svg {
            transform: scale(2.5) translateY(-3px);
@@ -58,72 +64,104 @@ export const Poster = styled.div`
  `}
 `
 export const MainSection = styled.section`
-  grid-area: main;
-  padding: 40px;
-  display: grid;
-  grid-template-columns: min-content 1fr;
-  gap: 30px;
-  background: linear-gradient(145deg, #e4f6ed, #b5dec9);
+  ${({
+    theme: {
+      dialogTorrentDetailsContent: { gradientStartColor, gradientEndColor },
+    },
+  }) => css`
+    grid-area: main;
+    padding: 40px;
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    gap: 30px;
+    background: linear-gradient(145deg, ${gradientStartColor}, ${gradientEndColor});

-  @media (max-width: 840px) {
-    grid-template-columns: 1fr;
-  }
-
-  @media (max-width: 800px) {
-    padding: 20px;
-  }
-`
-
-export const CacheSection = styled.section`
-  grid-area: cache;
-  padding: 40px;
-  display: grid;
-  align-content: start;
-  grid-template-rows: min-content 1fr min-content;
-  background: #88cdaa;
-
-  @media (max-width: 800px) {
-    padding: 20px;
-  }
-`
-
-export const TorrentFilesSection = styled.section`
-  grid-area: file-list;
-  padding: 40px;
-  box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
-
-  @media (max-width: 800px) {
-    padding: 20px;
-  }
-`
-
-export const SectionSubName = styled.div`
-  ${({ mb }) => css`
-    ${mb && `margin-bottom: ${mb}px`};
-    color: #7c7b7c;
+    @media (max-width: 840px) {
+      grid-template-columns: 1fr;
+    }

    @media (max-width: 800px) {
-      ${mb && `margin-bottom: ${mb / 2}px`};
-      font-size: 11px;
+      padding: 20px;
    }
  `}
 `

-export const SectionTitle = styled.div`
-  ${({ mb }) => css`
-    ${mb && `margin-bottom: ${mb}px`};
-    font-size: 35px;
-    font-weight: 300;
-    line-height: 1;
-    word-break: break-word;
+export const CacheSection = styled.section`
+  ${({
+    theme: {
+      dialogTorrentDetailsContent: { chacheSectionBGColor },
+    },
+  }) => css`
+    grid-area: cache;
+    padding: 40px;
+    display: grid;
+    align-content: start;
+    grid-template-rows: min-content 1fr min-content;
+    background: ${chacheSectionBGColor};

    @media (max-width: 800px) {
-      font-size: 25px;
-      ${mb && `margin-bottom: ${mb / 2}px`};
+      padding: 20px;
    }
  `}
 `

+export const TorrentFilesSection = styled.section`
+  ${({
+    theme: {
+      dialogTorrentDetailsContent: { torrentFilesSectionBGColor },
+    },
+  }) => css`
+    grid-area: file-list;
+    padding: 40px;
+    box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
+    background: ${torrentFilesSectionBGColor};
+
+    @media (max-width: 800px) {
+      padding: 20px;
+    }
+  `}
+`
+
+export const SectionSubName = styled.div`
+  ${({
+    theme: {
+      dialogTorrentDetailsContent: { subNameFontColor },
+    },
+  }) => css`
+    ${({ mb }) => css`
+      ${mb && `margin-bottom: ${mb}px`};
+      color: ${subNameFontColor};
+
+      @media (max-width: 800px) {
+        ${mb && `margin-bottom: ${mb / 2}px`};
+        font-size: 11px;
+      }
+    `}
+  `}
+`
+
+export const SectionTitle = styled.div`
+  ${({
+    theme: {
+      dialogTorrentDetailsContent: { fontColor },
+    },
+  }) => css`
+    ${({ mb }) => css`
+      ${mb && `margin-bottom: ${mb}px`};
+      font-size: 35px;
+      font-weight: 300;
+      line-height: 1;
+      word-break: break-word;
+      color: ${fontColor};
+
+      @media (max-width: 800px) {
+        font-size: 25px;
+        ${mb && `margin-bottom: ${mb / 2}px`};
+      }
+    `}
+  `}
+`
+
 export const SectionHeader = styled.div`
  margin-bottom: 20px;
 `
@@ -182,18 +220,25 @@ export const WidgetFieldWrapper = styled.div`
  }
 `
 export const WidgetFieldTitle = styled.div`
-  grid-area: title;
-  justify-self: start;
-  text-transform: uppercase;
-  font-size: 11px;
-  margin-bottom: 2px;
-  font-weight: 600;
+  ${({
+    theme: {
+      dialogTorrentDetailsContent: { fontColor },
+    },
+  }) => css`
+    grid-area: title;
+    justify-self: start;
+    text-transform: uppercase;
+    font-size: 11px;
+    margin-bottom: 2px;
+    font-weight: 600;
+    color: ${fontColor};
+  `}
 `

 export const WidgetFieldIcon = styled.div`
  ${({ bgColor }) => css`
    grid-area: icon;
-    color: rgba(255, 255, 255, 0.8);
+    color: ${rgba('#fff', 0.8)};
    background: ${bgColor};
    border-radius: 5px 0 0 5px;

@@ -220,20 +265,29 @@ export const WidgetFieldValue = styled.div`
  `}
 `

-export const LoadingProgress = styled.div.attrs(({ value, fullAmount }) => {
-  const percentage = Math.min(100, (value * 100) / fullAmount)
-
-  return {
-    // this block is here according to styled-components recomendation about fast changable components
-    style: {
-      background: `linear-gradient(to right, #b5dec9 0%, #b5dec9 ${percentage}%, #fff ${percentage}%, #fff 100%)`,
+export const LoadingProgress = styled.div.attrs(
+  ({
+    value,
+    fullAmount,
+    theme: {
+      dialogTorrentDetailsContent: { gradientEndColor },
    },
-  }
-})`
+  }) => {
+    const percentage = Math.min(100, (value * 100) / fullAmount)
+
+    return {
+      // this block is here according to styled-components recomendation about fast changable components
+      style: {
+        background: `linear-gradient(to right, ${gradientEndColor} 0%, ${gradientEndColor} ${percentage}%, #fff ${percentage}%, #fff 100%)`,
+      },
+    }
+  },
+)`
  ${({ label }) => css`
    border: 1px solid;
    padding: 10px 20px;
    border-radius: 5px;
+    color: #000;

    :before {
      content: '${label}';
--- a/web/src/components/TorrentCard/style.js
+++ b/web/src/components/TorrentCard/style.js
@@ -1,7 +1,11 @@
 import styled, { css } from 'styled-components'

 export const TorrentCard = styled.div`
-  ${({ theme: { primary } }) => css`
+  ${({
+    theme: {
+      torrentCard: { cardPrimaryColor },
+    },
+  }) => css`
    border-radius: 5px;
    display: grid;
    grid-template-columns: 120px 260px 1fr;
@@ -9,7 +13,7 @@ export const TorrentCard = styled.div`
    grid-template-areas: 'poster description buttons';
    gap: 10px;
    padding: 10px;
-    background: ${primary};
+    background: ${cardPrimaryColor};
    box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);

    @media (max-width: 1260px), (max-height: 500px) {
@@ -34,7 +38,12 @@ export const TorrentCardPoster = styled.div`
  overflow: hidden;
  text-align: center;

-  ${({ isPoster }) =>
+  ${({
+    isPoster,
+    theme: {
+      torrentCard: { cardSecondaryColor, accentCardColor },
+    },
+  }) =>
    isPoster
      ? css`
          img {
@@ -47,8 +56,8 @@ export const TorrentCardPoster = styled.div`
      : css`
          display: grid;
          place-items: center;
-          background: #74c39c;
-          border: 1px solid #337a57;
+          background: ${cardSecondaryColor};
+          border: 1px solid ${accentCardColor};

          svg {
            transform: translateY(-3px);
@@ -76,128 +85,140 @@ export const TorrentCardButtons = styled.div`
  }
 `
 export const TorrentCardDescription = styled.div`
-  grid-area: description;
-  background: #74c39c;
-  border-radius: 5px;
-  padding: 5px;
-  display: grid;
-  grid-template-rows: 55% 1fr;
-  gap: 10px;
-
-  @media (max-width: 770px) {
-    grid-template-rows: 60% 1fr;
-    gap: 3px;
-  }
-
-  .description-title-wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .description-section-name {
-    text-transform: uppercase;
-    font-size: 10px;
-    font-weight: 600;
-    letter-spacing: 0.4px;
-    color: #337a57;
-
-    @media (max-width: 770px) {
-      font-size: 0.4rem;
-    }
-  }
-
-  .description-torrent-title {
-    overflow: auto;
-    word-break: break-all;
-  }
-
-  .description-statistics-wrapper {
+  ${({
+    theme: {
+      torrentCard: { cardSecondaryColor, accentCardColor },
+    },
+  }) => css`
+    grid-area: description;
+    background: ${cardSecondaryColor};
+    border-radius: 5px;
+    padding: 5px;
    display: grid;
-    grid-template-columns: 80px 80px 1fr;
-    align-self: end;
-
-    @media (max-width: 1260px), (max-height: 500px) {
-      grid-template-columns: 70px 70px 1fr;
-    }
+    grid-template-rows: 55% 1fr;
+    gap: 10px;

    @media (max-width: 770px) {
-      grid-template-columns: 65px 65px 1fr;
+      grid-template-rows: 60% 1fr;
+      gap: 3px;
    }

-    @media (max-width: 700px) {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-    }
-  }
-
-  .description-statistics-element-wrapper {
-  }
-
-  .description-statistics-element-value {
-    margin-left: 5px;
-    margin-bottom: 10px;
-    word-break: break-all;
-
-    @media (max-width: 1260px), (max-height: 500px) {
-      font-size: 0.7rem;
-      margin-bottom: 0;
-      margin-left: 0;
-    }
-  }
-
-  .description-torrent-title,
-  .description-statistics-element-value {
-    @media (max-width: 770px) {
-      font-size: 0.6rem;
+    .description-title-wrapper {
+      display: flex;
+      flex-direction: column;
    }

-    @media (max-width: 410px) {
+    .description-section-name {
+      text-transform: uppercase;
      font-size: 10px;
+      font-weight: 600;
+      letter-spacing: 0.4px;
+      color: ${accentCardColor};
+
+      @media (max-width: 770px) {
+        font-size: 0.4rem;
+      }
    }
-  }
+
+    .description-torrent-title {
+      overflow: auto;
+      word-break: break-all;
+    }
+
+    .description-statistics-wrapper {
+      display: grid;
+      grid-template-columns: 80px 80px 1fr;
+      align-self: end;
+
+      @media (max-width: 1260px), (max-height: 500px) {
+        grid-template-columns: 70px 70px 1fr;
+      }
+
+      @media (max-width: 770px) {
+        grid-template-columns: 65px 65px 1fr;
+      }
+
+      @media (max-width: 700px) {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+
+    .description-statistics-element-wrapper {
+    }
+
+    .description-statistics-element-value {
+      margin-left: 5px;
+      margin-bottom: 10px;
+      word-break: break-all;
+
+      @media (max-width: 1260px), (max-height: 500px) {
+        font-size: 0.7rem;
+        margin-bottom: 0;
+        margin-left: 0;
+      }
+    }
+
+    .description-torrent-title,
+    .description-statistics-element-value {
+      @media (max-width: 770px) {
+        font-size: 0.6rem;
+      }
+
+      @media (max-width: 410px) {
+        font-size: 10px;
+      }
+    }
+  `}
 `

 export const StyledButton = styled.button`
-  border-radius: 5px;
-  border: none;
-  cursor: pointer;
-  transition: 0.2s;
-  display: flex;
-  align-items: center;
-  text-transform: uppercase;
-  background: #268757;
-  color: #fff;
-  font-size: 0.9rem;
-  letter-spacing: 0.009em;
-  padding: 0 12px;
-  svg {
-    width: 20px;
-  }
-
-  :hover {
-    background: #337a57;
-  }
-
-  > :first-child {
-    margin-right: 10px;
-  }
-
-  @media (max-width: 1260px), (max-height: 500px) {
-    padding: 7px 10px;
-    justify-content: center;
-    font-size: 0.8rem;
-
+  ${({
+    theme: {
+      torrentCard: { buttonBGColor, accentCardColor },
+    },
+  }) => css`
+    border-radius: 5px;
+    border: none;
+    cursor: pointer;
+    transition: 0.2s;
+    display: flex;
+    align-items: center;
+    text-transform: uppercase;
+    background: ${buttonBGColor};
+    color: #fff;
+    font-size: 0.9rem;
+    letter-spacing: 0.009em;
+    padding: 0 12px;
    svg {
-      display: none;
+      width: 20px;
    }
-  }

-  @media (max-width: 770px) {
-    font-size: 0.7rem;
-  }
+    :hover {
+      background: ${accentCardColor};
+    }

-  @media (max-width: 420px) {
-    font-size: 0.6rem;
-    padding: 7px 5px;
-  }
+    > :first-child {
+      margin-right: 10px;
+    }
+
+    @media (max-width: 1260px), (max-height: 500px) {
+      padding: 7px 10px;
+      justify-content: center;
+      font-size: 0.8rem;
+
+      svg {
+        display: none;
+      }
+    }
+
+    @media (max-width: 770px) {
+      font-size: 0.7rem;
+    }
+
+    @media (max-width: 420px) {
+      font-size: 0.6rem;
+      padding: 7px 5px;
+    }
+  `}
 `
--- a/web/src/components/TorrentList/AddFirstTorrent.jsx
+++ b/web/src/components/TorrentList/AddFirstTorrent.jsx
@@ -1,6 +1,6 @@
+import { useTheme } from '@material-ui/core'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { mainColors } from 'style/colors'

 import AddDialog from '../Add/AddDialog'
 import IconWrapper from './style'
@@ -10,6 +10,7 @@ export default function AddFirstTorrent() {
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const handleClickOpen = () => setIsDialogOpen(true)
  const handleClose = () => setIsDialogOpen(false)
+  const primary = useTheme().palette.primary.main

  return (
    <>
@@ -17,7 +18,7 @@ export default function AddFirstTorrent() {
        <lord-icon
          src='https://cdn.lordicon.com/bbnkwdur.json'
          trigger='loop'
-          colors={`primary:#121331,secondary:${mainColors.primary}`}
+          colors={`primary:#121331,secondary:${primary}`}
          stroke='26'
          scale='60'
        />
--- a/web/src/components/TorrentList/NoServerConnection.jsx
+++ b/web/src/components/TorrentList/NoServerConnection.jsx
@@ -1,17 +1,18 @@
+import { useTheme } from '@material-ui/core'
 import { useTranslation } from 'react-i18next'
-import { mainColors } from 'style/colors'

 import IconWrapper from './style'

 export default function NoServerConnection() {
  const { t } = useTranslation()
+  const primary = useTheme().palette.primary.main

  return (
    <IconWrapper>
      <lord-icon
        src='https://cdn.lordicon.com/wrprwmwt.json'
        trigger='loop'
-        colors={`primary:#121331,secondary:${mainColors.primary}`}
+        colors={`primary:#121331,secondary:${primary}`}
        stroke='26'
        scale='60'
      />
--- a/web/src/icons/index.jsx
+++ b/web/src/icons/index.jsx
@@ -1,114 +1,129 @@
-export const NoImageIcon = () => (
-  <svg
-    height='80px'
-    width='80px'
-    fill='#248a57'
-    xmlns='http://www.w3.org/2000/svg'
-    xmlnsXlink='http://www.w3.org/1999/xlink'
-    version='1.1'
-    x='0px'
-    y='0px'
-    viewBox='0 0 100 100'
-    enableBackground='new 0 0 100 100'
-    xmlSpace='preserve'
-  >
-    <g>
-      <path d='M18.293,93.801c0.066,0.376,0.284,0.718,0.597,0.937c0.313,0.219,0.708,0.307,1.085,0.241l70.058-12.353   c0.376-0.066,0.718-0.284,0.937-0.597c0.219-0.313,0.307-0.708,0.24-1.085l-9.502-53.891c-0.139-0.79-0.892-1.317-1.682-1.178   l-19.402,3.421L47.997,14.16c0.241-0.706,0.375-1.456,0.375-2.229c0-0.399-0.035-0.804-0.106-1.209C47.671,7.363,44.757,5,41.455,5   c-0.4,0-0.804,0.035-1.209,0.106h0c-3.359,0.595-5.723,3.509-5.723,6.812c0,0.4,0.035,0.804,0.106,1.209   c0.178,1.005,0.567,1.918,1.109,2.709l-6.875,19.061L9.968,38.228c-0.79,0.139-1.317,0.892-1.177,1.682L18.293,93.801z    M40.75,7.966L40.75,7.966c0.239-0.042,0.474-0.062,0.705-0.062c1.909,0,3.612,1.373,3.953,3.324v0   c0.042,0.238,0.062,0.473,0.062,0.704c0,1.908-1.373,3.612-3.323,3.953h0.001c-0.238,0.042-0.473,0.062-0.705,0.062   c-1.908,0-3.612-1.373-3.953-3.323c-0.042-0.238-0.062-0.473-0.062-0.705C37.427,10.01,38.799,8.306,40.75,7.966z M38.059,17.96   c1.012,0.569,2.17,0.89,3.383,0.89c0.399,0,0.804-0.034,1.208-0.106h0.001c1.48-0.263,2.766-0.976,3.743-1.974l10.935,13.108   L32.16,34.315L38.059,17.96z M29.978,37.648c0.136-0.004,0.268-0.029,0.396-0.07l29.75-5.246c0.134-0.006,0.266-0.027,0.395-0.07   l18.582-3.277l8.998,51.031L20.9,91.867l-8.998-51.032L29.978,37.648z' />
-      <path d='M49.984,75.561c0.809,0,1.627-0.065,2.449-0.199l0.001,0c7.425-1.213,12.701-7.627,12.701-14.919   c0-0.809-0.065-1.627-0.199-2.449c-1.213-7.425-7.626-12.701-14.919-12.701c-0.808,0-1.627,0.065-2.45,0.199   c-7.425,1.213-12.701,7.626-12.701,14.918c0,0.808,0.065,1.627,0.199,2.449C36.278,70.284,42.692,75.561,49.984,75.561z    M51.967,72.496c-0.668,0.109-1.33,0.161-1.983,0.161c-5.883,0-11.079-4.265-12.053-10.265c-0.109-0.668-0.161-1.33-0.161-1.983   c0-2.108,0.555-4.123,1.534-5.892l19.693,14.176C57.206,70.645,54.782,72.039,51.967,72.496z M48.034,48.357L48.034,48.357   c0.668-0.109,1.329-0.161,1.983-0.161c5.882,0,11.079,4.265,12.053,10.265c0.109,0.667,0.161,1.329,0.161,1.983   c0,2.109-0.556,4.127-1.536,5.897L41.001,52.163C42.791,50.21,45.217,48.814,48.034,48.357z' />
-      <polygon points='47.567,45.492 47.567,45.492 47.568,45.491  ' />
-    </g>
-  </svg>
-)
+import { useTheme } from '@material-ui/core'

-export const AddItemIcon = () => (
-  <svg
-    height='100px'
-    width='100px'
-    fill='#248a57'
-    viewBox='0 0 452 452'
-    version='1.1'
-    xmlns='http://www.w3.org/2000/svg'
-  >
-    <g id='#000000ff'>
-      <path
-        opacity='1.00'
-        d=' M 210.49 18.69 C 244.92 16.12 280.02 22.13 311.46 36.47 C 344.90 51.54 374.16 75.69 395.41 105.58 C 415.62 133.87 428.55 167.34 432.48 201.89 C 438.07 248.86 427.02 297.61 401.45 337.43 C 382.92 366.59 357.02 391.04 326.80 407.80 C 300.81 422.31 271.64 431.08 241.96 433.26 C 207.37 435.97 172.14 429.83 140.54 415.51 C 109.95 401.69 82.82 380.33 62.16 353.86 C 39.25 324.67 24.38 289.21 19.78 252.38 C 14.94 214.51 20.65 175.31 36.47 140.54 C 54.11 101.38 84.24 67.99 121.37 46.39 C 148.44 30.52 179.19 20.98 210.49 18.69 M 213.46 36.60 C 178.91 38.80 145.03 50.71 116.76 70.72 C 84.67 93.21 59.84 125.88 46.91 162.88 C 34.87 196.99 32.96 234.54 41.25 269.73 C 48.89 302.45 65.53 332.98 88.79 357.21 C 113.91 383.56 146.78 402.45 182.25 410.72 C 216.67 418.86 253.37 417.21 286.87 405.85 C 329.85 391.49 367.13 361.01 389.89 321.85 C 406.02 294.41 414.96 262.84 415.73 231.03 C 416.71 196.59 408.11 161.91 390.97 132.00 C 372.31 99.13 343.57 72.09 309.61 55.49 C 279.95 40.89 246.43 34.40 213.46 36.60 Z'
-      />
-      <path
-        opacity='1.00'
-        d=' M 217.02 117.63 C 223.01 117.45 228.99 117.45 234.98 117.63 C 235.16 150.72 234.93 183.81 235.09 216.89 C 268.18 217.03 301.28 216.82 334.38 216.99 C 334.57 222.99 334.57 229.00 334.38 235.01 C 301.28 235.18 268.18 234.97 235.09 235.11 C 234.93 268.19 235.16 301.28 234.98 334.37 C 228.99 334.55 223.00 334.55 217.02 334.37 C 216.84 301.28 217.07 268.19 216.92 235.11 C 183.82 234.97 150.72 235.17 117.62 235.01 C 117.43 229.00 117.43 222.99 117.62 216.99 C 150.72 216.82 183.82 217.03 216.91 216.89 C 217.07 183.81 216.84 150.72 217.02 117.63 Z'
-      />
-    </g>
-  </svg>
-)
+export const NoImageIcon = ({ color }) => {
+  const primary = useTheme().palette.primary.main

-export const TorrentIcon = () => (
-  <svg width='150px' height='150px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg'>
-    <g id='#248a57ff'>
-      <path
-        fill='#248a57'
-        opacity='1.00'
-        d=' M 102.41 0.00 L 319.87 0.00 C 320.21 29.68 319.87 59.37 320.04 89.05 C 320.29 97.32 323.88 105.47 329.94 111.12 C 336.01 117.07 344.56 120.18 353.01 120.01 C 382.02 119.87 411.04 120.22 440.05 119.83 C 439.94 236.88 440.04 353.93 440.00 470.98 C 440.01 478.16 440.50 485.68 437.47 492.41 C 432.79 503.85 421.05 511.80 408.71 512.00 L 103.28 512.00 C 90.95 511.79 79.20 503.84 74.53 492.42 C 72.06 486.96 71.87 480.87 71.99 474.97 C 72.01 327.63 71.99 180.30 72.00 32.96 C 71.95 27.61 73.03 22.22 75.52 17.46 C 80.55 7.39 91.19 0.57 102.41 0.00 M 360.00 382.07 C 358.69 383.73 359.01 385.99 358.90 387.97 C 358.95 396.36 358.91 404.75 358.93 413.14 C 352.50 403.51 346.13 393.83 339.77 384.16 C 338.65 382.47 337.13 380.65 334.92 380.63 C 331.97 380.41 329.13 382.87 329.22 385.89 C 328.94 396.58 329.24 407.28 329.08 417.98 C 329.14 420.43 328.85 422.98 329.54 425.38 C 330.75 429.14 337.11 428.63 337.54 424.63 C 338.19 415.09 337.55 405.51 337.83 395.95 C 343.71 404.78 349.41 413.73 355.26 422.58 C 356.92 424.93 358.74 427.96 362.00 428.00 C 365.02 428.51 367.54 425.83 367.40 422.90 C 367.55 411.27 367.39 399.62 367.48 387.99 C 367.40 386.11 367.63 384.06 366.61 382.38 C 365.24 380.16 361.58 380.00 360.00 382.07 M 100.79 382.81 C 98.94 384.82 100.19 388.63 103.01 388.89 C 106.91 389.29 110.85 388.97 114.77 389.07 C 114.77 399.73 114.78 410.39 114.75 421.05 C 114.76 423.37 114.89 426.34 117.28 427.52 C 119.95 429.02 123.67 427.14 123.86 424.04 C 124.22 412.40 123.84 400.72 124.04 389.07 C 128.25 388.87 132.57 389.54 136.71 388.62 C 140.15 387.40 139.25 381.72 135.61 381.56 C 126.10 381.14 116.55 381.57 107.03 381.37 C 104.95 381.53 102.34 381.06 100.79 382.81 M 156.46 381.58 C 150.26 383.15 145.11 388.05 143.12 394.11 C 140.49 401.86 140.79 410.83 144.81 418.06 C 151.07 429.05 167.20 430.79 177.27 424.26 C 183.48 420.06 186.24 412.28 186.28 405.03 C 186.43 398.11 184.59 390.56 179.19 385.85 C 173.03 380.52 164.12 379.62 156.46 381.58 M 197.74 381.67 C 195.24 381.99 194.12 384.61 194.23 386.87 C 194.06 397.92 194.27 408.97 194.15 420.02 C 194.24 422.43 193.92 425.36 195.97 427.11 C 198.62 429.25 203.28 427.47 203.31 423.89 C 203.66 418.45 203.32 412.99 203.49 407.54 C 206.76 407.72 210.68 407.24 213.15 409.89 C 217.60 414.61 220.01 420.80 223.85 425.97 C 225.63 428.66 230.20 428.72 231.83 425.86 C 232.87 424.27 231.80 422.43 231.24 420.89 C 228.63 415.38 225.17 409.99 220.02 406.56 C 223.42 405.53 227.11 404.31 229.29 401.31 C 233.14 395.94 231.83 387.34 226.14 383.76 C 221.99 381.01 216.77 381.52 212.04 381.39 C 207.28 381.52 202.48 381.08 197.74 381.67 M 240.23 386.91 C 240.19 398.28 240.20 409.66 240.22 421.03 C 240.25 423.12 240.14 425.65 241.97 427.09 C 244.58 429.23 249.25 427.52 249.33 423.98 C 249.76 418.50 249.34 413.00 249.49 407.51 C 252.77 407.64 256.62 407.29 259.13 409.85 C 263.88 414.69 266.10 421.38 270.41 426.55 C 272.74 429.20 278.48 428.00 278.28 424.04 C 276.28 417.09 271.87 410.81 266.09 406.46 C 269.75 405.55 273.64 404.05 275.74 400.71 C 278.91 395.49 277.81 387.82 272.73 384.18 C 268.85 381.14 263.64 381.44 259.00 381.41 C 254.02 381.52 249.02 381.13 244.05 381.58 C 241.41 381.77 240.05 384.51 240.23 386.91 M 286.38 386.01 C 286.17 397.35 286.39 408.70 286.27 420.04 C 286.31 422.30 286.17 425.31 288.52 426.53 C 291.20 427.60 294.20 427.07 297.03 427.21 C 304.36 427.04 311.73 427.52 319.04 426.95 C 322.44 426.37 322.43 420.75 319.05 420.15 C 311.25 419.44 303.38 420.13 295.56 419.82 C 295.59 415.47 295.58 411.12 295.58 406.78 C 302.60 406.71 309.65 407.09 316.66 406.54 C 320.07 405.84 319.57 399.91 315.98 399.96 C 309.20 399.54 302.39 399.95 295.59 399.80 C 295.57 396.05 295.57 392.30 295.58 388.55 C 303.03 388.43 310.50 388.74 317.94 388.37 C 321.67 388.25 321.80 381.95 318.11 381.66 C 309.41 381.03 300.65 381.57 291.93 381.42 C 289.16 381.15 286.27 383.00 286.38 386.01 M 375.06 381.95 C 372.19 383.34 372.77 388.27 375.95 388.84 C 379.96 389.33 384.02 388.96 388.05 389.08 C 387.92 400.08 388.05 411.07 387.99 422.07 C 387.75 424.61 389.07 427.71 391.95 427.92 C 394.85 428.51 397.33 425.86 397.14 423.05 C 397.37 411.73 397.16 400.40 397.23 389.08 C 401.42 388.89 405.69 389.52 409.82 388.64 C 413.41 387.46 412.48 381.48 408.64 381.52 C 400.79 381.23 392.93 381.50 385.08 381.39 C 381.74 381.50 378.31 381.05 375.06 381.95 Z'
-      />
-      <path
-        fill='#248a57'
-        opacity='1.00'
-        d=' M 160.39 388.45 C 164.79 387.33 170.01 388.38 173.03 391.97 C 176.12 395.52 177.00 400.46 176.87 405.04 C 176.76 409.47 175.56 414.16 172.29 417.34 C 167.50 421.98 158.82 421.68 154.58 416.43 C 150.59 411.44 150.26 404.45 151.51 398.43 C 152.46 393.85 155.68 389.57 160.39 388.45 Z'
-      />
-      <path
-        fill='#248a57'
-        opacity='1.00'
-        d=' M 203.47 388.42 C 208.28 388.55 213.18 387.93 217.93 388.93 C 222.82 390.10 223.71 398.14 218.81 399.89 C 213.88 401.57 208.52 400.89 203.40 400.90 C 203.44 396.73 203.45 392.57 203.47 388.42 Z'
-      />
-      <path
-        fill='#248a57'
-        opacity='1.00'
-        d=' M 249.45 388.38 C 254.29 388.56 259.22 387.96 264.00 388.94 C 268.52 390.07 269.67 397.04 265.66 399.44 C 260.63 401.83 254.85 400.80 249.47 400.94 C 249.51 396.75 249.48 392.57 249.45 388.38 Z'
-      />
-    </g>
-    <g id='#74c39cff'>
-      <path
-        fill='#74c39c'
-        opacity='1.00'
-        d=' M 319.87 0.00 L 320.20 0.00 C 360.20 39.89 400.19 79.79 440.05 119.83 C 411.04 120.22 382.02 119.87 353.01 120.01 C 344.56 120.18 336.01 117.07 329.94 111.12 C 323.88 105.47 320.29 97.32 320.04 89.05 C 319.87 59.37 320.21 29.68 319.87 0.00 Z'
-      />
-    </g>
-    <g id='#fdfdfdff'>
-      <path
-        fill='#fdfdfd'
-        opacity='1.00'
-        d=' M 360.00 382.07 C 361.58 380.00 365.24 380.16 366.61 382.38 C 367.63 384.06 367.40 386.11 367.48 387.99 C 367.39 399.62 367.55 411.27 367.40 422.90 C 367.54 425.83 365.02 428.51 362.00 428.00 C 358.74 427.96 356.92 424.93 355.26 422.58 C 349.41 413.73 343.71 404.78 337.83 395.95 C 337.55 405.51 338.19 415.09 337.54 424.63 C 337.11 428.63 330.75 429.14 329.54 425.38 C 328.85 422.98 329.14 420.43 329.08 417.98 C 329.24 407.28 328.94 396.58 329.22 385.89 C 329.13 382.87 331.97 380.41 334.92 380.63 C 337.13 380.65 338.65 382.47 339.77 384.16 C 346.13 393.83 352.50 403.51 358.93 413.14 C 358.91 404.75 358.95 396.36 358.90 387.97 C 359.01 385.99 358.69 383.73 360.00 382.07 Z'
-      />
-      <path
-        fill='#fdfdfd'
-        opacity='1.00'
-        d=' M 100.79 382.81 C 102.34 381.06 104.95 381.53 107.03 381.37 C 116.55 381.57 126.10 381.14 135.61 381.56 C 139.25 381.72 140.15 387.40 136.71 388.62 C 132.57 389.54 128.25 388.87 124.04 389.07 C 123.84 400.72 124.22 412.40 123.86 424.04 C 123.67 427.14 119.95 429.02 117.28 427.52 C 114.89 426.34 114.76 423.37 114.75 421.05 C 114.78 410.39 114.77 399.73 114.77 389.07 C 110.85 388.97 106.91 389.29 103.01 388.89 C 100.19 388.63 98.94 384.82 100.79 382.81 Z'
-      />
-      <path
-        fill='#fdfdfd'
-        opacity='1.00'
-        d=' M 156.46 381.58 C 164.12 379.62 173.03 380.52 179.19 385.85 C 184.59 390.56 186.43 398.11 186.28 405.03 C 186.24 412.28 183.48 420.06 177.27 424.26 C 167.20 430.79 151.07 429.05 144.81 418.06 C 140.79 410.83 140.49 401.86 143.12 394.11 C 145.11 388.05 150.26 383.15 156.46 381.58 M 160.39 388.45 C 155.68 389.57 152.46 393.85 151.51 398.43 C 150.26 404.45 150.59 411.44 154.58 416.43 C 158.82 421.68 167.50 421.98 172.29 417.34 C 175.56 414.16 176.76 409.47 176.87 405.04 C 177.00 400.46 176.12 395.52 173.03 391.97 C 170.01 388.38 164.79 387.33 160.39 388.45 Z'
-      />
-      <path
-        fill='#fdfdfd'
-        opacity='1.00'
-        d=' M 197.74 381.67 C 202.48 381.08 207.28 381.52 212.04 381.39 C 216.77 381.52 221.99 381.01 226.14 383.76 C 231.83 387.34 233.14 395.94 229.29 401.31 C 227.11 404.31 223.42 405.53 220.02 406.56 C 225.17 409.99 228.63 415.38 231.24 420.89 C 231.80 422.43 232.87 424.27 231.83 425.86 C 230.20 428.72 225.63 428.66 223.85 425.97 C 220.01 420.80 217.60 414.61 213.15 409.89 C 210.68 407.24 206.76 407.72 203.49 407.54 C 203.32 412.99 203.66 418.45 203.31 423.89 C 203.28 427.47 198.62 429.25 195.97 427.11 C 193.92 425.36 194.24 422.43 194.15 420.02 C 194.27 408.97 194.06 397.92 194.23 386.87 C 194.12 384.61 195.24 381.99 197.74 381.67 M 203.47 388.42 C 203.45 392.57 203.44 396.73 203.40 400.90 C 208.52 400.89 213.88 401.57 218.81 399.89 C 223.71 398.14 222.82 390.10 217.93 388.93 C 213.18 387.93 208.28 388.55 203.47 388.42 Z'
-      />
-      <path
-        fill='#fdfdfd'
-        opacity='1.00'
-        d=' M 240.23 386.91 C 240.05 384.51 241.41 381.77 244.05 381.58 C 249.02 381.13 254.02 381.52 259.00 381.41 C 263.64 381.44 268.85 381.14 272.73 384.18 C 277.81 387.82 278.91 395.49 275.74 400.71 C 273.64 404.05 269.75 405.55 266.09 406.46 C 271.87 410.81 276.28 417.09 278.28 424.04 C 278.48 428.00 272.74 429.20 270.41 426.55 C 266.10 421.38 263.88 414.69 259.13 409.85 C 256.62 407.29 252.77 407.64 249.49 407.51 C 249.34 413.00 249.76 418.50 249.33 423.98 C 249.25 427.52 244.58 429.23 241.97 427.09 C 240.14 425.65 240.25 423.12 240.22 421.03 C 240.20 409.66 240.19 398.28 240.23 386.91 M 249.45 388.38 C 249.48 392.57 249.51 396.75 249.47 400.94 C 254.85 400.80 260.63 401.83 265.66 399.44 C 269.67 397.04 268.52 390.07 264.00 388.94 C 259.22 387.96 254.29 388.56 249.45 388.38 Z'
-      />
-      <path
-        fill='#fdfdfd'
-        opacity='1.00'
-        d=' M 286.38 386.01 C 286.27 383.00 289.16 381.15 291.93 381.42 C 300.65 381.57 309.41 381.03 318.11 381.66 C 321.80 381.95 321.67 388.25 317.94 388.37 C 310.50 388.74 303.03 388.43 295.58 388.55 C 295.57 392.30 295.57 396.05 295.59 399.80 C 302.39 399.95 309.20 399.54 315.98 399.96 C 319.57 399.91 320.07 405.84 316.66 406.54 C 309.65 407.09 302.60 406.71 295.58 406.78 C 295.58 411.12 295.59 415.47 295.56 419.82 C 303.38 420.13 311.25 419.44 319.05 420.15 C 322.43 420.75 322.44 426.37 319.04 426.95 C 311.73 427.52 304.36 427.04 297.03 427.21 C 294.20 427.07 291.20 427.60 288.52 426.53 C 286.17 425.31 286.31 422.30 286.27 420.04 C 286.39 408.70 286.17 397.35 286.38 386.01 Z'
-      />
-      <path
-        fill='#fdfdfd'
-        opacity='1.00'
-        d=' M 375.06 381.95 C 378.31 381.05 381.74 381.50 385.08 381.39 C 392.93 381.50 400.79 381.23 408.64 381.52 C 412.48 381.48 413.41 387.46 409.82 388.64 C 405.69 389.52 401.42 388.89 397.23 389.08 C 397.16 400.40 397.37 411.73 397.14 423.05 C 397.33 425.86 394.85 428.51 391.95 427.92 C 389.07 427.71 387.75 424.61 387.99 422.07 C 388.05 411.07 387.92 400.08 388.05 389.08 C 384.02 388.96 379.96 389.33 375.95 388.84 C 372.77 388.27 372.19 383.34 375.06 381.95 Z'
-      />
-    </g>
-  </svg>
-)
+  return (
+    <svg
+      height='80px'
+      width='80px'
+      fill={color || primary}
+      xmlns='http://www.w3.org/2000/svg'
+      xmlnsXlink='http://www.w3.org/1999/xlink'
+      version='1.1'
+      x='0px'
+      y='0px'
+      viewBox='0 0 100 100'
+      enableBackground='new 0 0 100 100'
+      xmlSpace='preserve'
+    >
+      <g>
+        <path d='M18.293,93.801c0.066,0.376,0.284,0.718,0.597,0.937c0.313,0.219,0.708,0.307,1.085,0.241l70.058-12.353   c0.376-0.066,0.718-0.284,0.937-0.597c0.219-0.313,0.307-0.708,0.24-1.085l-9.502-53.891c-0.139-0.79-0.892-1.317-1.682-1.178   l-19.402,3.421L47.997,14.16c0.241-0.706,0.375-1.456,0.375-2.229c0-0.399-0.035-0.804-0.106-1.209C47.671,7.363,44.757,5,41.455,5   c-0.4,0-0.804,0.035-1.209,0.106h0c-3.359,0.595-5.723,3.509-5.723,6.812c0,0.4,0.035,0.804,0.106,1.209   c0.178,1.005,0.567,1.918,1.109,2.709l-6.875,19.061L9.968,38.228c-0.79,0.139-1.317,0.892-1.177,1.682L18.293,93.801z    M40.75,7.966L40.75,7.966c0.239-0.042,0.474-0.062,0.705-0.062c1.909,0,3.612,1.373,3.953,3.324v0   c0.042,0.238,0.062,0.473,0.062,0.704c0,1.908-1.373,3.612-3.323,3.953h0.001c-0.238,0.042-0.473,0.062-0.705,0.062   c-1.908,0-3.612-1.373-3.953-3.323c-0.042-0.238-0.062-0.473-0.062-0.705C37.427,10.01,38.799,8.306,40.75,7.966z M38.059,17.96   c1.012,0.569,2.17,0.89,3.383,0.89c0.399,0,0.804-0.034,1.208-0.106h0.001c1.48-0.263,2.766-0.976,3.743-1.974l10.935,13.108   L32.16,34.315L38.059,17.96z M29.978,37.648c0.136-0.004,0.268-0.029,0.396-0.07l29.75-5.246c0.134-0.006,0.266-0.027,0.395-0.07   l18.582-3.277l8.998,51.031L20.9,91.867l-8.998-51.032L29.978,37.648z' />
+        <path d='M49.984,75.561c0.809,0,1.627-0.065,2.449-0.199l0.001,0c7.425-1.213,12.701-7.627,12.701-14.919   c0-0.809-0.065-1.627-0.199-2.449c-1.213-7.425-7.626-12.701-14.919-12.701c-0.808,0-1.627,0.065-2.45,0.199   c-7.425,1.213-12.701,7.626-12.701,14.918c0,0.808,0.065,1.627,0.199,2.449C36.278,70.284,42.692,75.561,49.984,75.561z    M51.967,72.496c-0.668,0.109-1.33,0.161-1.983,0.161c-5.883,0-11.079-4.265-12.053-10.265c-0.109-0.668-0.161-1.33-0.161-1.983   c0-2.108,0.555-4.123,1.534-5.892l19.693,14.176C57.206,70.645,54.782,72.039,51.967,72.496z M48.034,48.357L48.034,48.357   c0.668-0.109,1.329-0.161,1.983-0.161c5.882,0,11.079,4.265,12.053,10.265c0.109,0.667,0.161,1.329,0.161,1.983   c0,2.109-0.556,4.127-1.536,5.897L41.001,52.163C42.791,50.21,45.217,48.814,48.034,48.357z' />
+        <polygon points='47.567,45.492 47.567,45.492 47.568,45.491  ' />
+      </g>
+    </svg>
+  )
+}
+
+export const AddItemIcon = () => {
+  const primary = useTheme().palette.primary.main
+
+  return (
+    <svg
+      height='100px'
+      width='100px'
+      fill={primary}
+      viewBox='0 0 452 452'
+      version='1.1'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <g id='#000000'>
+        <path
+          opacity='1.00'
+          d=' M 210.49 18.69 C 244.92 16.12 280.02 22.13 311.46 36.47 C 344.90 51.54 374.16 75.69 395.41 105.58 C 415.62 133.87 428.55 167.34 432.48 201.89 C 438.07 248.86 427.02 297.61 401.45 337.43 C 382.92 366.59 357.02 391.04 326.80 407.80 C 300.81 422.31 271.64 431.08 241.96 433.26 C 207.37 435.97 172.14 429.83 140.54 415.51 C 109.95 401.69 82.82 380.33 62.16 353.86 C 39.25 324.67 24.38 289.21 19.78 252.38 C 14.94 214.51 20.65 175.31 36.47 140.54 C 54.11 101.38 84.24 67.99 121.37 46.39 C 148.44 30.52 179.19 20.98 210.49 18.69 M 213.46 36.60 C 178.91 38.80 145.03 50.71 116.76 70.72 C 84.67 93.21 59.84 125.88 46.91 162.88 C 34.87 196.99 32.96 234.54 41.25 269.73 C 48.89 302.45 65.53 332.98 88.79 357.21 C 113.91 383.56 146.78 402.45 182.25 410.72 C 216.67 418.86 253.37 417.21 286.87 405.85 C 329.85 391.49 367.13 361.01 389.89 321.85 C 406.02 294.41 414.96 262.84 415.73 231.03 C 416.71 196.59 408.11 161.91 390.97 132.00 C 372.31 99.13 343.57 72.09 309.61 55.49 C 279.95 40.89 246.43 34.40 213.46 36.60 Z'
+        />
+        <path
+          opacity='1.00'
+          d=' M 217.02 117.63 C 223.01 117.45 228.99 117.45 234.98 117.63 C 235.16 150.72 234.93 183.81 235.09 216.89 C 268.18 217.03 301.28 216.82 334.38 216.99 C 334.57 222.99 334.57 229.00 334.38 235.01 C 301.28 235.18 268.18 234.97 235.09 235.11 C 234.93 268.19 235.16 301.28 234.98 334.37 C 228.99 334.55 223.00 334.55 217.02 334.37 C 216.84 301.28 217.07 268.19 216.92 235.11 C 183.82 234.97 150.72 235.17 117.62 235.01 C 117.43 229.00 117.43 222.99 117.62 216.99 C 150.72 216.82 183.82 217.03 216.91 216.89 C 217.07 183.81 216.84 150.72 217.02 117.63 Z'
+        />
+      </g>
+    </svg>
+  )
+}
+
+export const TorrentIcon = () => {
+  const primary = useTheme().palette.primary.main
+  const secondaryColor = primary === '#00a572' ? '#74c39c' : '#4a5255'
+
+  return (
+    <svg width='150px' height='150px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg'>
+      <g id={primary}>
+        <path
+          fill={primary}
+          opacity='1.00'
+          d=' M 102.41 0.00 L 319.87 0.00 C 320.21 29.68 319.87 59.37 320.04 89.05 C 320.29 97.32 323.88 105.47 329.94 111.12 C 336.01 117.07 344.56 120.18 353.01 120.01 C 382.02 119.87 411.04 120.22 440.05 119.83 C 439.94 236.88 440.04 353.93 440.00 470.98 C 440.01 478.16 440.50 485.68 437.47 492.41 C 432.79 503.85 421.05 511.80 408.71 512.00 L 103.28 512.00 C 90.95 511.79 79.20 503.84 74.53 492.42 C 72.06 486.96 71.87 480.87 71.99 474.97 C 72.01 327.63 71.99 180.30 72.00 32.96 C 71.95 27.61 73.03 22.22 75.52 17.46 C 80.55 7.39 91.19 0.57 102.41 0.00 M 360.00 382.07 C 358.69 383.73 359.01 385.99 358.90 387.97 C 358.95 396.36 358.91 404.75 358.93 413.14 C 352.50 403.51 346.13 393.83 339.77 384.16 C 338.65 382.47 337.13 380.65 334.92 380.63 C 331.97 380.41 329.13 382.87 329.22 385.89 C 328.94 396.58 329.24 407.28 329.08 417.98 C 329.14 420.43 328.85 422.98 329.54 425.38 C 330.75 429.14 337.11 428.63 337.54 424.63 C 338.19 415.09 337.55 405.51 337.83 395.95 C 343.71 404.78 349.41 413.73 355.26 422.58 C 356.92 424.93 358.74 427.96 362.00 428.00 C 365.02 428.51 367.54 425.83 367.40 422.90 C 367.55 411.27 367.39 399.62 367.48 387.99 C 367.40 386.11 367.63 384.06 366.61 382.38 C 365.24 380.16 361.58 380.00 360.00 382.07 M 100.79 382.81 C 98.94 384.82 100.19 388.63 103.01 388.89 C 106.91 389.29 110.85 388.97 114.77 389.07 C 114.77 399.73 114.78 410.39 114.75 421.05 C 114.76 423.37 114.89 426.34 117.28 427.52 C 119.95 429.02 123.67 427.14 123.86 424.04 C 124.22 412.40 123.84 400.72 124.04 389.07 C 128.25 388.87 132.57 389.54 136.71 388.62 C 140.15 387.40 139.25 381.72 135.61 381.56 C 126.10 381.14 116.55 381.57 107.03 381.37 C 104.95 381.53 102.34 381.06 100.79 382.81 M 156.46 381.58 C 150.26 383.15 145.11 388.05 143.12 394.11 C 140.49 401.86 140.79 410.83 144.81 418.06 C 151.07 429.05 167.20 430.79 177.27 424.26 C 183.48 420.06 186.24 412.28 186.28 405.03 C 186.43 398.11 184.59 390.56 179.19 385.85 C 173.03 380.52 164.12 379.62 156.46 381.58 M 197.74 381.67 C 195.24 381.99 194.12 384.61 194.23 386.87 C 194.06 397.92 194.27 408.97 194.15 420.02 C 194.24 422.43 193.92 425.36 195.97 427.11 C 198.62 429.25 203.28 427.47 203.31 423.89 C 203.66 418.45 203.32 412.99 203.49 407.54 C 206.76 407.72 210.68 407.24 213.15 409.89 C 217.60 414.61 220.01 420.80 223.85 425.97 C 225.63 428.66 230.20 428.72 231.83 425.86 C 232.87 424.27 231.80 422.43 231.24 420.89 C 228.63 415.38 225.17 409.99 220.02 406.56 C 223.42 405.53 227.11 404.31 229.29 401.31 C 233.14 395.94 231.83 387.34 226.14 383.76 C 221.99 381.01 216.77 381.52 212.04 381.39 C 207.28 381.52 202.48 381.08 197.74 381.67 M 240.23 386.91 C 240.19 398.28 240.20 409.66 240.22 421.03 C 240.25 423.12 240.14 425.65 241.97 427.09 C 244.58 429.23 249.25 427.52 249.33 423.98 C 249.76 418.50 249.34 413.00 249.49 407.51 C 252.77 407.64 256.62 407.29 259.13 409.85 C 263.88 414.69 266.10 421.38 270.41 426.55 C 272.74 429.20 278.48 428.00 278.28 424.04 C 276.28 417.09 271.87 410.81 266.09 406.46 C 269.75 405.55 273.64 404.05 275.74 400.71 C 278.91 395.49 277.81 387.82 272.73 384.18 C 268.85 381.14 263.64 381.44 259.00 381.41 C 254.02 381.52 249.02 381.13 244.05 381.58 C 241.41 381.77 240.05 384.51 240.23 386.91 M 286.38 386.01 C 286.17 397.35 286.39 408.70 286.27 420.04 C 286.31 422.30 286.17 425.31 288.52 426.53 C 291.20 427.60 294.20 427.07 297.03 427.21 C 304.36 427.04 311.73 427.52 319.04 426.95 C 322.44 426.37 322.43 420.75 319.05 420.15 C 311.25 419.44 303.38 420.13 295.56 419.82 C 295.59 415.47 295.58 411.12 295.58 406.78 C 302.60 406.71 309.65 407.09 316.66 406.54 C 320.07 405.84 319.57 399.91 315.98 399.96 C 309.20 399.54 302.39 399.95 295.59 399.80 C 295.57 396.05 295.57 392.30 295.58 388.55 C 303.03 388.43 310.50 388.74 317.94 388.37 C 321.67 388.25 321.80 381.95 318.11 381.66 C 309.41 381.03 300.65 381.57 291.93 381.42 C 289.16 381.15 286.27 383.00 286.38 386.01 M 375.06 381.95 C 372.19 383.34 372.77 388.27 375.95 388.84 C 379.96 389.33 384.02 388.96 388.05 389.08 C 387.92 400.08 388.05 411.07 387.99 422.07 C 387.75 424.61 389.07 427.71 391.95 427.92 C 394.85 428.51 397.33 425.86 397.14 423.05 C 397.37 411.73 397.16 400.40 397.23 389.08 C 401.42 388.89 405.69 389.52 409.82 388.64 C 413.41 387.46 412.48 381.48 408.64 381.52 C 400.79 381.23 392.93 381.50 385.08 381.39 C 381.74 381.50 378.31 381.05 375.06 381.95 Z'
+        />
+        <path
+          fill={primary}
+          opacity='1.00'
+          d=' M 160.39 388.45 C 164.79 387.33 170.01 388.38 173.03 391.97 C 176.12 395.52 177.00 400.46 176.87 405.04 C 176.76 409.47 175.56 414.16 172.29 417.34 C 167.50 421.98 158.82 421.68 154.58 416.43 C 150.59 411.44 150.26 404.45 151.51 398.43 C 152.46 393.85 155.68 389.57 160.39 388.45 Z'
+        />
+        <path
+          fill={primary}
+          opacity='1.00'
+          d=' M 203.47 388.42 C 208.28 388.55 213.18 387.93 217.93 388.93 C 222.82 390.10 223.71 398.14 218.81 399.89 C 213.88 401.57 208.52 400.89 203.40 400.90 C 203.44 396.73 203.45 392.57 203.47 388.42 Z'
+        />
+        <path
+          fill={primary}
+          opacity='1.00'
+          d=' M 249.45 388.38 C 254.29 388.56 259.22 387.96 264.00 388.94 C 268.52 390.07 269.67 397.04 265.66 399.44 C 260.63 401.83 254.85 400.80 249.47 400.94 C 249.51 396.75 249.48 392.57 249.45 388.38 Z'
+        />
+      </g>
+      <g id={secondaryColor}>
+        <path
+          fill={secondaryColor}
+          opacity='1.00'
+          d=' M 319.87 0.00 L 320.20 0.00 C 360.20 39.89 400.19 79.79 440.05 119.83 C 411.04 120.22 382.02 119.87 353.01 120.01 C 344.56 120.18 336.01 117.07 329.94 111.12 C 323.88 105.47 320.29 97.32 320.04 89.05 C 319.87 59.37 320.21 29.68 319.87 0.00 Z'
+        />
+      </g>
+      <g id='#fdfdfd'>
+        <path
+          fill='#fdfdfd'
+          opacity='1.00'
+          d=' M 360.00 382.07 C 361.58 380.00 365.24 380.16 366.61 382.38 C 367.63 384.06 367.40 386.11 367.48 387.99 C 367.39 399.62 367.55 411.27 367.40 422.90 C 367.54 425.83 365.02 428.51 362.00 428.00 C 358.74 427.96 356.92 424.93 355.26 422.58 C 349.41 413.73 343.71 404.78 337.83 395.95 C 337.55 405.51 338.19 415.09 337.54 424.63 C 337.11 428.63 330.75 429.14 329.54 425.38 C 328.85 422.98 329.14 420.43 329.08 417.98 C 329.24 407.28 328.94 396.58 329.22 385.89 C 329.13 382.87 331.97 380.41 334.92 380.63 C 337.13 380.65 338.65 382.47 339.77 384.16 C 346.13 393.83 352.50 403.51 358.93 413.14 C 358.91 404.75 358.95 396.36 358.90 387.97 C 359.01 385.99 358.69 383.73 360.00 382.07 Z'
+        />
+        <path
+          fill='#fdfdfd'
+          opacity='1.00'
+          d=' M 100.79 382.81 C 102.34 381.06 104.95 381.53 107.03 381.37 C 116.55 381.57 126.10 381.14 135.61 381.56 C 139.25 381.72 140.15 387.40 136.71 388.62 C 132.57 389.54 128.25 388.87 124.04 389.07 C 123.84 400.72 124.22 412.40 123.86 424.04 C 123.67 427.14 119.95 429.02 117.28 427.52 C 114.89 426.34 114.76 423.37 114.75 421.05 C 114.78 410.39 114.77 399.73 114.77 389.07 C 110.85 388.97 106.91 389.29 103.01 388.89 C 100.19 388.63 98.94 384.82 100.79 382.81 Z'
+        />
+        <path
+          fill='#fdfdfd'
+          opacity='1.00'
+          d=' M 156.46 381.58 C 164.12 379.62 173.03 380.52 179.19 385.85 C 184.59 390.56 186.43 398.11 186.28 405.03 C 186.24 412.28 183.48 420.06 177.27 424.26 C 167.20 430.79 151.07 429.05 144.81 418.06 C 140.79 410.83 140.49 401.86 143.12 394.11 C 145.11 388.05 150.26 383.15 156.46 381.58 M 160.39 388.45 C 155.68 389.57 152.46 393.85 151.51 398.43 C 150.26 404.45 150.59 411.44 154.58 416.43 C 158.82 421.68 167.50 421.98 172.29 417.34 C 175.56 414.16 176.76 409.47 176.87 405.04 C 177.00 400.46 176.12 395.52 173.03 391.97 C 170.01 388.38 164.79 387.33 160.39 388.45 Z'
+        />
+        <path
+          fill='#fdfdfd'
+          opacity='1.00'
+          d=' M 197.74 381.67 C 202.48 381.08 207.28 381.52 212.04 381.39 C 216.77 381.52 221.99 381.01 226.14 383.76 C 231.83 387.34 233.14 395.94 229.29 401.31 C 227.11 404.31 223.42 405.53 220.02 406.56 C 225.17 409.99 228.63 415.38 231.24 420.89 C 231.80 422.43 232.87 424.27 231.83 425.86 C 230.20 428.72 225.63 428.66 223.85 425.97 C 220.01 420.80 217.60 414.61 213.15 409.89 C 210.68 407.24 206.76 407.72 203.49 407.54 C 203.32 412.99 203.66 418.45 203.31 423.89 C 203.28 427.47 198.62 429.25 195.97 427.11 C 193.92 425.36 194.24 422.43 194.15 420.02 C 194.27 408.97 194.06 397.92 194.23 386.87 C 194.12 384.61 195.24 381.99 197.74 381.67 M 203.47 388.42 C 203.45 392.57 203.44 396.73 203.40 400.90 C 208.52 400.89 213.88 401.57 218.81 399.89 C 223.71 398.14 222.82 390.10 217.93 388.93 C 213.18 387.93 208.28 388.55 203.47 388.42 Z'
+        />
+        <path
+          fill='#fdfdfd'
+          opacity='1.00'
+          d=' M 240.23 386.91 C 240.05 384.51 241.41 381.77 244.05 381.58 C 249.02 381.13 254.02 381.52 259.00 381.41 C 263.64 381.44 268.85 381.14 272.73 384.18 C 277.81 387.82 278.91 395.49 275.74 400.71 C 273.64 404.05 269.75 405.55 266.09 406.46 C 271.87 410.81 276.28 417.09 278.28 424.04 C 278.48 428.00 272.74 429.20 270.41 426.55 C 266.10 421.38 263.88 414.69 259.13 409.85 C 256.62 407.29 252.77 407.64 249.49 407.51 C 249.34 413.00 249.76 418.50 249.33 423.98 C 249.25 427.52 244.58 429.23 241.97 427.09 C 240.14 425.65 240.25 423.12 240.22 421.03 C 240.20 409.66 240.19 398.28 240.23 386.91 M 249.45 388.38 C 249.48 392.57 249.51 396.75 249.47 400.94 C 254.85 400.80 260.63 401.83 265.66 399.44 C 269.67 397.04 268.52 390.07 264.00 388.94 C 259.22 387.96 254.29 388.56 249.45 388.38 Z'
+        />
+        <path
+          fill='#fdfdfd'
+          opacity='1.00'
+          d=' M 286.38 386.01 C 286.27 383.00 289.16 381.15 291.93 381.42 C 300.65 381.57 309.41 381.03 318.11 381.66 C 321.80 381.95 321.67 388.25 317.94 388.37 C 310.50 388.74 303.03 388.43 295.58 388.55 C 295.57 392.30 295.57 396.05 295.59 399.80 C 302.39 399.95 309.20 399.54 315.98 399.96 C 319.57 399.91 320.07 405.84 316.66 406.54 C 309.65 407.09 302.60 406.71 295.58 406.78 C 295.58 411.12 295.59 415.47 295.56 419.82 C 303.38 420.13 311.25 419.44 319.05 420.15 C 322.43 420.75 322.44 426.37 319.04 426.95 C 311.73 427.52 304.36 427.04 297.03 427.21 C 294.20 427.07 291.20 427.60 288.52 426.53 C 286.17 425.31 286.31 422.30 286.27 420.04 C 286.39 408.70 286.17 397.35 286.38 386.01 Z'
+        />
+        <path
+          fill='#fdfdfd'
+          opacity='1.00'
+          d=' M 375.06 381.95 C 378.31 381.05 381.74 381.50 385.08 381.39 C 392.93 381.50 400.79 381.23 408.64 381.52 C 412.48 381.48 413.41 387.46 409.82 388.64 C 405.69 389.52 401.42 388.89 397.23 389.08 C 397.16 400.40 397.37 411.73 397.14 423.05 C 397.33 425.86 394.85 428.51 391.95 427.92 C 389.07 427.71 387.75 424.61 387.99 422.07 C 388.05 411.07 387.92 400.08 388.05 389.08 C 384.02 388.96 379.96 389.33 375.95 388.84 C 372.77 388.27 372.19 383.34 375.06 381.95 Z'
+        />
+      </g>
+    </svg>
+  )
+}
--- a/web/src/style/colors.js
+++ b/web/src/style/colors.js
@@ -1,8 +1,105 @@
+import { rgba } from 'polished'
+
 export const themeColors = {
-  light: {},
-  dark: {},
+  light: {
+    app: {
+      headerToggleColor: '#4db380',
+      appSecondaryColor: '#f1eff3',
+      sidebarBGColor: '#575757',
+      sidebarFillColor: '#dee3e5',
+    },
+    torrentCard: {
+      accentCardColor: '#337a57',
+      buttonBGColor: rgba('#337a57', 0.5),
+      cardPrimaryColor: '#00a572',
+      cardSecondaryColor: '#74c39c',
+    },
+    dialogTorrentDetailsContent: {
+      posterBGColor: '#74c39c',
+      gradientStartColor: '#e4f6ed',
+      gradientEndColor: '#b5dec9',
+      chacheSectionBGColor: '#88cdaa',
+      fontColor: '#000',
+      subNameFontColor: '#7c7b7c',
+      torrentFilesSectionBGColor: '#f1eff3',
+    },
+    detailedView: {
+      gradientStartColor: '#e4f6ed',
+      gradientEndColor: '#b5dec9',
+      cacheSectionBGColor: '#fff',
+    },
+    addDialog: {
+      gradientStartColor: '#e4f6ed',
+      gradientEndColor: '#b5dec9',
+      fontColor: '#000',
+      notificationErrorBGColor: '#cda184',
+      notificationSuccessBGColor: '#88cdaa',
+      languageSwitchBGColor: '#74c39c',
+      languageSwitchFontColor: '#e4f6ed',
+      posterBGColor: '#74c39c',
+    },
+    torrentFunctions: {
+      fontColor: '#000',
+    },
+    table: {
+      defaultPrimaryColor: '#009879',
+      defaultSecondaryColor: '#00a383',
+      defaultTertiaryColor: '#03aa89',
+    },
+  },
+  dark: {
+    app: {
+      headerToggleColor: '#545a5e',
+      appSecondaryColor: '#545a5e',
+      sidebarBGColor: '#323637',
+      sidebarFillColor: '#dee3e5',
+    },
+    torrentCard: {
+      accentCardColor: '#323637',
+      buttonBGColor: rgba('#323637', 0.5),
+      cardPrimaryColor: '#545a5e',
+      cardSecondaryColor: rgba('#dee3e5', 0.4),
+    },
+    dialogTorrentDetailsContent: {
+      posterBGColor: rgba('#dee3e5', 0.4),
+      gradientStartColor: '#656f76',
+      gradientEndColor: '#545a5e',
+      chacheSectionBGColor: '#3c4244',
+      fontColor: '#f1eff3',
+      subNameFontColor: '#dee3e5',
+      torrentFilesSectionBGColor: rgba('#545a5e', 0.9),
+    },
+    detailedView: {
+      gradientStartColor: '#656f76',
+      gradientEndColor: '#545a5e',
+      cacheSectionBGColor: rgba('#545a5e', 0.7),
+    },
+    addDialog: {
+      gradientStartColor: '#656f76',
+      gradientEndColor: '#545a5e',
+      fontColor: '#fff',
+      notificationErrorBGColor: '#c82e3f',
+      notificationSuccessBGColor: '#323637',
+      languageSwitchBGColor: '#545a5e',
+      languageSwitchFontColor: '#dee3e5',
+      posterBGColor: '#dee3e5',
+    },
+    torrentFunctions: {
+      fontColor: '#f1eff3',
+    },
+    table: {
+      defaultPrimaryColor: '#323637',
+      defaultSecondaryColor: rgba('#545a5e', 0.9),
+      defaultTertiaryColor: '#545a5e',
+    },
+  },
 }

 export const mainColors = {
-  primary: '#00a572',
+  light: {
+    primary: '#00a572',
+  },
+  dark: {
+    primary: '#323637',
+  },
 }
--- a/web/src/style/getStyledComponentsTheme.js
+++ b/web/src/style/getStyledComponentsTheme.js
@@ -1,3 +1,3 @@
 import { mainColors, themeColors } from './colors'

-export default type => ({ ...themeColors[type], ...mainColors })
+export default type => ({ ...themeColors[type], ...mainColors[type] })
--- a/web/src/style/materialUISetup.js
+++ b/web/src/style/materialUISetup.js
@@ -1,45 +1,51 @@
-import useMediaQuery from '@material-ui/core/useMediaQuery'
-import { createMuiTheme } from '@material-ui/core'
-import { useMemo } from 'react'
+import { createMuiTheme, useMediaQuery } from '@material-ui/core'
+import { useEffect, useMemo, useState } from 'react'

 import { mainColors } from './colors'

-const primary = { main: mainColors.primary }
 const typography = { fontFamily: 'Open Sans, sans-serif' }

-// https://material-ui.com/ru/customization/default-theme/
 export const darkTheme = createMuiTheme({
  typography,
  palette: {
    type: 'dark',
-    background: { paper: '#575757' },
-    primary,
+    primary: { main: mainColors.dark.primary },
  },
 })
 export const lightTheme = createMuiTheme({
  typography,
  palette: {
    type: 'light',
-    background: { paper: '#f1f1f1' },
-    primary,
+    primary: { main: mainColors.light.primary },
  },
 })

+export const THEME_MODES = { LIGHT: 'light', DARK: 'dark', AUTO: 'auto' }
+
 export const useMaterialUITheme = () => {
-  const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
+  const currentModeState = useMediaQuery('(prefers-color-scheme: dark)')
+  const [isDarkMode, setIsDarkMode] = useState(currentModeState)
+  const [currentThemeMode, setCurrentThemeMode] = useState(THEME_MODES.LIGHT)
+
+  useEffect(() => {
+    currentThemeMode === THEME_MODES.LIGHT && setIsDarkMode(false)
+    currentThemeMode === THEME_MODES.DARK && setIsDarkMode(true)
+    currentThemeMode === THEME_MODES.AUTO && setIsDarkMode(currentModeState)
+  }, [currentModeState, currentThemeMode])
+
+  const theme = isDarkMode ? THEME_MODES.DARK : THEME_MODES.LIGHT

  const muiTheme = useMemo(
    () =>
      createMuiTheme({
        typography,
        palette: {
-          // type: isDarkMode ? 'dark' : 'light',
-          type: 'light',
-          primary,
+          type: theme,
+          primary: { main: mainColors[theme].primary },
        },
      }),
-    [],
+    [theme],
  )

-  return [isDarkMode, muiTheme]
+  return [isDarkMode, currentThemeMode, setCurrentThemeMode, muiTheme]
 }