Hey I want to collect a list of resources for #ethical #WebDesign #html #css #js #sustainability #a11y etc etc pls reply with your favorites and also pls boost.

@alcinnz @estoricru @markosaric Related: I recently saw a woman's webpage (female name) who was a supporter of accessible websites. She had a theme switcher button that worked without JS. Do you know which page that was? I saw it on mastodon or HN, can't remember which.

@p7bJHqtgjqu5Q8J7KnLzPXUGh7cKiL @alcinnz @estoricru @markosaric interesting idea. you could do this with an input element just before the theme root element, and use the adjacent sibling combinator (+) for a selector to nest all the theme styles under. then they would only apply if the input had a particular value, i.e. that theme was selected.

@seyerian @p7bJHqtgjqu5Q8J7KnLzPXUGh7cKiL @estoricru @markosaric Another approach would be serverside scripting + cookies.

And in the "Rhapsode" auditory browser I'm developing, you can simply link to the stylesheet. Won't recommend that option right now since it only works well in my weird little browser...

@p7bJHqtgjqu5Q8J7KnLzPXUGh7cKiL that was really wordy and didn't come out right. this is what i mean: `#dark_theme_checkbox:checked + #theme_wrapper { ... dark styles here ... }`. this would work for using a checkbox as a toggle for light/dark theme. unsure if possible to make it work with 3 or more themes.

also note there is a CSS media feature to detect the user's preferred color scheme: developer.mozilla.org/en-US/do

@leip4Ier i do not believe it is doable with a <select>: codepen.io/seyerian/pen/yLYdza. there are generally two issues making this currently not possible for most form inputs: 1) `[attr=value]` selector does not work with values entered by the user (only those in the HTML), and 2) there is no selector for elements based on properties of children, i.e. <select> with a certain <option> selected.

it does however work with radio buttons using the general sibling combinator (~): codepen.io/seyerian/pen/BaogwQ.

@leip4Ier ah shit i didn't save the radio pen. 😭 😂 will update in a minute.

@p7bJHqtgjqu5Q8J7KnLzPXUGh7cKiL

I don't see a "theme switcher button" on laurakalbag.com/ , so it's probably not what you are seeking.

But
" a woman's webpage (female name) who was a supporter of accessible websites." makes me think of #LauraKalbag immediately.

You might like to follow her: @laura, she does such great work!

cc
@alcinnz @estoricru @markosaric

@el_joa @laura @alcinnz @estoricru @markosaric Yeah I checked through that site too but it wasn’t quite. Know what's annoying? It's in my history on firefox mobile, but I don’t think there's a way to view my full history :)

@p7bJHqtgjqu5Q8J7KnLzPXUGh7cKiL

Yeah, I can feel you!

I have this with toots sometimes: I know I read one, but (having neigter liked nor bookmarked it) I can't find it again....

Sign in to participate in the conversation
FLOSS.social

For people who care about, support, or build Free, Libre, and Open Source Software (FLOSS).