Add dark mode for docs

[FestiveAkp]

I thought I'd take a stab at creating a dark mode version of the docs:

Updated syntax highlighting under dark mode:

Updated footer:

The initial color setting is based on prefers-color-scheme. You can toggle between light and dark with the button on the header:

The mobile version:

For the time being, dark mode has only been implemented on pages under /docs/*, the rest of the website should still be unchanged and only have light mode. This is my first open-source contribution, so any and all feedback would be definitely appreciated.

[taylorotwell]

When I click a link in the documentation to go to another page it switches back to light mode?

[FestiveAkp]

That should fix it, I wasn't saving the chosen theme anywhere. Now it's saved in localStorage and gets fetched on every page load.

[taylorotwell]

So, once it's in local storage - it is then impossible to let the OS dictate the color? I can't seem to get OS to dictate color once I manually select a color.

[JonoB]

So, once it's in local storage - it is then impossible to let the OS dictate the color? I can't seem to get OS to dictate color once I manually select a color.

Many websites offer 3 modes:

• OS (default)
• light
• dark

At the moment, it looks like this PR can only handle light or dark.

[NicolasPereira]

Fantastic idea!
I already use dark mode on most sites I use, like github, twitter etc.

I believe it is a valid implementation.

[FestiveAkp]

So, once it's in local storage - it is then impossible to let the OS dictate the color? I can't seem to get OS to dictate color once I manually select a color.

Yes, at the moment it toggles between light and dark mode and keeps it's choice regardless of the system setting (For example, I believe https://chakra-ui.com/ does it like this). I could add a third state to the button that respects the OS preference, or change it to a dropdown that has choices for the three modes. I like how clean the single button looks so I'd try that first, but I've seen it done lots of different ways, so let me know what you think.

[corbosman]

I would really like it to respect the OS setting. The less you have to think about dark/light mode the better.

[juancho48]

I have a PCT cataract in my right eye, makes reading the light docs a little hard for me some days, Thanks for this PR!

[taylormaguire]

Very supportive of this. Proposed screenshots looks good.

I would say it's important to allow for 3 modes though
OS Managed
Light (forced)
Dark (forced)

Optional Mode idea
Paper Mode (a softer yellow/book color mode, that is seen on some ebook readers)

there are a number of sites that support this.

[negoziator]

Here's my feedback.

Love it.

Period. ❤️

[adonism2k]

Congrats on your first open source contribution, it will make a huge impact to the community if merged this PR.

Maybe it will be great if we can customize our personal color mode.

Cheers.😄

[genericmilk]

Bloomin love this, top work guys! To echo others, OS sensitive mode would be a fab idea!

[HDVinnie]

Looks great!

[ashikhasnat]

Looks good...

[mnightingale]

So, once it's in local storage - it is then impossible to let the OS dictate the color? I can't seem to get OS to dictate color once I manually select a color.

Perhaps the implementation should only save the preference to localStorage if it differs from the system default?
i.e. use window.matchMedia('(prefers-color-scheme: dark)') to determine if the users preference needs to be stored
Light + Light => clear localstorage
Light + Dark = store dark

---

edit: Just to add there are a lot of changes in package-lock.json (npm 6 vs 7 I think)
Also its not a production build hence +223,290 −9,970

[SBTHDR]

It would be nice!

[reppair]

I love it. I actually check for this option periodically.

About theme switching, I like the proposal from @mnightingale - use the switch as overwrite of OS setting.

Looking good! 🕶️

[ConsoleTVs]

I would add some shadow to the panel here, the content is intended to be "floating above". Some shadow as the light version should help aliviate it. Otherwise, dark themes use lighter color variants to simulate the light above (the closest, the lighter). So I would suggest to either:

• (a) Try adding a shadow
• (b) try a lighter variant of that gray for the panel.

Regarding the persistance and overall, the chosing of the theme (light or dark), here's my two cents:

Major OSs support theming already, and those are available to both, CSS and JS. There's two main ways to overcome this problem. I would suggest reading: https://tailwindcss.com/docs/dark-mode

Overall, the strategy you chose depends on the goal, so:

• If you want to always respect the OS and don't allow switching (eg. to diss-allow use light theme when OS is dark theme): Use the CSS selector (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
• If you want to allow switching + respecting the OS decision as the default, use the window.matchMedia('(prefers-color-scheme: dark)') as suggested by @mnightingale (https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia). The link above, to the tailwind documentation also provides an example implementation to look after.

[datlechin]

awesome!!!!!!

[FestiveAkp]

Thank you everyone for your suggestions! I just implemented the third color mode, which inherits the system preference. It's represented as the third state of the toggle button, a half shaded-in circle:

On first visit, the site theme is set to the system preference. Then you can click the button to switch to dark mode, click it again to switch to light mode, and click a final time to go back to the system preference. Your theme preference is stored in localStorage (either 'system', 'light', or 'dark') and persists across page loads. You can hover over the button to see what the next color mode is. I also added an event listener to window.matchMedia('(prefers-color-scheme: dark)') which means that the site will update in real time if you change your OS theme!

Thank you @mnightingale for the footnotes about the build files and the package-lock.json, those have been corrected. I also moved the theme initializing code out of <body> and in to <head> to avoid FOUC. Sometime tomorrow I'll take a look at the colors for the footer as well as any other changes.

[taylorotwell]

Don't implement changes just because someone in the thread mentions something - I will suggest any changes I want to see. No other suggested changes should be applied. 😄

[reppair]

🚀

Personally, I think a bit more contrast between content background and tooltip card will be nice. Cheers!

[Unlimited23]

This should've been done a long time ago! Thank you bro! :)

[veekthoven]

Awesome!

[gjzim]

Thanks for this.

[P9Q]

Thanks for your great job! 👍

It would be great if you also customize and make the scrollbar dark (something like YouTube's scrollbar)

[mnaderian]

Finally!!

[bilogic]

@FestiveAkp Cool!! How about the API docs as well? 🤣 https://laravel.com/api/master/index.html