93 lines
4.2 KiB
Markdown
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.
|