dark theme

[b-Istiak-s]

#565

Any suggestion and helps are welcome. Ohh! Wait suddenly I noticed theme isn't working for /users/edit/profile/ (I can't find problem anywhere). I will make changes dark, light radio button. But, I am not a professional graphics designer. And, I haven't used AI, PS for long days. So, I may forgot lot of things. So, some design for radio button is requested. I will try also (Sorry! I didn't mention earlier). To test the theme I have created a zip a 7z (zip file became larger than 25 MB so, I had to change format). Since, some design were changed to light theme while doing these changes. So, I would request to take a look at light theme also. (I am busy with some other works. So that, I use laptop rarely. That's why I can't work properly)... (Now, have to take a look at light theme. I can see some problems in light theme)(@kevinmmansour helped with some work also) (Sorry for merging! It had shown in my git but, nothing changed)

Task left in Dark theme :

• box shadow

Task left in Light Theme:

• have to look at whole theme

Dark Theme

Light Theme

After new changes...

New Light Theme

New Dark theme

New changes

[kevinmahrous]

Could we improve the preference tab for example adding a label above the options to make sure that users will understand what is dark and light? Otherwise everything is cool.

[cellio]

Can we make this preference like the other ones? Not two radio buttons at the top, but a section under either Network Preferences or Community Preferences (hmm, which should it be?) with the layout and controls used for the others.

Could you vote on some of those posts so we can see what the score widget looks like? And could you take a screenshot of something with pagination, to make sure those controls are legible?

Does this code bypass CoDesign or is there a corresponding PR there? I don't know a lot about how things are put together, but dark theme shouldn't break if we change/add something in CoDesign.

Thanks.

[kevinmahrous]

Since I have got a notification, There are some icons became dark in Light Mode and they should be white, for example:

But, they are white in Light Mode in production sites:

[b-Istiak-s]

Can we make this preference like the other ones? Not two radio buttons at the top, but a section under either Network Preferences or Community Preferences (hmm, which should it be?) with the layout and controls used for the others.

I think you meant to put those radio button system in header, didn't you? Usually, earlier I was doing the same. But, I noticed that mobile UI is little bit different. I was using icon (while putting theme controller in top). And, the header becomes very small for Android. That's why I thought it would be better if I use those theme controller system in preferences.

Does this code bypass CoDesign or is there a corresponding PR there? I don't know a lot about how things are put together, but dark theme shouldn't break if we change/add something in CoDesign.

As far as I know CoDesign can't break my code. I used !important in most of code (If I didn't add !important than, CoDesign could break my things). Currently, I am not using !important for some codes. Since, they are working properly. If we do any changes to CoDesign and, use !important there. Than, CoDesign could break my theme. And, if I write some code there and don't use !important than, those things can't do anything with my code since, my code are on top/above (application.scss) of them. I am using some classes directly from CoDesign, but it won't affect CoDesign since I am only using background-color and color

Could you vote on some of those posts so we can see what the score widget looks like? And could you take a screenshot of something with pagination, to make sure those controls are legible?

Ohh, Sorry! There's some problem.

---

@kevinmmansour done! In light theme, when you hover Profile icon then, that icon will be black.

[b-Istiak-s]

I guess. The work is completed. Check new images here. I will change .zip file ASAP (Usually, I would say to clone my qpixel repo instead of using .zip or, 7z). If the work is done than, I could take rest a minute :P.

A problem is available.. Maybe, last one :( ...

[cellio]

On the preference, I meant something like this:

Add a regular preference, not radio buttons, in the place where regular preferences go. TBD: should this be a network setting or a per-community setting?

[kevinmahrous]

On the preference, I meant something like this:

Add a regular preference, not radio buttons, in the place where regular preferences go. TBD: should this be a network setting or a per-community setting?

As far as I know, it should be in the network setting. But I'm not an expert at all.

[b-Istiak-s]

@cellio

TBD: should this be a network setting or a per-community setting?

Usually, if someone chooses dark theme in Codidact Meta. Than, it should work in other network either. That's what my code says. But, I don't have experience with sub-domain. So, my code completely depends on server.

---

Forgot an issue available.... (have to take look again :()

[cellio]

TBD: should this be a network setting or a per-community setting?

Usually, if someone chooses dark theme in Codidact Meta. Than, it should work in other network either. That's what my code says. But, I don't have experience with sub-domain. So, my code completely depends on server.

Making it a network preference seems reasonable to me. Could you test with Mathjax and code syntax highlighting to make sure those are ok? I wondered about per-community in case something specialized doesn't work and people would want to be able to turn it off there, but it's better to just make sure it works well everywhere and then let people have a consistent experience.

I'm not sure what you mean about setting it on Meta. Just to confirm, somebody can set this preference on any community and it'll apply across the network, right? You don't have something specific about Meta in the code, right?

(Aside: could you try to use descriptive commit messages instead of "update "? That would help me understand what the change is, since I can't always figure it out from the code -- like, maybe you've already done stuff I'm asking for but I can't tell, and I don't want to waste your time with redundant questions. Thanks.)

[b-Istiak-s]

Could you test with Mathjax and code syntax highlighting to make sure those are ok?

I don't have MathJax access in my server. I have create new server to test MathJax. There should be a way to enable MathJax. But, I don't have idea. According to me, MathJax are inside p tag. So, I guess they are considered as normal text (without thinking of mjx-container).

it'll apply across the network, right?

According to me, yes. If it doesn't work than, I guess there's no way to do it. Cause, I don't have any idea of server. (I talked about Meta as example, I will use e.g next time :) ).

I don't want to waste your time with redundant questions.

No! It's OK. Question helps to find out more problems. I have found another problem after seeing the comment. And, I will try to write descriptive commit messages next time...

[cellio]

You can enable MathJax via Admin Tools -> Site Settings -> Display and look for the "enable MathJax" setting. (I assume you're an admin on your own server. If not, you can change that. :-) )

[cellio]

@ArtOfCode- can you provide some guidance on how to wire up the network preference correctly? Thanks.

[b-Istiak-s]

Is there anything left which I should test? <3 :)

Ohh! I found how CoDesign is linked

[ArtOfCode-]

So I've only just had a chance to look at this. I appreciate the effort you've put into this, but I'm concerned that this is mostly being done in the "wrong" place - theming CSS and variables should generally be done in Co-Design, not in QPixel-specific CSS.

I'd also suggest that instead of using a JS trigger for theme changes (and thus restricting dark theme to only those with JS enabled), we should use a media query (@media screen and (prefers-color-theme: dark)) - that way we both make the theme available to everyone and avoid the need to add a user preference because it's a browser setting.

[b-Istiak-s]

@ArtOfCode- i understood your concern. But, these days i couldn't understood how CoDesign was working with qpixel. Today, i have understood what should I do with CoDesign. So, it will take me few weeks to done it in CoDesign. So, other "things" is upto you.

I didn’t use media query it wasn’t working for me. I was trying this way https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme at first, i tried by creating some HTML and CSS files. It wasn’t working. But, i again tried in qpixel. Although, it wasn’t working. So, i didn’t work that way. My default theme wad forever dark. I don’t know why i couldn’t use dark theme. Thats why i didn’t use media query. (I usually use theme from. Extension in chrome. And, my theme was dark in tweaks).