feat(core): dark mode basic feature support #187

src/app/app.css

@@ -269,4 +269,21 @@ body::-webkit-scrollbar-thumb {
 	fill: #888888;
 	height: 26px;
 	margin-right: 8px;
+}
+
+div.darkMode {
+	background-color: #1e1e1e;
+	color: #fcfcfc;
+}
+
+div.darkMode .torrentName {
+	color: #fcfcfc !important;
+}
+
+div.darkMode .torrentSize div {
+	color: #f7f7f7 !important;
+}
+
+div.darkMode .info-table {
+	color: #f7f7f7 !important;
 }

src/app/app.js

@@ -149,6 +149,7 @@ class App extends Component {
 		super(props)
 		window.torrentSocket.emit('config', (config) => {
 			window.initConfig = config
+			window.darkMode = config.darkMode;
 			changeLanguage(config.language, () => {
 				if(appReady)
 					this.forceUpdate()
@@ -191,6 +192,12 @@ class App extends Component {
 			changeLanguage(lang, () => this.forceUpdate())
 		})
 
+		window.torrentSocket.on('changeDarkMode', (darkMode) => {
+			console.log('changed darkMode to ' + darkMode)
+			window.darkMode = darkMode;
+			this.forceUpdate()
+		})
+
 		const processTorrents = async (files) => {
 			if(!files || files.length == 0)
 				return
@@ -233,7 +240,7 @@ class App extends Component {
 
 		return (
 			<MuiThemeProvider>
-				<div>
+				<div className={window.darkMode ? 'darkMode' : ''}>
 					{
 						checkNotModal
                         &&

src/app/config-page.js

@@ -206,6 +206,16 @@ export default class ConfigPage extends Page {
 								}}
 							/>
 
+							<Toggle
+								style={{marginTop: '10px'}}
+								label={__('Dark mode theme')}
+								toggled={this.options.darkMode}
+								onToggle={(e, checked) => {
+									this.options.darkMode = checked
+									this.forceUpdate()
+								}}
+							/>
+
 						</div>
 					</Tab>
 					<Tab value='p2p' label={__("P2P settings")} icon={<SvgIcon viewBox="0 0 47 47">

src/app/torrent.js

@@ -326,7 +326,7 @@ export default class Torrent extends Component {
                             	{torrent.info.name}
                             </div>
   							}
-  							<div className='row w100p inline'>
+  							<div className='row w100p inline torrentSize'>
   								<div style={{color: torrent.contentCategory != 'xxx' ? (torrent.peer ? '#5252d1' : 'black') : (torrent.peer ? '#9083e2' : 'grey')}}>
   									{
   										formatBytes(torrent.size, 1) + ' (' + torrent.files + ' files)'

src/background/api.js

@@ -619,6 +619,9 @@ module.exports = async ({
 		if(upnp)
 			upnp.ratsUnmap()
 
+		if (config.darkMode != options.darkMode)
+			send('changeDarkMode', options.darkMode)
+
 		for(const option in options)
 		{
 			if(option in config)