Skip to main content

🌜 🦉 Things I did today: my websites now automatically switch to a dark theme if your browser has one.
- https://www.davidrevoy.com/
- https://www.peppercarrot.com/

#webdev #css


David Revoy - Artist, Instructor, using only Free/Libre and Open-Source software since 2009.

Website of David Revoy, artist and instructor using only Free/Libre and Open-Source software since 2009.
David Revoy
#WebDev #css
Irina
Irina  
•
do you mean "if it's actually set to a dark theme" or "if it's possible to switch to a dark theme"? (I'm a light-theme person and I'd hate for Firefox to switch to dark theme just because it can)
Ryuno-Ki
Ryuno-Ki  
•

@irina There's no switch to choose a theme different from OS preference (yet?)

@davidrevoy

@David Revoy @Irina
David Revoy
David Revoy  
•

@RyunoKi @irina Hey, in themes Firefox has an 'auto' themes that follows the O.S. themes. At least, it works on Plasma/KDE, I haven't tried elsewhere. You can also specify a light or dark preferences for browsing (in Firefox themes).

Making a button on my website is complex; mainly because I would need to link it with a cookie system so it saves on your browser your preferences.

For this feature, I only had to write the last paragraph on https://www.davidrevoy.com/themes/blogtheme/css/theme.css

@Ryuno-Ki @Irina
Ryuno-Ki
Ryuno-Ki  
•

@irina Not necessarily.

You could store it in local storage as well.

Personally I've designed mine in a way that it doesn't remember the choice currently:

https://code.jaenis.ch/andre/jaenis.ch_design-system/src/branch/main/components/theme-switcher.js

The styling is then controlled via a class on <body>.


jaenis.ch_design-system

My design system that documents everything from markup over styling to architectural decisions.
Forgejo: Beyond coding. We Forge.
@Irina
David Revoy
David Revoy  
•

@RyunoKi Thanks for sharing your solution. I'll try to adapt it so I can put a little lightbulb symbolic icon somewhere that switch it on/off.

@irina

@Ryuno-Ki @Irina
Ryuno-Ki
Ryuno-Ki  
•

I usually license with AGPL v3 or newer. But this is MIT because legacy (haven't updated the year 😮)
https://code.jaenis.ch/andre/jaenis.ch_design-system/src/branch/main/LICENSE.txt

According to

https://www.gnu.org/licenses/license-list.en.html

it's compatible.


jaenis.ch_design-system

My design system that documents everything from markup over styling to architectural decisions.
Forgejo: Beyond coding. We Forge.
Ryuno-Ki
Ryuno-Ki  
•

Since your CSS is GPL:

1. Where can I find the source?
2. Do you accept Merge Requests?

@irina

@Irina
David Revoy
David Revoy  
•

@RyunoKi my blog theme doesn't have a repo (but the engine, PLuXML has one). Yes, I put the GPL on the CSS because I had copies in the past by theme make/seller.

For Pepper&Carrot, the website is entirely here: https://framagit.org/peppercarrot/website-2021/-/merge_requests/106 (this is the MR of the dark theme). Thanks for the help


Add a global "dark theme" (!106) · Merge requests · peppercarrot / website · GitLab

The website of Pepper&Carrot without the huge database of picture necessary to fill the content (dozens of Gigabyte of data, see https://www.peppercarrot.com/0_sources/ ).
GitLab
@Ryuno-Ki
Ryuno-Ki
Ryuno-Ki  
•

Doesn't load right away (not even framagit).

Will try again later.

David Revoy
David Revoy  
•
@RyunoKi No problem, Framagit is sometime capricious. (and more for new account creation depending of wave of spams). No problem if you can't make a MR, what you shared is already a good tip. I'll can do it. The harder might be the placement of the icon on the header nav bar 😅 🤣
@Ryuno-Ki
Ryuno-Ki
Ryuno-Ki  
•

You're welcome.

I placed my switcher in the footer. There are several places that could be expected.

Might be a good time to think of „skip to“ links for my site now that we speak about it 🤔

Ryuno-Ki
Ryuno-Ki  
•

Created an account on framagit, but have to await approval by the instance admin (in case you need to vouch).

Meanwhile cloned the repo.

David Revoy
David Revoy  
•
@RyunoKi Thanks! Yes, it can take up to 5 days I think, and sometime no email are sent, you'll just need to retry. It's a system the admin found to fight a big wave of spam accounts.
@Ryuno-Ki
Pool dessins
Pool dessins  
•
hello Darkness my old friend... 🎶 Bonne journée David 🙂
⇧