Dark Mode Feature in Resources Page | HacktoberFest 2023

[NayakPenguin]

Hey there! This issue is tailor-made for newcomers who are just getting started with their contributions and have some development skills under their belt. We're here to welcome and support you on your journey! 🚀

Since we didn't plan from the start that we would go for the dark mode, it's hard now to get the whole project in dark mode. Hence we are going one by one, one page after another.

Tasks :

0. Your task involves working on the file located at client > src > Screen > Resources.js.
1. Generate a global CSS file named "dark_mode_colors_resources"
2. In the above global CSS file, establish color variables that can be adjusted later, such as --dark-color-1: rgba(0,0,0,.5).
3. Create a button, as described, within the "cc-header" file.
4. Implement a function where toggling the button results in a switch to dark mode on the page.
5. Additionally, save this preference in local storage so that if a user previously used dark mode, it will be retained for their next visit.

How to run the repo locally :

Check #104

Important :

1. Please don't change any file other than what is mentioned - if you want please mention it below.

How to get your PR accepted :

1. Consider giving our project a star as it helps enhance the project's credibility.
2. Write the PR title as - # 110 Issue Resolved | {something you want to mention}
3. Write a good PR comment with a screen-shot of the work
4. Make sure to generate the PR to the main branch of this repository.

Express your interest in the open-conversion section below to request this issue as an assignee! Enjoy your coding journey! :) 🚀

[shibs-01]

please assign me this task

[NayakPenguin]

Amazing to see your interest :) Sure, I am assigning this task to you @shibs-01!
Happy coding 🚀

[SurajPrakash24]

Heyy I would also like to work on this task. Can you please assign

[NayakPenguin]

@SurajPrakash24 Great! Please share this assignment with @shibs-01.

You both can collaborate on the problem, or do it independently and if both of your efforts yield satisfactory results, both of your pull requests will be accepted.

[enayush]

@Nayaker Please help me out I'm unable to run this website locally. I had already referred to https://github.com/Nayaker/AlgoListed/issues/104 But it's not working.

[NayakPenguin]

@enayush Give your email address here.

I will delete your email from the comment section later on

[NayakPenguin]

@SurajPrakash24 @shibs-01 is it working for you guys?

[NayakPenguin]

Check mail @enayush

[SurajPrakash24]

@SurajPrakash24 @shibs-01 is it working for you guys?

Yes it's working

[riyanrathore26]

can i work on it?

[NayakPenguin]

@riyanrathore26 Amazing! I am assigning this issue to you as well.

If another person submits a pull request for this issue before you, don't fret; if your pull request is valid, it will still be considered and accepted!

[NayakPenguin]

@SurajPrakash24 @shibs-01 any update?

[nivedt]

Can I work on this issue??

[NayakPenguin]

Nice @nivedt! I am assigning this issue to you as well :)

If another person submits a pull request for this issue before you, don't fret; if your pull request is valid, it will still be considered and accepted!

[SurajPrakash24]

Hey @Nayaker! I have created a PR, Please review and merge as hacktoberfest-accepted

[NayakPenguin]

Sure, I will accept the PR it is good. However, there is a slight bit of changes that you can make, and generate a second PR as well!

[NayakPenguin]

@SurajPrakash24 can you please try to give a PR similar to this!

[NayakPenguin]

@SurajPrakash24 But I think the toggle button looks amazing so I would suggest you keep that, and remove the button which we have here.

But try to match the colors as the above.

[riyanrathore26]

HI @Nayaker i am beginner and facing some problem while setup localy can you explain how i can run this repo localy

[NayakPenguin]

@riyanrathore26, please visit https://github.com/Nayaker/AlgoListed/issues/104 to see if your problem persists. If it does, feel free to describe your issue in the comments section and tag @Mohit030802. Mohit is a collaborator and will be able to help you resolve it.

We would greatly appreciate it if you could show your support for this repository by giving it a star. This gesture helps us gain more visibility and recognition on GitHub.

[riyanrathore26]

Hi @Mohit030802 I have some question related to setup in local machine

1. can you send list of usefull library's
2. and I want to create new database in mongodb
3. and how i can change port in localhost etc

[Mohit030802]

Hi @riyanrathore26,

1. Use npm i or npm i --force to install all the required dependencies.
2. To change PORT in your localhost go to package.json and you will find the PORT=4000 mentioned in the start script just change the port number as per your requirement.

[riyanrathore26]

@Mohit030802 Now facing some error in database connectivity like (node:9596) [MONGOOSE] DeprecationWarning: Mongoose: the strictQuery option will be switched back to false by default in Mongoose 7. Use mongoose.set('strictQuery', false); if you want to prepare for this change. Or use mongoose.set('strictQuery', true); to suppress this warning. (Use node --trace-deprecation ... to show where the warning was created) MongooseError: The uri parameter to openUri() must be a string, got "undefined". Make sure the first parameter to mongoose.connect() or mongoose.createConnection() is a string. at Connection.openUri (D:\git demo\algolisted\backend\node_modules\mongoose\lib\connection.js:695:11)
at D:\git demo\algolisted\backend\node_modules\mongoose\lib\index.js:409:10 at new Promise () at promiseOrCallback (D:\git demo\algolisted\backend\node_modules\mongoose\lib\helpers\promiseOrCallback.js:40:10) at Mongoose._promiseOrCallback (D:\git demo\algolisted\backend\node_modules\mongoose\lib\index.js:1262:10) at Mongoose.connect (D:\git demo\algolisted\backend\node_modules\mongoose\lib\index.js:408:20) at Server. (D:\git demo\algolisted\backend\index.js:44:12) at Object.onceWrapper (node:events:628:28) at Server.emit (node:events:514:28) etc

[NayakPenguin]

@riyanrathore26 you don't have to run the backend, just run the frontend part.

[riyanrathore26]

@Nayaker sorry to say that i am tried but i am unable to run only fron end or full project can you explain in more breif

[Mohit030802]

Hi @riyanrathore26,

To run the front end of the project follow these steps.

1. Go to the client folder in the terminal cd client
2. Now to install the required dependencies use npm i --force.

3. And once the required dependencies are installed just use npm start to run the repo on your local machine.

   and as you are working in Dark mode there is no need to use the backend.

I have added a detailed video for the following in #104 you can refer to it. If you still face any issues we will organize a G-meet also for you.

[NilanjanPramanik]

@Mohit030802 Hey Can I also work on the issue?

[Mohit030802]

Hi, @NilanjanPramanik, we really appreciate your interest, but this issue has already been resolved. We are planning to create many more issues soon, and we will tag you.

Please star this repo, so you will be informed if there are any issues that you can help solve. We would love to see your contributions.