Tranparent theme (like on lichess.com)

[Phamier]

I modified my client with Stylus, but it would be cool to have this as an existing feature. I will try to implement it, but I would like to hear the opinion of @online-go.

Basic Idea

User has a field for custom background URL.

Problem with Lichess's implementation of transparent theme

It had to do with stockfish.wasm. Here is a comment from this issue:

This applies since Chromium 83, and other browsers soon as well:
stockfish.wasm requires Cross-Origin-Embedder-Policy: require-corp, and therefore Cross-Origin-Resource-Policy: cross-origin on all embedded resources.
...

• Options for background images:
• Get image hosts to place Cross-Origin-Resource-Policy: cross-origin.
• Host our own proxy or upload for images, which adds that header.
• No custom background images on analysis pages.
  ...
• For userstyles/scripts:
• Host assets with Cross-Origin-Resource-Policy: cross-origin.
• Use Data URLs

Because of that Lichess's users have to use extensions like Stylus if they want custom backgrounds on all pages.
OGS doesn't have such an issue, so it would be a nice addition to the website.

Examples

• "Play" page - image
• "Game" page - image

My progress

Currently, finishing the CSS.

[anoek]

Sounds neat, I'd be curious to see what you came up with :)

[Phamier]

I'm going down the open-source rabbit hole. That's no good, because massive pull requests are not getting accepted. But I have to do this. I am making drastic changes to the layout and CSS in order to implement this theme. Plus, I noticed that the website is very poorly optimized for lower screen resolutions. So I got to work...

My changes (as of this moment)

• I added box-sizing: border-box to all elements on the website (!)
  I was kinda surprised that It has not already been done, because it's a huge time saver. It's a default option for many CSS frameworks and I cannot stress the importance of this option enough. Let me sell this to you.
  • It helps to avoid some issues with overflow and clipping. For example, left navigation bar. If you set the language to Russian, the scrollbar will appear, because widths of items are not calculated correctly, and they are in fact too big to fit. Using border-box, fixes that immediately because padding is taken into a count for height and width calculations.
  • It helps when you are working on responsive elements. For example, max-width for .page-width. You simply use the breakpoint value (grid-breaks[lg] == 1140px). The current approach is ambiguous, requires extra calculations from the developer, and it's the relic of the past.
    Of course, you cannot simply put in * { box-sizing: border-box; } into your global.css and call it a day. You have to design around that. But it's a superior option and it must be implemented. Even if my pull request is not going to be accepted, I want to help to improve the design and border-box can be a huge improvement.
• html, body, #main-content { height:100%; overflow: auto; }
  It's a minor thing, but it's important, so I will explain this. It makes sure that you document.height == body.height and helps you with many things. For example, background for #main-content. Without this property body doesn't fill the vertical space, and messes a lot of things. You worked around that by adding #main-content { background-color: ... } and #main-content > div { background-color: ... }. It's a bodge (link). html, body, #main-content { height:100%; overflow: auto; } allows you to remove the styling for that div and save the time for folks like me who decided to make a new theme.
• flex-wrap: wrap is used rarely. I'm planning to change that
  A lot of elements on the website have clipping or sizing issues because of that. I added wrap for ACLModal and the header in AutoMatchContainer. Instantly, the Play page is displayed correctly, even on IPhone5 (320px!).
• Custom theme for some pages (AKA the main thing I'm working on)
  I will not explain this part in detail, because I want to save you time. But there are the basic ideas:
  • I added filter for the image. It makes the background image darker, so it's looks nicer.
  • I changed some components
  • I added a custom theme for these pages (at least I can show the current state of them):
    • Play
    • Observer
    • Joseki (the list of them, Puzzle component and PuzzleCollection component)
    • Chat (partially)
    • Tournaments

Conclusion

I still have a lot of work ahead of me (Game component, other pages, zen-mode, etc. etc. etc.), but I will try to finish it. I'm still exploring the code, making notes on my whiteboard, change small things if I find them. I found some new bugs, but I will make the issues for them later. My questions for you:

• Do you like the look of it?
• Should I bother with optimizing the website for lower screen resolutions?

I pushed some commits here. I have a lot more changes on my local machine, but I will push them once I finish them.

If you don't want to look through make code and pull my changes, watch this video (1.5x playback speed is recommended). Sorry for taking your time!

[anoek]

From the things I caught in the video I think I do generally like the tweaks and modifications you've made. I don't think you'll have a problem with this, but as you're going through, just make sure whatever changes you make look good in light/dark theme as well as your new custom background theme. As you're tweaking for smaller screens this is probably something that will come naturally, but just so it's said, please make sure that whatever you're doing works on smaller mobile screens too.

I think we shouldn't have the custom background be a separate theme, that should be something that's settable for light, dark, or accessible themes I think. I'm already questioning whether we should have an accessible theme at all, and instead just have accessible modes per theme, but that's a different topic - point being, we don't want to be maintaining and replicating tweaks against three essentially copies of the dark theme, and a good number of folks like the light theme and would benefit from having a custom background setting - so lets make that setting apply to your current theme and not have it be it's own thing.

[Phamier]

I think we shouldn't have the custom background be a separate theme, that should be something that's settable for light, dark, or accessible themes I think.

That's a great idea. I think I can easily do that. In fact, it's kinda working already. Here. This is how my theme look without background set. It's basically a current dark theme, but a bit darker and some objects have additional outlines. I can easily replace current dark theme, add according changes to light and accessible. Maybe it's the way to go with this idea.

[Phamier]

Something like that? :) It was rather easy to do with my implementation.

[anoek]

Yeah looking great :)

[BHydden]

I must confess... when I first read "transparent theme" I thought you'd be able to see other windows behind the browser 😅 this is neat too though

[Atorrante-cyber]

Like what you are doing.

https://forums.online-go.com/t/feature-request-general-background-theme-more-options/35829