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

93 lines
4.2 KiB
Markdown

# 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.