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)

translations/cn.json

@@ -197,6 +197,7 @@
         "You can extend your collected search DB with your own .torrent files. Just drag and drop them into the Rats window (or folder with them). They will immediately appear on activity tab.": "您可以使用自己的.torrent文件擴展收集的搜索數據庫。 只需將它們拖放到Rats窗口（或帶有它們的文件夾）即可。 它們將立即顯示在活動選項卡上。",
         "File": "文件",
         "Folder": "文件夾",
-        "Generate": "產生"
+        "Generate": "產生",
+        "Dark mode theme": "Dark mode theme"
     }
 }

translations/en.json

@@ -197,6 +197,7 @@
         "You can extend your collected search DB with your own .torrent files. Just drag and drop them into the Rats window (or folder with them). They will immediately appear on activity tab.": "You can extend your collected search DB with your own .torrent files. Just drag and drop them into the Rats window (or folder with them). They will immediately appear on activity tab.",
         "File": "File",
         "Folder": "Folder",
-        "Generate": "Generate"
+        "Generate": "Generate",
+        "Dark mode theme": "Dark mode theme"
     }
 }

translations/ru.json

@@ -197,6 +197,7 @@
         "You can extend your collected search DB with your own .torrent files. Just drag and drop them into the Rats window (or folder with them). They will immediately appear on activity tab.": "Вы можете расшириться вашу базу поиска вашими .torrent файлами. Просто переместите их в окно программы (или папку с ними). Они сразу же появятся во вкладке активности.",
         "File": "Файл",
         "Folder": "Папка",
-        "Generate": "Сгенерировать"
+        "Generate": "Сгенерировать",
+        "Dark mode theme": "Темная тема"
     }
 }

translations/ua.json

@@ -197,6 +197,7 @@
         "You can extend your collected search DB with your own .torrent files. Just drag and drop them into the Rats window (or folder with them). They will immediately appear on activity tab.": "You can extend your collected search DB with your own .torrent files. Just drag and drop them into the Rats window (or folder with them). They will immediately appear on activity tab.",
         "File": "Файл",
         "Folder": "Папка",
-        "Generate": "Згенерувати"
+        "Generate": "Згенерувати",
+        "Dark mode theme": "Dark mode theme"
     }
 }