h5ai
h5ai copied to clipboard
Dark Theme
I had a look around and couldn't find a dark theme, so here's a basic one I made just now, feel free to use it.
Installation:
Edit the _h5ai/public/css/styles.css file, scroll down right to the bottom and add the following lines:
#mainrow, #topbar, #content, #view .item, #sidebar {background-color: #1d1f21;}
#tree a, #tree a:active, #tree a.visited, #root, input, select, #crumbbar a, #crumbbar a:active, #crumbbar a:visited, #backlink, #backlink:active, #backlink:visited {color: rgba(255, 255, 255, 0.9);}
#view.view-details .item {border-bottom:1px solid rgba(255, 255, 255, 0.1);}
#sidebar {border-right: 3px solid rgba(255, 255, 255, 0.1);}
#view.view-icons .landscape{background: #272727;}
As an extra, find the #pv-content-aud ID and replace it with the following, this will make the audio player fullscreen and scale with the window:
#pv-content-aud{
width: 100% !important;
max-width:100%;
max-height:100%;
bottom: 50px !important;
}
Menu Preview:
Music Player Preview:
Leaving as an idea: We should be able to define via settings, which theme we want to use. (Light/Dark)
When searching for a dark theme for this I saw this and it sure looked great, I've adapted on it and improved where needed to my likekings which can be found here: https://github.com/RafaelDeJongh/h5ai-dark-theme
For me it would be really worth to have a full White/Dark theme option by default!
Mine one:
https://github.com/GraphtyLove/h5ai
Feel free to use it ;)
Adding support for themes to h5ai would be a great idea. I'd love to see it ship with several themes out-of-the-box.
@RafaelDeJongh That works perfectly! i just appended the minified file to my public/css/styles.css.
@GraphtyLove I'm getting javascript errors in my browser console when I run your version, not sure why. Could you open up the github issues for your repo?
@fafrd of course, it's done. That's stange, I don't have any errors... Maybe check if you installed it rigth ?
Bump
Any dark themes, styles or versions of h5ai with a functioning audio player when used in firefox? Thus far none seem to work.
I think the easiest way is to use media query:
@media (prefers-color-scheme: dark) {
...
}
without any setting.
Any dark themes, styles or versions of h5ai with a functioning audio player when used in firefox? Thus far none seem to work.
If you're still looking for it, I could always check and see if I can update my modified dark theme.
Any dark themes, styles or versions of h5ai with a functioning audio player when used in firefox? Thus far none seem to work.
If you're still looking for it, I could always check and see if I can update my modified dark theme.
Do you think you can make a drop in style.css
with media query?
That would be great. I'd be happy to test.
Any dark themes, styles or versions of h5ai with a functioning audio player when used in firefox? Thus far none seem to work.
If you're still looking for it, I could always check and see if I can update my modified dark theme.
Do you think you can make a drop in
style.css
with media query?That would be great. I'd be happy to test.
That shouldn't be too difficult so I should be able to yes. Regarding the issue with Firefox, could you elaborate on what's actually amiss?