Roundo: our new mobile-friendly theme, proposed to be set as default

[Laird]

Occasionally finding a minor niggle... when I click the 'new' button that lets you know there are new unread posts on a thread, the link goes to the body of the new post, and misses out the post header, which tells you who posted it. I'm finding I have to scroll up first, before scrolling down to read the new posts.

Yep, I experience the same minor niggle and at some point it's going to annoy me enough that I'll fix it - or at least attempt to.

These days, so do I. I'm sure that there are others among us who do too. That motivated me to integrate the dark version of the Roundo theme, Roundo Darko, into the light version which we're already using, Roundo Light, and add three icons to the heading for switching between colour schemes. You can see the result by selecting the "Roundo (Test of Colour Mode Switching)" theme in the Theme Selector in the board's footer.

Am keen to know what folk think, especially you and @Max_B. What works and what needs fixing?

I'm planning, once we've pulled it into shape, for it to replace the current Roundo Light theme which we've just set as default. Are there any spanners to throw into the works of this plan, or is it sound?

Black looks very death star

Initially I was confused by transitioning from the selector at the bottom of the page, to using the top of the page.

The only thing I can tell you at present is 1) the new buttons at the top left are too close together, and too close to my account button for my fingers to hit without getting into contortions. 2) there are three buttons, but two of them seem to do the same thing at present.

[Laird]

1) the new buttons at the top left are too close together, and too close to my account button for my fingers to hit without getting into contortions

Have added some spacing. How's it now?

2) there are three buttons, but two of them seem to do the same thing at present.

The rightmost button is a "Detect" mode. If the user has set a colour mode preference (light/dark) via their operating system, and their browser supports the reading of that preference via a CSS media selector, then the page will be styled according to their preference. This is the default mode when the user hasn't yet set one.

The other two modes do exactly what the icons indicate - the sun is for light mode, and the moon is for dark mode.

There are tooltips which indicate this on hover, but I gather that you're currently on a mobile device, so you aren't seeing them.

[Laird]

Yep, I experience the same minor niggle and at some point it's going to annoy me enough that I'll fix it - or at least attempt to.

That point turned out to be pretty much right away. I've come up with a Javascript solution to scroll the window by the height of the page header after the page has loaded if there's a hash symbol in the URL. There might be a better solution but this one seems to be working. Let me know whether it does or doesn't work for you...

Have added some spacing. How's it now?


The rightmost button is a "Detect" mode. If the user has set a colour mode preference (light/dark) via their operating system, and their browser supports the reading of that preference via a CSS media selector, then the page will be styled according to their preference. This is the default mode when the user hasn't yet set one.

The other two modes do exactly what the icons indicate - the sun is for light mode, and the moon is for dark mode.

There are tooltips which indicate this on hover, but I gather that you're currently on a mobile device, so you aren't seeing them.

My finger covers all three of them. I don’t like them. Sorry. I just want to set my preferred setting at the bottom of the page. I’m trying black, going back to white, closing my iPhone browser, when I reopen I’m back to black, so I have to set it again.

My finger covers all three of them. I don’t like them. Sorry. I just want to set my preferred setting at the bottom of the page. I’m trying black, going back to white, closing my iPhone browser, when I reopen I’m back to black, so I have to set it again.

They also take up space on the header, and thus reduce screen space for browsing the site, which isn’t necessary for something I’ll change rarely. I’d just take em away, I don’t like them… they nag at me…

They also take up space on the header, and thus reduce screen space for browsing the site, which isn’t necessary for something I’ll change rarely. I’d just take em away, I don’t like them… they nag at me…

Phew, I’ve gone back to plain Roundo, and they’ve gone! 👏

These days, so do I. I'm sure that there are others among us who do too. That motivated me to integrate the dark version of the Roundo theme, Roundo Darko, into the light version which we're already using, Roundo Light, and add three icons to the heading for switching between colour schemes. You can see the result by selecting the "Roundo (Test of Colour Mode Switching)" theme in the Theme Selector in the board's footer.

Am keen to know what folk think, especially you and @Max_B. What works and what needs fixing?

I'm planning, once we've pulled it into shape, for it to replace the current Roundo Light theme which we've just set as default. Are there any spanners to throw into the works of this plan, or is it sound?

Well, in terms of testing, I'm most of the time using the old "MyBB Default" and just briefly switching to the Roundo theme to take a look, then go back to the old default afterwards. Because of that I've not done a lot of testing.

I can confirm one positive: the auto selection of dark or light based upon operating system setting does seem to work, both on Windows 10 and Android 11. That's good. Though as I also tend to use the 'Dark Reader' plugin on both systems, I have to first disable that plugin to get the auto-detection to work.

A brief comment, the new dark style of the Roundo theme has some text which is virtually invisible against the background. That's the same sort of issue with low-contrast as occurred with the 'Light' theme.

One other issue I wanted to mention: the 'Active Threads' screen.

Again that's something I don't normally use so only just noticed.

On my Android tablet I get this nice display with the old theme:
https://drive.google.com/file/d/1w6jzwsD..._ieyg/view

Without changing anything else*, I just switched to Roundo Light and this is what I saw:
https://drive.google.com/file/d/1OQc1STN...dULIC/view

I figured that if the thing was rotated into an upright mode, a bit more text might appear. It looked like this:
https://drive.google.com/file/d/1xFdQtxa...LYPCm/view

I found that display quite incomprehensible, a lot of scraps of information scattered over the display with no sense of what any of it meant.

Later in the day I found I could get the same effect on windows by changing the width of the window. At a wide setting, column headings are shown and there is some sense of order, as the width is reduced, it turns into a bit of a jumble. Of course on Android I don't have the option to make the window wider, it is already using the full display. Possibly I could change the text size but I think that would adversely affect all the other sites too.

* Actually I did change the browser to "Light Theme Sites" for the last two screen captures.

One other issue I wanted to mention: the 'Active Threads' screen.

Again that's something I don't normally use so only just noticed.

On my Android tablet I get this nice display with the old theme:
https://drive.google.com/file/d/1w6jzwsD..._ieyg/view

Without changing anything else*, I just switched to Roundo Light and this is what I saw:
https://drive.google.com/file/d/1OQc1STN...dULIC/view

I figured that if the thing was rotated into an upright mode, a bit more text might appear. It looked like this:
https://drive.google.com/file/d/1xFdQtxa...LYPCm/view

I found that display quite incomprehensible, a lot of scraps of information scattered over the display with no sense of what any of it meant.

Later in the day I found I could get the same effect on windows by changing the width of the window. At a wide setting, column headings are shown and there is some sense of order, as the width is reduced, it turns into a bit of a jumble. Of course on Android I don't have the option to make the window wider, it is already using the full display. Possibly I could change the text size but I think that would adversely affect all the other sites too.

* Actually I did change the browser to "Light Theme Sites" for the last two screen captures.

yeah, I'm getting that too.

I also closed my browser, and cleared my cache, logged back in, and the main middle section of the front page with latest posts (between menu links, and bottom header with newest member), has a spinning circle and fails to load now.

I've had to back out, and go back to the old css design.