search

yousinix / portfolYOU

A beautiful portfolio Jekyll theme that works with GitHub Pages.
https://yousinix.github.io/portfolYOU
MIT License
1k stars 598 forks source link

Dark Mode Support #8

Closed BayuAngora closed 3 years ago

BayuAngora commented 5 years ago

This theme is better if there's a dark mode button feature.

yousinix commented 5 years ago

I will try to work on this soon, Maybe help if you could?

BayuAngora commented 5 years ago

This theme has simple dark mode button below. https://webjeda.com/hagura/

mytahir commented 4 years ago

really wished if this Page could had dark mode, It would look good and nicer.

udaygirish commented 4 years ago

@YoussefRaafatNasry Any update on the dark mode support ? really want to see this clean web theme in dark mode!!

BornToBeRoot commented 4 years ago

Dark mode would be awesome. Anyway, thanks for this great project 👍

Edit: Maybe you could use this: https://github.com/sandoche/Darkmode.js

I could embed it into the site, but the color of the text does not change:

image image

Edit 2: The option saveInCookies should be set to false by default.

BayuAngora commented 4 years ago

Dark mode would be awesome. Anyway, thanks for this great project 👍

Edit: Maybe you could use this: https://github.com/sandoche/Darkmode.js

I could embed it into the site, but the color of the text does not change:

image image

Edit 2: The option saveInCookies should be set to false by default.

Text in dark mode should be configure on dark mode style part.

aman-roy commented 4 years ago

You can use @media(prefers-color-scheme: dark)

For more details check these changes in my own blog - https://github.com/aman-roy/amanroy.me/commit/59380cac20998ec8bc7e04f8cb944eccfe58c786

udaygirish commented 4 years ago

@aman-roy That's really great and it worked for me... Thanks a lot, man!!

aman-roy commented 4 years ago

@udaygirish Welcome!

udaygirish commented 4 years ago

@aman-roy I checked my web in several Operating systems don't know whether the problem is with mine or not. But on my mac and android, it is showing in dark but not in chrome browsers in Ubuntu OS. Have you checked on this ?? Just want to know how this is happening!! I have even checked some issues regarding this but still, it seems it is not resolved yet !! Any idea about this?

aman-roy commented 4 years ago

@udaygirish, I use Ubuntu 20.04 as my main driver. I also use chrome for browsing. Unfortunately, there is no support for dark mode in chrome. But don't worry I will help you out in that. But the solution is quite experimental. It has not been incorporated completely into chrome.

Solution

Step 1: Open chrome. Step 2: Write chrome://flags/#enable-force-dark into URL address bar. Step 3: Enable the very first option. Screenshot from 2020-09-13 06-46-27

Step 4: Relaunch. Step 5: Go to http://udaygirish.github.io and check for yourself. It's done!

bitcoinstart commented 3 years ago

would like a button on the page for dark mode

yousinix commented 3 years ago

Dark theme is avilable now guys! 🥳

First of all, I need to apologize for this taking more much much more than it should. And as we developers are addicted to dark themes, I decided it's time to implement this.

I tried the solution proposed by @BornToBeRoot, but the result's were as good as I expected, even after fixing the issues that were introduced by Darkmode.js.

So I ended up using ForEvolve/bootstrap-dark and modyifying it a teeny tiny bit to match the theme style. I might have missed something or two, but I will fix them as soon as I have more time. Don't feel hesitated to report those bugs.

udaygirish commented 3 years ago

Thank you!

yousinix commented 3 years ago

Dark theme was completely reworked in https://github.com/YoussefRaafatNasry/portfolYOU/commit/45da3849bac66a3ec00c9dec24dd434818910bbc for better loading time and color palette.