diff --git a/build-all.sh b/build-all.sh
index 55ce596..15ce480 100755
--- a/build-all.sh
+++ b/build-all.sh
@@ -56,7 +56,7 @@ for PLATFORM in "${PLATFORMS[@]}"; do
set_goarm "$GOARCH"
BIN_FILENAME="${OUTPUT}-${GOOS}-${GOARCH}${GOARM}"
if [[ "${GOOS}" == "windows" ]]; then BIN_FILENAME="${BIN_FILENAME}.exe"; fi
- CMD="GOOS=${GOOS} GOARCH=${GOARCH} ${GO_ARM} CGO_ENABLED=1 ${GOBIN} build ${BUILD_FLAGS} -o ${BIN_FILENAME} ./cmd"
+ CMD="GOOS=${GOOS} GOARCH=${GOARCH} ${GO_ARM} ${GOBIN} build ${BUILD_FLAGS} -o ${BIN_FILENAME} ./cmd"
echo "${CMD}"
eval "$CMD" || FAILURES="${FAILURES} ${GOOS}/${GOARCH}${GOARM}"
done
diff --git a/web/src/components/About.jsx b/web/src/components/About.jsx
index 58cae8a..2b6b0aa 100644
--- a/web/src/components/About.jsx
+++ b/web/src/components/About.jsx
@@ -11,6 +11,8 @@ 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 { lightTheme } from 'components/App'
export default function AboutDialog() {
const { t } = useTranslation()
@@ -29,39 +31,55 @@ export default function AboutDialog() {
-
+
)
}
diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx
index 7cefcc4..ea516bb 100644
--- a/web/src/components/Add/AddDialog.jsx
+++ b/web/src/components/Add/AddDialog.jsx
@@ -12,6 +12,8 @@ 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 'components/App'
import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers'
import { ButtonWrapper, Content, Header } from './style'
@@ -204,69 +206,75 @@ export default function AddDialog({
}
return (
-
+
)
}
diff --git a/web/src/components/App/Sidebar.jsx b/web/src/components/App/Sidebar.jsx
index 218de18..36a17ec 100644
--- a/web/src/components/App/Sidebar.jsx
+++ b/web/src/components/App/Sidebar.jsx
@@ -21,29 +21,19 @@ const Sidebar = ({ isDrawerOpen, setIsDonationDialogOpen, isOffline, isLoading }
-
-
-
-
-
-
-
-
-
-
-
setIsDonationDialogOpen(true)}>
+
)
diff --git a/web/src/components/App/index.jsx b/web/src/components/App/index.jsx
index 39994a6..df8c6b6 100644
--- a/web/src/components/App/index.jsx
+++ b/web/src/components/App/index.jsx
@@ -1,6 +1,7 @@
-import CssBaseline from '@material-ui/core/CssBaseline'
+import useMediaQuery from '@material-ui/core/useMediaQuery'
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core'
-import { useEffect, useState } from 'react'
+import CssBaseline from '@material-ui/core/CssBaseline'
+import { useEffect, useMemo, 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'
@@ -11,21 +12,50 @@ import TorrentList from 'components/TorrentList'
import DonateSnackbar from 'components/Donate'
import DonateDialog from 'components/Donate/DonateDialog'
import useChangeLanguage from 'utils/useChangeLanguage'
+import { ThemeProvider } from '@material-ui/core/styles'
import { useQuery } from 'react-query'
import { getTorrents } from 'utils/Utils'
import { AppWrapper, AppHeader, LanguageSwitch } from './style'
import Sidebar from './Sidebar'
-const baseTheme = createMuiTheme({
- palette: { primary: { main: '#00a572' }, secondary: { main: '#ffa724' }, tonalOffset: 0.2 },
+// https://material-ui.com/ru/customization/default-theme/
+export const darkTheme = createMuiTheme({
+ palette: {
+ type: 'dark',
+ primary: { main: '#00a572' },
+ background: { paper: '#575757' },
+ },
+ typography: { fontFamily: 'Open Sans, sans-serif' },
+})
+export const lightTheme = createMuiTheme({
+ palette: {
+ type: 'light',
+ primary: { main: '#00a572' },
+ background: { paper: '#f1f1f1' },
+ },
typography: { fontFamily: 'Open Sans, sans-serif' },
})
export default function App() {
+ const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
const [isDrawerOpen, setIsDrawerOpen] = useState(false)
const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false)
const [torrServerVersion, setTorrServerVersion] = useState('')
+ // https://material-ui.com/ru/customization/palette/
+ const baseTheme = useMemo(
+ () =>
+ createMuiTheme({
+ palette: {
+ type: prefersDarkMode ? 'dark' : 'light',
+ primary: { main: '#00a572' },
+ secondary: { main: '#ffa724' },
+ tonalOffset: 0.2,
+ },
+ typography: { fontFamily: 'Open Sans, sans-serif' },
+ }),
+ [prefersDarkMode],
+ )
const [currentLang, changeLang] = useChangeLanguage()
const [isOffline, setIsOffline] = useState(false)
const { data: torrents, isLoading } = useQuery('torrents', getTorrents, {
@@ -66,17 +96,18 @@ export default function App() {
-
-
-
+
+
+
-
- {isDonationDialogOpen && setIsDonationDialogOpen(false)} />}
+
+ {isDonationDialogOpen && setIsDonationDialogOpen(false)} />}
+
{!JSON.parse(localStorage.getItem('snackbarIsClosed')) && }
diff --git a/web/src/components/App/style.js b/web/src/components/App/style.js
index b36fe8b..6e31860 100644
--- a/web/src/components/App/style.js
+++ b/web/src/components/App/style.js
@@ -19,14 +19,14 @@ export const CenteredGrid = styled.div`
export const AppHeader = styled.div`
background: #00a572;
- color: rgba(0, 0, 0, 0.87);
+ color: #fff;
grid-area: head;
display: grid;
grid-auto-flow: column;
align-items: center;
grid-template-columns: repeat(2, max-content) 1fr;
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%);
- padding: 0 24px;
+ padding: 0 16px;
z-index: 3;
`
export const AppSidebarStyle = styled.div`
@@ -37,7 +37,8 @@ export const AppSidebarStyle = styled.div`
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: #eee;
+ background: #575757;
+ color: #eee;
white-space: nowrap;
`}
`
@@ -76,7 +77,7 @@ export const LanguageSwitch = styled.div`
font-weight: 600;
display: grid;
place-items: center;
- color: #44795e;
+ color: #fff;
:hover {
background: #7ec9a3;
diff --git a/web/src/components/CloseServer.jsx b/web/src/components/CloseServer.jsx
index 4ede8db..f68541b 100644
--- a/web/src/components/CloseServer.jsx
+++ b/web/src/components/CloseServer.jsx
@@ -3,6 +3,8 @@ import { Button, Dialog, DialogActions, DialogTitle, ListItem, ListItemIcon, Lis
import { PowerSettingsNew as PowerSettingsNewIcon } from '@material-ui/icons'
import { shutdownHost } from 'utils/Hosts'
import { useTranslation } from 'react-i18next'
+import { ThemeProvider } from '@material-ui/core/styles'
+import { lightTheme } from 'components/App'
export default function CloseServer({ isOffline, isLoading }) {
const { t } = useTranslation()
@@ -20,26 +22,28 @@ export default function CloseServer({ isOffline, isLoading }) {
-
+
)
}
diff --git a/web/src/components/Donate/DonateDialog.jsx b/web/src/components/Donate/DonateDialog.jsx
index 4c5c98c..d3902f5 100644
--- a/web/src/components/Donate/DonateDialog.jsx
+++ b/web/src/components/Donate/DonateDialog.jsx
@@ -15,7 +15,7 @@ export default function DonateDialog({ onClose }) {
const { t } = useTranslation()
return (
-