Join us on our own very special Reddit: /r/Linuxers
New theming live now - report issues here
Page: 1/4»
  Go to:
Liam Dawe 29 March 2020 at 2:20 pm UTC

Hi all, a big overhaul of the theme code went live today along with a theme-switcher you can find in the user/guest menu.

Note
Yes, the switcher requires JavaScript. Since I know some don't like that, you can still use the theme switcher in your User settings. That was also updated, as it now properly forces your picked theme there (which overrides the top nav slider).

Of course, there will be issues, some edge-cases I've missed.

If you see anything that doesn't look right or act right please let me know here so I can fix them. Before reporting, please refresh your cache to ensure it's not your browser keeping old CSS/JS around.

The forum
The old category/forum view is gone, long live flat forum. Honestly, it's just better, it matches the home page style of all categories shown. This way, categories that don't usually get a look-in will now actually have their posts show up when people make them.

Last edited by Liam Dawe on 29 March 2020 at 8:52 pm UTC

Dedale 29 March 2020 at 2:43 pm UTC

Very nice ! No complaint here.

GustyGhost 29 March 2020 at 3:04 pm UTC

It is a nice improvement. I've always felt that forums do themselves a disservice by breaking everything up into many fine grained categories.

serge 29 March 2020 at 4:13 pm UTC

Hello,

If you switch to the dark theme and then close the browser, or go to another website and come back, you end up with the light theme.

If you Force the theme through the profile settings, it works fine.

Last edited by serge on 29 March 2020 at 4:14 pm UTC

Liam Dawe 29 March 2020 at 4:18 pm UTC

sergeHello,

If you switch to the dark theme and then close the browser, or go to another website and come back, you end up with the light theme.

If you Force the theme through the profile settings, it works fine.
Not seeing that behaviour across firefox/chrome on both desktop and mobile. Sounds like you have something interfering with it. It's using local storage as the checker, perhaps you're wiping it or blocking it.

Donkey 29 March 2020 at 4:51 pm UTC

Liam Dawe
sergeHello,

If you switch to the dark theme and then close the browser, or go to another website and come back, you end up with the light theme.

If you Force the theme through the profile settings, it works fine.
Not seeing that behaviour across firefox/chrome on both desktop and mobile. Sounds like you have something interfering with it. It's using local storage as the checker, perhaps you're wiping it or blocking it.

I am seeing the same behaviour as well. Also when the dark theme is enabled and (re)loading the page, the toggle button "switches" after the page have finished loading which draws attention to it. I find it a bit annoying. At least now that I noticed it

Liam Dawe 29 March 2020 at 6:11 pm UTC

Okay, I believe I have solved the issue of the theme flashing between light for a split second and then dark if you've got it turned on using the slider. The issue is how JavaScript loads. The really small bit of code to detect the set theme, then use it is now bundled into the HTML so it's done before the page actually loads the body content - so no flashing (I also tested that on my crappy 4G connection on my phone, works great - no flashing at all and page loads quickly).

As it turns out, the above is exactly what Twitch do. Only realised after I did it, so it seems like the real solution that I fell into there

Haven't yet come up with a good solution for the switcher flicking between though. Happy to take on ideas.

I've moved the slider into the user menu on desktop/mobile menu. I'll also adjust for Guests/Not Logged In people to have a menu to do so too. Guests now have their own little menu.

Last edited by Liam Dawe on 29 March 2020 at 8:48 pm UTC

chris.echoz 1 April 2020 at 9:55 pm UTC

The dark theme isn't applied at all whenever I reload the page on Firefox 75.0b2.
The "theme" key in local storage is saved, though and set to "dark".

Since the attribute "data-theme" is set, your code doesn't even look at what's set in the local storage and just uses "default" as the value, as that's set in: <html data-theme="default" class=" idcae idcac" lang="en">

var website_theme='light';
if (document.documentElement.hasAttribute("data-theme")) {
    website_theme=document.documentElement.getAttribute("data-theme");
} else {

    // If I run this on its own, the theme changes to dark as expected.

    if (localStorage.getItem("theme")) { 
        if(localStorage.getItem("theme")=="dark") {
            website_theme="dark";
        }
    }
    else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
        website_theme="dark"
    }
    if (website_theme=="dark") {
        document.documentElement.setAttribute("data-theme","dark")
    }
}


Last edited by chris.echoz on 1 April 2020 at 9:58 pm UTC

Liam Dawe 1 April 2020 at 9:59 pm UTC

chris.echozThe dark theme isn't applied at all whenever I reload the page on Firefox 75.0b2.
The "theme" key in local storage is saved, though and set to "dark".

Since the attribute "data-theme" is set, your code doesn't even look at what's set in the local storage and just uses "default" as the value, as that's set in: <html data-theme="dark" class=" idcae idcac" lang="en">

var website_theme='light';
if (document.documentElement.hasAttribute("data-theme")) {
    website_theme=document.documentElement.getAttribute("data-theme");
} else {

    // If I run this on its own, the theme changes to dark as expected.

    if (localStorage.getItem("theme")) { 
        if(localStorage.getItem("theme")=="dark") {
            website_theme="dark";
        }
    }
    else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
        website_theme="dark"
    }
    if (website_theme=="dark") {
        document.documentElement.setAttribute("data-theme","dark")
    }
}
Check your user preferences aren't set to the light theme, user settings in the UserCP on the site overrides that switch. Otherwise, it will be a cache issue your end or a plugin getting in the way as this works across chrome/firefox both desktop and mobile.

Edit: Actually just noticed it says default, that looks like a leftover issue from the switch. Hold on 5 mins.

Edit 2: Should be fixed, a bunch of people didn't have their theme correctly unset from "default" (which no longer exists) it's either nothing and set by the JS and the new toggle or forced as light/dark in the User Control Panel.

Last edited by Liam Dawe on 1 April 2020 at 10:06 pm UTC

chris.echoz 1 April 2020 at 10:06 pm UTC

Liam Dawe
chris.echozThe dark theme isn't applied at all whenever I reload the page on Firefox 75.0b2.
The "theme" key in local storage is saved, though and set to "dark".

Since the attribute "data-theme" is set, your code doesn't even look at what's set in the local storage and just uses "default" as the value, as that's set in: <html data-theme="dark" class=" idcae idcac" lang="en">

var website_theme='light';
if (document.documentElement.hasAttribute("data-theme")) {
    website_theme=document.documentElement.getAttribute("data-theme");
} else {

    // If I run this on its own, the theme changes to dark as expected.

    if (localStorage.getItem("theme")) { 
        if(localStorage.getItem("theme")=="dark") {
            website_theme="dark";
        }
    }
    else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
        website_theme="dark"
    }
    if (website_theme=="dark") {
        document.documentElement.setAttribute("data-theme","dark")
    }
}
Check your user preferences aren't set to the light theme, user settings in the UserCP on the site overrides that switch. Otherwise, it will be a cache issue your end or a plugin getting in the way as this works across chrome/firefox both desktop and mobile.

Edit: Actually just noticed it says default, that looks like a leftover issue from the switch. Hold on 5 mins.
That did it, even without forcing the theme in the user CP it now stays dark if I set it to dark with the switch.

Liam Dawe 1 April 2020 at 10:07 pm UTC

chris.echozThat did it, even without forcing the theme in the user CP it now stays dark if I set it to dark with the switch.
See my above reply, no need to force it in UserCP unless you want to. Should be all good now.

You need to Register and Login to comment, submit articles and more.


Or login with...

Livestreams & Videos
Community Livestreams
  • Overload Teams League: DiM vs. DC
Popular this week
View by Category
Contact
Latest Comments
Latest Forum Posts