h5ai icon indicating copy to clipboard operation
h5ai copied to clipboard

Dark Theme

Open TheChiefMeat opened this issue 6 years ago • 12 comments

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:

firefox_2018-05-02_17-54-32

Music Player Preview:

firefox_2018-05-02_17-55-02

TheChiefMeat avatar May 02 '18 16:05 TheChiefMeat

Leaving as an idea: We should be able to define via settings, which theme we want to use. (Light/Dark)

Armstrong1992 avatar May 09 '18 12:05 Armstrong1992

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!

RafaelDeJongh avatar Sep 28 '18 01:09 RafaelDeJongh

Mine one: https://github.com/GraphtyLove/h5ai screen Feel free to use it ;)

GraphtyLove avatar Feb 13 '19 01:02 GraphtyLove

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.

Daniel15 avatar Feb 20 '19 20:02 Daniel15

@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 avatar Feb 23 '19 06:02 fafrd

@fafrd of course, it's done. That's stange, I don't have any errors... Maybe check if you installed it rigth ?

GraphtyLove avatar Feb 24 '19 19:02 GraphtyLove

Bump

cosmicle0 avatar Jun 04 '21 04:06 cosmicle0

Any dark themes, styles or versions of h5ai with a functioning audio player when used in firefox? Thus far none seem to work.

jult avatar Jan 31 '23 23:01 jult

I think the easiest way is to use media query:

@media (prefers-color-scheme: dark) {
...
}

without any setting.

kuon avatar Oct 08 '23 21:10 kuon

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.

RafaelDeJongh avatar Oct 08 '23 22:10 RafaelDeJongh

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.

kuon avatar Oct 08 '23 23:10 kuon

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?

RafaelDeJongh avatar Oct 08 '23 23:10 RafaelDeJongh