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.

Sign up for GitHub

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

Jump to bottom

Add dark mode support #701

Closed
xavierfoucrier opened this issue Mar 29, 2023 · 4 comments
Closed

Add dark mode support #701

xavierfoucrier opened this issue Mar 29, 2023 · 4 comments
Assignees
@xavierfoucrier
Labels
documentation
Milestone
2.10.0

Comments

@xavierfoucrier
Copy link
Member

Enhance documentation website by implementing a dark scheme to improve developer experience when reading at night.
@pinak3748
Copy link

pinak3748 commented May 20, 2023 •
edited
Loading

Hey xavierfoucrier,

can I implement the dark mode, I have some approach in my mind but don't have any idea where to start on them.

We can add theme classes directly in the body tag and can swap them on toggle button using the eventListner on it

eg:

<body class="dark-theme || light-theme">

body {
  --text-color: #222;
  --bkg-color: #fff;
}

body.dark-theme {
  --text-color: #eee;
  --bkg-color: #121212;
}


@media (prefers-color-scheme: dark) {
  body { 
    --text-color: #eee;
    --bkg-color: #121212;
  }

  body.light-theme {
    --text-color: #222;
    --bkg-color: #fff;
  }
}

btn.addEventListener("click", function() {
  if (prefersDarkScheme.matches) {
    document.body.classList.toggle("light-theme");
  } else {
    document.body.classList.toggle("dark-theme");
  }
});

@xavierfoucrier
Copy link
Member Author

Hello @pinak3748 👋

Thanks for your proposal.

I haven't planned to build a switch button, because it was not planned in the design part, so only a dark mode based on the browser preferred scheme to begin.

If you have time and want to dive into this issue, create a pull request that target the website-2.x branch.
Currently I can't pass time to explain how the website setup is working, so if you don't know where to start and how to start, don't waste your time.

I have planned to work on this issue after #703 😉

@xavierfoucrier xavierfoucrier self-assigned this Oct 17, 2023
@xavierfoucrier
Copy link
Member Author

Working on it 🕶️ 🏴 🖤 ⚫

@xavierfoucrier xavierfoucrier mentioned this issue Oct 20, 2023
Merged
@xavierfoucrier
Copy link
Member Author

image

It's starting to look very nice 🖤

xavierfoucrier added a commit that referenced this issue Nov 1, 2023
@xavierfoucrier
Website dark mode support
027a63e 
This close #701.
@xavierfoucrier xavierfoucrier added this to the barba@next milestone Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@xavierfoucrier xavierfoucrier

Labels
documentation
Projects
None yet
Milestone
2.10.0
Development

No branches or pull requests
2 participants
@xavierfoucrier @pinak3748