Add darkly-pureblack theme

[alectrocute]

Hi Lemdevs!

In this PR:

• Add a darkly-pureblack theme intended for OLED displays

Thanks!

[alectrocute]

The only thing I noticed that's broken is the dropdown icon. I'd love to get some more eyeballs on this.

[dessalines]

Just tested and it looks beautiful.

The dropdown's and icons all look fine to me.

[jsit]

@alectrocute

The only thing I noticed that's broken is the dropdown icon. I'd love to get some more eyeballs on this.

Which dropdown icon? How is it broken?

[alectrocute]

@alectrocute

The only thing I noticed that's broken is the dropdown icon. I'd love to get some more eyeballs on this.

Which dropdown icon? How is it broken?

The down carot icon, I believe it’s implemented via background-image.

[alectrocute]

@alectrocute

The only thing I noticed that's broken is the dropdown icon. I'd love to get some more eyeballs on this.

Which dropdown icon? How is it broken?

The down carot icon, I believe it’s implemented via background-image.

Forgot to mention that it’s broken because the color matches the background color of the select field, rendering it invisible.

[alectrocute]

Fixed it, @dessalines @jsit. The down carot icon is now subtle but visible.

[jsit]

The down carot icon, I believe it’s implemented via background-image.

Which down caret icon? The post actions dropdown? Can you attach a screenshot? I wonder if we could handle this differently so that it better adapts to different colorschemes.

[jsit]

Oh, in "select a community"?

[alectrocute]

@jsit This one:

I'm pretty sure it's shared across all dropdown selects.

[jsit]

Hm, I think there might be a way around this. Hold please.

[jsit]

So, Bootstrap can change the background image on certain elements by looking for [data-bs-theme="dark"].

If you really want, you can add something like this to app.tsx:

<div id="app"
            data-bs-theme={
              user &&
              ["darkly", "darkly-red", "darkly-pureblack"].includes(
                user.local_user_view.local_user.theme
              )
                ? "dark"
                : "light"
            }
>

[jsit]

Or you could try:

<div id="app"
            data-bs-theme={
              (window.matchMedia("(prefers-color-scheme: dark)") &&  user?.local_user_view.local_user.theme == 'browser') || 
              (user &&
                ["darkly", "darkly-red", "darkly-pureblack"].includes(
                  user.local_user_view.local_user.theme
                ))
                ? "dark"
                : "light"
            }
>

But window is undefined in this context for reasons I don't understand

[SleeplessOne1917]

But window is undefined in this context for reasons I don't understand

Likely because it renders on both the server and the client.

[jsit]

Check this out:

app.tsx:

export class App extends Component<any, any> {
  private isoData: IsoDataOptionalSite = setIsoData(this.context);
  private readonly mainContentRef: RefObject<HTMLElement>;
  constructor(props: any, context: any) {
    super(props, context);
    this.mainContentRef = createRef();
  }

  get isDark() {
    return (
      isBrowser() && window.matchMedia("(prefers-color-scheme: dark)").matches
    );
  }

  handleJumpToContent(event) {
    event.preventDefault();
    this.mainContentRef.current?.focus();
  }
  render() {
    const siteRes = this.isoData.site_res;
    const siteView = siteRes?.site_view;
    const user = UserService.Instance.myUserInfo;

    return (
      <>
        <Provider i18next={I18NextService.i18n}>
          <div
            id="app"
            className="lemmy-site"
            data-test={user?.local_user_view.local_user.theme}
            data-bs-theme={
              (this.isDark &&
                user?.local_user_view.local_user.theme === "browser") ||
              (user &&
                ["darkly", "darkly-red", "darkly-pureblack"].includes(
                  user.local_user_view.local_user.theme
                ))
                ? "dark"
                : "light"
            }
          >

[SleeplessOne1917]

I think we could extract the logic for determining to use theme light or dark into a function. It shouldn't even need to reference the App component.

[jsit]

Oh for sure, I was just throwing it in there to demo it

[alectrocute]

I say we merge this and do more fine-tuning in the 0.18.2 release instead, maybe after getting additional feedback from users.