[Feature]: Dark and Light Theme

Question

[Feature]: Dark and Light Theme

Closed this issue 2 years ago · 18 comments

Is your feature request related to a problem? Please describe.
The user don't have options for themes.

Describe the solution you'd like
I feel like the user should be given the opportunity to choose the type of theme they want.

Answer 1 · 2022-10-18T14:05:34.000Z

Hi, I would like to work on the issue i think option of dark and light them would be great for the website and i can provide dark theme functionality to the website.

Answer 2 · 2022-10-18T14:13:35.000Z

@pythoniclaver I would like to work on this

Answer 3 · 2022-10-18T15:22:17.000Z

Hi, I would like to work on the issue i think option of dark and light them would be great for the website and i can provide dark theme functionality to the website.

@parush-uppal Thank you for wanting to contribute, I will assign you to this

Answer 4 · 2022-10-20T08:54:55.000Z

@parush-uppal having problem implementing the solution???

Answer 5 · 2022-10-20T10:19:17.000Z

Yes actually do to variety of classes and and different color scheme being used at different places i am not not able to fully convert the whole website into dark theme

Answer 6 · 2022-10-20T11:08:33.000Z

Yes actually do to variety of classes and and different color scheme being used at different places i am not not able to fully convert the whole website into dark theme

@parush-uppal firstly, the purpose of open source is collaboration. We are teammate here, which means we are here to help but how can we help if we don't know that you have a problem. Always ask for help if you need it

Answer 7 · 2022-10-20T11:17:11.000Z

So @parush-uppal , implementing dark theme is very simple. All you need to do is create a className called .dark then you reassign the opposite color of the variable created in the root e.g ...

  :root {
    --white: white;
    --black: black;
 }

.dark {
    --white: black;
    --black: white;
 }

So when we toggle to the dark mode targeting the class .dark we're going to have the opposite theme. This should work, you're welcome 🤗

Answer 8 · 2022-10-20T11:17:37.000Z

Can you implement this or I should assign someone else???

Answer 9 · 2022-10-20T12:21:30.000Z

Yeah thanks for the reply should have asked going forward . Will keep in find thanks for solution for implement the solution provided by it works great

Answer 10 · 2022-10-20T12:24:27.000Z

Yeah thanks for the reply should have asked going forward . Will keep in find thanks for solution for implement the solution provided by it works great

@parush-uppal You're welcome man

Answer 11 · 2022-10-20T12:26:34.000Z

While implementing the dark them i put color #fff in root as custom and text color #000 as bcolor in root so that i can change them while implementing dark theme .Just having one problem with it

Answer 12 · 2022-10-20T12:30:25.000Z

The cards in in about section lost their border after applying dark theme rest everything is fine just this section have problem

Answer 13 · 2022-10-20T12:38:56.000Z

The cards in in about section lost their border after applying dark theme rest everything is fine just this section have problem

@parush-uppal this problem is easy to solve, so go to where I initially apply the border and box shadow to the cards, then create a root variable with those values and instead of giving it like

  .card {
     box-shadow: 0px 5px 15px rgba(0,0,0,.4);
  }

You should give it this instead

 .card {
    box-shadow: --box-shadow;
 }

Then you change the box shadow color to the opposite when you toggle to dark mode

  .dark {
     --box-shadow: 0px 5px 15px rgba(225, 225, 225, 0.4);
  }

This should work!

Answer 14 · 2022-10-20T12:42:40.000Z

@parush-uppal Don't forget to star this repository and also follow me on all platforms if you haven't. Thank you

I will be creating more open source, so stay updated to participate.

Answer 15 · 2022-10-20T13:20:45.000Z

@parush-uppal Don't forget to star this repository and also follow me on all platforms if you haven't. Thank you

I will be creating more open source, so stay updated to participate.

Sure will do

Answer 16 · 2022-10-20T13:21:36.000Z

Thanks for all your help. Have raised the pr for same please have a look and review

Answer 17 · 2022-10-20T16:01:37.000Z

Thanks for all your help. Have raised the pr for same please have a look and review

@parush-uppal Make all the modification I ask you to implement before making a new PR

Answer 18 · 2022-10-20T18:19:12.000Z

Raised another pr changed the color button and bugs .Hope everything is fine now