Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Theme #60

Closed
wants to merge 57 commits into from
Closed

Theme #60

wants to merge 57 commits into from

Conversation

b-Istiak-s
Copy link

@b-Istiak-s b-Istiak-s commented Aug 17, 2021

Resolves : #57 and, codidact/qpixel#565

Dark theme

Screenshot 2021-08-17 at 21-32-58 Screenshot

Umm! Code area (pre tag) and, user-card-meta's background is changed from cd.com/assets/stylesheets/application.scss That's why I didn't make changes to them in codidact.scss. button is-muted is-outlined is-active (activity tab) is from codidact.scss. But, when I was copy-pasting those code I forgot to change their color and, background-color. I will change check it again.

Currently, I am using separated lines just to understand those code. In my last commit I will write them in a line (or, mix them).


Found a problem.... : texts isn't white color in fields.. And, .notice .is-warning color is white..... (Maybe, now I can say that no more work is needed in CoDesign) (activity tab should be black (leaving it as it is for now)) (Check following picture and, comment if you see any problem)

New changes

Screenshot 2021-08-18 at 00-30-43 Screenshot

Note : Diff is showing that I made changes to light theme also. Usually, I make changes to light theme. It's all over dark theme.

To test (If you are using Linux) : If you are using Chrome/Chromium than, run that following way

google-chrome --force-dark-mode
chromium --force-dark-mode

You won't face problem for Firefox. I am not sure of Vilvera and, some others (Safari etc). Read the thread to know why you are facing the problem.

Currently, most of worked are done. I guess, there's nothing "left". Usually, it is possible to change color for each category's header. I would request someone else to make changes for category's header (it's in line 17) (You can make PR in the repo if you want). Current, category-header color isn't bad for dark theme either. But, new color for dark theme is very good.


Ohh! Sorry I didn't know changing name of branch will delete PR

@luap42
Copy link
Member

luap42 commented Aug 17, 2021

Um... where do you have the source files (/src) for these changes? If you don't include them, all modifications you made would be deleted at the next build.

@b-Istiak-s
Copy link
Author

Maybe, i didn’t understand you properly. Are you looking where I worked? https://github.com/Istiakshovon/co-design/tree/Theme the changes are available in that branch. I have those code in my system also

Copy link
Member

@ArtOfCode- ArtOfCode- left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@luap42 is right. You've changed the dist/codidact.css file with your changes, but nothing else. You need to make changes in the files under the src/ directory, then run the build scripts to push them into codidact.css when that's done. Otherwise, next time we run a build all your changes will disappear.

@b-Istiak-s
Copy link
Author

@ArtOfCode- Where (Which line you changed) you requested to make changes? It's looking like you had made changes to Light Theme. When I was running your code I saw some weird text (Unicode) in post and lot of places. And, It wasn't available in dark theme.

Screenshot from 2021-08-18 16-05-45

@ArtOfCode-
Copy link
Member

That's an encoding bug, don't know where from. There's no specific line you need to change - you need to move all your dark theme code into the appropriate files under src/ and then build the project to compile them into codidact.css.

@b-Istiak-s
Copy link
Author

b-Istiak-s commented Aug 18, 2021

@ArtOfCode- Please! Check that I am doing it correct or not. If yes! Than, I will commit other files and, build the project..

@ArtOfCode-
Copy link
Member

You've got the right files now, yep. Some tips:

  • Instead of hard-coding colour values, add them as variables as existing colors are.
  • Instead of wrapping all existing code in a light-mode media query and duplicating it in a dark mode query, you can just wrap lines that deal with colours in media queries.

@b-Istiak-s b-Istiak-s requested a review from ArtOfCode- August 20, 2021 11:24
When I was working on the page. When I used .is-active it wasn't working for me. So that, I wrote .active Since, the page is nearly done so, I am changing it again.
Since, the dark theme applied to CoDesign also hence, the background color should be black(ish) and, text color should be white.
@b-Istiak-s
Copy link
Author

Oops! I forgot to made changes to codidact.scss. i will try to work on it again ASAP.

@b-Istiak-s b-Istiak-s closed this Oct 25, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

dark theme for Codidact
3 participants