Dark theme - Githubissues

rakleed commented 3 years ago

It would be nice to have a dark site theme that syncs with the browser theme.

https://caniuse.com/prefers-color-scheme

DiegoRBaquero commented 3 years ago

Willing to create a PR?

ghost commented 1 year ago

Hi all.

Willing to create a PR?

Yes.

1. Idea without dark-theme

2. Idea with dark-theme

2. concept

2.1 before "without dark-theme"

<body ng-controller="BTorrentCtrl" class="ng-scope">

2.2 after "with dark-theme"

<body ng-controller="BTorrentCtrl" class="ng-scope dark-mode">

2.3 Pull Request

2.3.1 code-html

<style>

body {
  background-color: white;
}

.grid-modeDark {
  background: white;
}

.select-modeDark {
  color: black;
}

.span-modeDark {
  color: black;
}

.dark-modeBtn, .dark-modeBtn:hover{
 color: white;
 background: cornflowerblue;
}

.dark-mode {
  background-color: #202124;
  color: white;
}

</style>
<a ng-href="#" href="#" onclick="modeTheme()">Dark/Light</a>

2.3.2 code-js

// license: https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp
function darkTheme() { 
   var element = document.body;
   element.classList.toggle("dark-mode");
   var list;
   list = document.querySelectorAll("button");
   for (var i = 0; i < list.length; ++i) {
     list[i].classList.add('dark-modeBtn');
   }
}

function lightTheme() { 
   var body = document.querySelector("body")
   body.classList.remove("dark-mode")
   var list;
   list = document.querySelectorAll("button");
   for (var i = 0; i < list.length; ++i) {
     list[i].classList.remove('dark-modeBtn');
   }
}

2.3.3 change-html

<!--- button 0 --->
<div class="views" ng-show="$root.client.torrents.length == 0"><a ng-href="/#">Full</a> | <a ng-href="/download">Single Download</a> | <a ng-href="/view">Stream / View</a> | <a ng-href="#" href="#" onclick="modeTheme()">Dark/Light</a> </div>

<!--- button 1 --->
<button ng-click="addMagnet()" ng-disabled="!torrentInput.length || $root.disabled" ng-class="{'button-primary': torrentInput.length}" disabled="disabled" style="color: white; background: cornflowerblue;"><i class="fa fa-download"></i> Download</button>

<!--- button 2 --->
<button type="file" ngf-select="$root.openTorrentFile($file)" ng-disabled="$root.disabled" ng-class="{'button-primary': !$root.disabled}" class="button-primary" style="
    background: cornflowerblue;
"><i class="fa fa-folder-open"></i> Open torrent file</button>

<!--- button 3 --->
<button class="u-pull-right button-primary" ngf-select="$root.seedFiles($files)" multiple="" ng-disabled="$root.disabled" ng-class="{'button-primary': !$root.disabled}" style="
    background: cornflowerblue;
"><i class="fa fa-upload"></i> Seed files</button>

<!--- grid --->
<div role="rowgroup" class="ui-grid-viewport ng-isolate-scope" ng-style="colContainer.getViewportStyle()" ui-grid-viewport="" style="overflow: scroll;background: white;"><!-- tbody --><div class="ui-grid-canvas"><!-- ngRepeat: (rowRenderIndex, row) in rowContainer.renderedRows track by $index --></div></div>

<!--- select --->
<select class="no-margin ng-pristine ng-valid ng-not-empty ng-touched" name="Demo... Priority" ng-model="file.priority" ng-init="file.priority = '0'" ng-change="$root.changePriority(file)" style="
    color: black;
">
                <option value="1">High Priority</option>
                <option value="0" selected="">Low Priority</option>
                <option value="-1">Don't download</option>
              </select>

<!--- button --->
<button ng-if="!$root.selectedTorrent.paused" ng-click="$root.selectedTorrent.pause()" class="ng-scope" style="
    color: white;
"><i class="fa fa-pause"></i> Pause</button>

3. source-code?

Please, see source-code in add theme in BTorrent

4. Demo?

demo

wdyt (what do you all think about the idea?)?

Shashankpantiitbhilai commented 1 year ago

Assign it to me

DiegoRBaquero / BTorrent

Dark theme #90