WrenHavoc OP , to Programming in Problems with dark-theme toggle
@WrenHavoc@lemmy.dbzer0.com avatar

I already have a dark theme set, I'm using catppuccin's colors
What I'm trying to have it do is when a button is pressed, it switches to the light version of it

currently my code looks something like this:

#theme-toggle:checked ~ body {
  background-color: #eff1f5;
  color: #fff;
}

#theme-toggle:checked ~ html {
  background-color: #eff1f5;
}

#theme-toggle:checked ~ .content {
  background-color: #eff1f5;
}

the button itself is a checkbox that has display set to none and the label set as an svg so when you click the icon, it gets checked.

<input style="display: none;" type="checkbox" id="theme-toggle">
                <label for="theme-toggle" class="theme-button">
                    <img class="theme-button-svg" src="./icons/half-moon.svg">
                </label>

I used a similar strategy when making the menu for the site so I know it should work

bleistift2 , to Programming in Problems with dark-theme toggle
@bleistift2@sopuli.xyz avatar

The problem with #theme-toggle:checked ~body is that the selector is wrong. ~ requires that the second part comes after the first part in the HTML. But your toggle is inside the html and the body. [1]

Use the new-ish :has selector [2]:

html:has(#theme-toggle:checked) {
  background-color: #eff1f5;
}

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Subsequent-sibling_combinator
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has

WrenHavoc OP , to Programming in Problems with dark-theme toggle
@WrenHavoc@lemmy.dbzer0.com avatar

ok, I have a new problem, it doesn't work when I try to use the class for example

.content:has(#theme-toggle:checked) {
  color: #4c4f69;
}

won't work :[

victorz , to Web Development in Problems with dark-theme toggle 
#theme-toggle:checked ~ body {
  background-color: #eff1f5;
  color: #fff;
}

#theme-toggle:checked ~ html {
  background-color: #eff1f5;
}

#theme-toggle:checked ~ .content {
  background-color: #eff1f5;
}

I don't think this will work. Read up on what the "subsequent sibling" selector really does and double check that it's what you really want here.

Also check out the color-scheme property and the articles listed under the See also heading.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme#see_also

Maybe that can give you some ideas where you need to brush up on modern dark mode styling. 👍

WrenHavoc OP , to Web Development in Problems with dark-theme toggle
@WrenHavoc@lemmy.dbzer0.com avatar

I got a piece of code from c/programming that works
Using body:has(-toggle:checked)

I prefer doing it that way because I use a browser with anti-fingerprinting which hides the preferred theme so prefers-color-scheme doesn't work as well

Ephera , to Web Development in Problems with dark-theme toggle

I haven't tried it, but I'm guessing to implement a manual toggle with color-scheme, you could then do this:

body {
    color-scheme: light dark;
}
body:has(#theme-toggle:checked) {
    color-scheme: dark;
}
victorz , (edited ) to Web Development in Problems with dark-theme toggle

Indeed you can, just like this (see below). I just tried it in a codepen and it seems to work. Although do note that if you put light dark as the default value, once you toggle the switch off again, it'll choose whatever mode the user agent wants, which might still be dark mode. So if you want it to be light by default, you'll need to use a value that enforces that.

body {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}
  
body:has(#theme-toggle:checked) {
  color-scheme: dark;
}
Ephera , to Web Development in Problems with dark-theme toggle

Ah yeah, I guess, users would expect some action to happen when they click that toggle, not just for it to change from automatic-dark to manual-dark.

Perhaps the simplest non-JS and non-persistent solution would then be to have it pick the color-scheme automatically by default, but if the checkbox is checked, then set the colors to the opposite.

So, probably something like this:

body {
  color-scheme: light dark;

  color: light-dark(black, white);
  background-color: light-dark(white, black);
}
@media (prefers-color-scheme: dark) {
  body:has(#theme-toggle:checked) {
    color-scheme: light; /*opposite*/
  }
}
@media (prefers-color-scheme: light) {
  body:has(#theme-toggle:checked) {
    color-scheme: dark; /*opposite*/
  }
}

You could probably even theme the checkbox to show a sun or a moon, depending on the current color scheme. 🙃

@argv_minus_one@mastodon.sdf.org avatar argv_minus_one , to random

I miss when desktop themes like these were a thing.

I took a look at what's available for 6 at https://store.kde.org/browse?cat=114&ord=latest and…they all kinda look the same. 🫤 The only ones that stand out are the ones that mimic old operating systems like Windows 3.1, and none are as exotic looking as some of the below.

Where does a guy find all the wild non-rectangular window decorations and whatnot these days?

A selection of desktop themes for Mac OS 9. Some are fairly straightforward modifications of the standard Macintosh look, but others are quite exotic.
ALT
@WanderingInDigitalWorlds@sunny.garden avatar WanderingInDigitalWorlds , to random

I truly missed how beautiful Samsung phones can be made with just a theme. One UI 8 is Samsung putting their whole ass into design and the theme makers are truly taking advantage of all the tools Samsung provides. Even my keyboard looks pretty as fuck, it makes me love my phone again in a big way.

My Apple phone was just a tool, didn't feel overly personalized like I wanted it to be. Samsung phones are built different, now it feels incredibly personal...I could step it up further by creating my own themes by using Theme Park app.

I might have to think about it (as I have in the past, but, it was a NSFW just for at home theme). I used the automation feature to automatically toggle back and forth, it worked quite nicely. However, I need to track down the icon theme that I used and those pictures...Could always find new pictures. LMAO The internet provides if one just looks.

A similar colorful and moodily dark background, the leafless tree in the snow landscape bathed in colorful lights is truly satisfying in my opinion! It feels as though an brilliantly colorful aurora is blessing this tree that is hibernating during winter, with a fruitful and healthy growing season when spring arrives. It feels like even the snow has been blessed with a myriad of colors that will nourish the land in the coming spring. I tend to keep my home screen bare of anything save for the essentials!
A clever use of color with all the expected toggles for various aspects of a Quick Settings menu on a phone is truly helpful. A light teal blue for inactivated settings, a light playful pink for activated toggles. For Brightness and Volume, the level of brightness/volume is determined by how much a gold-tinged orange fills a grey bar. A nice representation of how bright or loud the phone is!
Even the Dialer for this phone is bright and cheery, everything but the video calling button is themed to the nines! It's basically the same theme but miniaturized into the Dialer window (with the numbers and * and # buttons). I adore this theme so much.

Even the Dialer for this phone is bright and cheery, everything but the video calling button is themed to the nines! It's basically the same theme but miniaturized into the Dialer window (with the numbers and * and # buttons). I adore this theme so much.
ALT
@h4ckernews@mastodon.social avatar h4ckernews Bot , to random
@bitinn@mastodon.gamedev.place avatar bitinn , to random

I have been doing a theme for Zola static site generator in the past a few weekends, think it is ready to be released, not sure anyone is looking for a good theme and use Zola, but will share it later today. 👀

bitinn OP ,
@bitinn@mastodon.gamedev.place avatar

Happy to introduce "Marisa" 🧹, a theme for Zola static site generator

KEY FEATURES:

  • Non-opinionated styling, bring your own css styling to every page.

  • i18n support, easy to customize into any language.

  • Support full-length articles and short status update posts.

  • Fediverse comment + Webmentions.

  • NoAI and Indieweb ready!

Live demo can be found here:

https://theme.marisa.club

Repo on codeberg:

https://codeberg.org/bitinn/marisa-theme

Override theme styling for Marisa, featuring holiday.css (a classless css library)

@ThornwoodOnline@mastodon.social avatar ThornwoodOnline , to random

Bored Stiff (EP.19): Black Hearts Be Damned And The Implementation Of Religion In Politcs

At first, when writing Black Hearts Be Damned, I didn’t intend for the story to merge so much with what politics of then and now. Religion has always been present with politics and nations identity for centuries. So when I came to the conclusion that a government, consisting of pirates...

https://thornwoodonline.wordpress.com/2025/09/23/bored-stiff-ep-19-black-hearts-be-damned-and-the-implementation-of-religion-in-politcs/

@AGT@mastodon.scot avatar AGT , to random


With the new movie imminent, I had to post this. I remember playing it as I drove along the desolate main roads and deserted streets on my way home from work during the height of the Covid pandemic simply to see what it would feel like.
It was chillingly disturbing, and as far as atmospheric music goes, this is really hard to beat…
https://www.youtube.com/watch?v=DbwlGv9SWfY

@daniel@social.dhelonious.de avatar daniel , to random

This blog post by @rolle about how he found his way into the and created IMO the best is well worth a read!

https://rolle.design/the-day-i-decided-to-build-my-own-twitter

@hugovk@mastodon.social avatar hugovk , to random

Just released: em 4.4.0, the CLI emoji keyboard 🚀⌨️✨

✨ Upgraded to emojilib 4.0.0: "The keywords include most if not all the :shortcode: from different platforms"

✨ Dropped support for oh-so-very-nearly-EOL Python 3.8.

https://pypi.org/project/em-keyboard/

hugovk OP ,
@hugovk@mastodon.social avatar

🙈 https://www.youtube.com/watch?v=2cxSP90gj8c [Vappu is May Day]

Just released! 🚀🚀🚀🚀

termcolor 3.1.0
Add true colour, cache system lookups
https://github.com/termcolor/termcolor/releases/tag/3.1.0

em-keyboard 5.1.0
Add Emoji 16.0: 🫩 🫆 🪾 🫜 🪉 🪏 🫟 🇨🇶
https://github.com/hugovk/em-keyboard/releases/tag/v5.1.0

Humanize 4.12.3
Fix regression in naturalsize, improve French translation
https://github.com/python-humanize/humanize/releases/tag/4.12.3

Python Docs Theme 2025.4.1
Fix copy button with multiple tracebacks
https://github.com/python/python-docs-theme/releases/tag/2025.4.1