builds/.archived/owntone/dark-reader/README.md

Trying to use the theme generated by Dark Reader

OwnTone looks good with Dark Reader (a Firefox extension), but it would be nice if it could look like that without the browser extension.

Ive tried a couple of methods to use the css that the browser extension creates. Not knowing a whole lot about css, i havent been very sucessful at anything other than confusing myself because i barely documented it or took notes.

what ive tried

I saved the CSS (if i understand what is happening correctly, Dark Reader creates a bunch of css files, which i then managed to export via the Firefox dev tools). It's saved in this repo as dark-reader-full.css (and dark-reader-1.css which i cant remember what is).

sometimes its referred to as dark-reader.css, so i guess i have renamed it at some point. I remember having exported the file(s) at least twice.

Ive tried a couple of different ways to include it in my build.

1. before building OwnTone, modifying owntone-server/htdocs/index.html with a <style> tag to load it, and also modyfing the owntone-server/Makefile.am to include in the assets dir.

   modified the files, created .patch file:

   git diff --patch > ../dark-reader/dark-reader-css.patch
   

   then before building, applying it with

   (
     cd owntone-server/
     git apply ../dark-reader/dark-reader-css.patch
   )
   

   a nicer way that avoids cd and a subshell would have been:

   git -C owntone-server/ apply dark-reader/dark-reader-css.patch
   git -C owntone-server/ --no-pager diff --color=always
   

   IIRC patching and building worked fine, but it didnt load a dark theme when you'd run OwnTone.

2. Since it doesnt matter if it happens on build time or not, there is a dark-reader/dark-reader-full.css file. Before packaging up OwnTone with fpm, i copy those files into the $DISTDIR/usr/share/owntone/htdocs directory created by the build, inside of the Docker container, before packaging it up.

   This happens in the dark-reader/dark-reader.sh script, which is called by builder/package-owntone.sh. That copies a changed index.html as well, that has a <style> tag to load dark-reader-full.css (though it is commented out)

   The paths within the docker container and outside dont match, so it doesnt make sense reading it, this needs to be fixed.

   Then after the build, dark-reader/dark-read-show-diff.sh is called, which shows the changes.

3. Saving the page with "Save as" in firefox. That resulted in a file thats saved here as dark-reader/dark-reader-browser.html, with both a .js and an .css file in dark-reader/dark-reader-browser_files/.

   Probably only the .css file is needed, but i havent tried a build with this yet. Neither the Dockerfile or builder/package-owntone.sh have been modifid to use this, but this seems the most likely to work?

   It also includes a whole bunch of changes to the html, some/most of which are probably done by the OwnTone app itself. Some are obviously not because they say "dark reader" someplace in them. I saved saved a full copy of the file that Firefox saved as dark-reader/dark-reader-browser.html

File overview:

• index.html: modified version of owntone-server/htdocs/index.html, with a <style> tag to include dark-reader-full.css, but commented out. _This file is currently included in my builds.
• dark-reader.html: same as index.html, but the <style> tag is not commented out.
• dark-reader-1.css: css generated by Dark Reader, exported with Firefox's dev tools.
• dark-reader-full.css: also generated by Dark Reader and exported with Firefox's dev tools. _This is the file currently included in builds, but the <style> tag for it is commented out in index.html.
• dark-reader-browser.html: The page "Saved as" in Firefox, with Dark Reader active.
• dark-reader-browser_files: Files from the "Save as", a .js and .css file. The .css file is interesting.
• dark-reader-browser-full.html: same as dark-reader-browser.html, but kept a bunch of stuff i think is generated by the OwnTone app.
• dark-reader-css.patch: the git dif patch file to include the changes before building.