dark mode for website

[MehfoozurRehman]

would like to help here with making a dark theme for expressjs.com

[dougwilson]

Sounds awesome! I look forward to your contribution!

[0x1026]

Just remove the background image every time u join a page of the website, or make a pr removing the file xd

[tabishnaqvi1311]

Hello @MehfoozurRehman , I noticed that you opened this issue three months ago about adding dark mode. I'm interested in contributing to the project and was wondering if you are still working on this issue or if you would be willing to let me take a look at it? Please let me know if there's anything I can do to help.

[codesmith25103]

Hey @dougwilson, is this issue still open? If yes, can you please assign me this issue?

[faisalsaifii]

What's pending here?

[MehfoozurRehman]

Hey everyone,

Apologies for my absence last year due to studies. I'm comfortable with the MERN stack but not Ruby. However, I use Express.js daily and am eager to implement dark mode. Can someone guide me on running the project locally? I'm ready to contribute.

Thanks,

[MehfoozurRehman]

ok so last year I tried doing the local run according to repo readme and again today i tried but

its giving me this error for some reason to make sure it's not my local pc i am using GitHub code spaces.

these is the result of first steps I am not really familiar with the ruby ecosystem so please let me know what i am doing wrong.

[MehfoozurRehman]

and i have read the issues created based on this one so what i am thinking once i have this running locally

the area where i have marked red i am thinking of adding

these two icons first there can be some js to check the user device preference and adjust the theme according to that and if a user switches the theme, we save the preference in local storage. also i have read the concern about removing the background image from body i will make sure i pick the background color from that image for the light mode

[chrisdel101]

Hey Guys, was this still active? And/or still being worked on? I'm looking to make some contributions here.

[crandmck]

@chrisdel101 Please do.... I haven't delved into this issue, but if you can sort it out your contribs are welcome!

[chrisdel101]

okay, I'm looking into this and will plan to handle it.

[MehfoozurRehman]

guys can someone please help me run the repo locally

[0x1026]

Hey, just read the /README.md#local-setup

[MehfoozurRehman]

ok so last year I tried doing the local run according to repo readme and again today i tried but

its giving me this error for some reason to make sure it's not my local pc i am using GitHub code spaces.

these is the result of first steps I am not really familiar with the ruby ecosystem so please let me know what i am doing wrong.

i have sent this before the instructions in readme are not working for me please can you help here

[MehfoozurRehman]

i have tried on github codespaces and my local computer its the same

[chrisdel101]

@MehfoozurRehman I've already started working on this, see above, and have made some significant progress. Prob not worth you also working on at this point.

If you are set on it, I am making this as a "theme", meaning there could be numerous themes. So after I complete PR this you could add another "theme". Like GH has multiple dark themes?

[MehfoozurRehman]

@chrisdel101, it's okay. Please continue working on this. I was under the impression that this issue was abandoned, but if you can, please complete the pull request.

[chrisdel101]

Re: your setup, the images above are not showing up for me. After you install Jekyll and run the serve command what happens?

[MehfoozurRehman]

this is what I am getting
I followed the readme file here

[chrisdel101]

Huh, yeah I have no idea why you are getting that. Seems like something is not intstalled correctly, or a gem is missing. I assume you did all these steps first:

1. https://jekyllrb.com/docs/installation/
2. https://jekyllrb.com/docs/

If something failed in the first two steps then the server will fail. Maybe try the example in the docs they give and see you can run the basic example there. You should have something like this before it will run

ruby-v
ruby 3.3.0

jekyll -v
jekyll 4.3.3

Install extra gem from /README.md#local-setup
gem install jekyll-redirect-from

Then after cloning/forking the expressJS repo, this is what I see:

bundle install
Fetching gem metadata from https://rubygems.org/..........
Resolving dependencies...
Fetching nokogiri 1.16.4 (x86_64-darwin)
Installing nokogiri 1.16.4 (x86_64-darwin)
Bundle complete! 3 Gemfile dependencies, 96 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

bundle exec jekyll serve
/usr/local/lib/ruby/gems/3.3.0/gems/jekyll-3.9.5/lib/jekyll.rb:28: warning: csv was loaded from the standard library, but will no longer be part of the default gems since Ruby 3.4.0. Add csv to your Gemfile or gemspec. Also contact author of jekyll-3.9.5 to add csv into its gemspec.
Configuration file: /Users/myComputer/code_work/jekyll/expressjs_copy/_config.yml
To use retry middleware with Faraday v2.0+, install `faraday-retry` gem
            Source: /Users/myComputer/code_work/jekyll/expressjs_copy
       Destination: /Users/myComputer/code_work/jekyll/expressjs_copy/_site
 Incremental build: enabled
      Generating... 
                    done in 15.486 seconds.
 Auto-regeneration: enabled for '/Users/myComputer/code_work/jekyll/expressjs_copy'
LiveReload address: http://127.0.0.1:35729
    Server address: http://127.0.0.1:4000
  Server running... press ctrl-c to stop.
        LiveReload: Browser connected

[MehfoozurRehman]

yes so I have done the steps mentioned above It is saying the same thing for me just my ruby and Jakyell versions are different I am using GitHub code spaces for this these are the versions installed on that by default

[MehfoozurRehman]

ok so I was trying a few things i didn't know how to update the ruby version I changed the codespaces settings to use the beta docker image and gem update --system 3.5.9 updated the ruby using this. I don't know which one fixed it but now it's working

anyways appreciate the help please let me where you are in completing this and if you need any help with this issue

[chrisdel101]

Hey guys, I ran into a problem.
This is the _layouts/home.html which is used for the main index.md. It pulls a JS file I added from the JS folder. It needs to run at the end of the page, and it works.

<html lang="{{ page.lang }}">
   <body class="en-doc">
   <script data-cfasync="false" src="../js/theme.js"></script>
   </body>
</html>

This is the _layouts/page.html which runs most of the other pages, for example installing.md. It pulls a JS file I added to the same folder _layouts just for test purposes to show the problem.

<html lang="{{ page.lang }}">
   <body class="en-doc">
   <script data-cfasync="false" src="test.js"></script>
   </body>
</html>

I get ERROR 'en/starter/test.js' not found. It is ignoring the src, even absolute paths, and pulling for path where the markdown file is located en/starter/markdown.md. How do I stop this? Why is this happening?

The overall point is all the pages need that theme.js file

Update-- Status: working now.

[crandmck]

Fixed with #1490