ktistec
ktistec copied to clipboard
toddsundsted
Idea: automatic dark/light mode
CSS gives an easy way to set rules based on preference of the client. See: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
A simple implementation example would be to define colors via variables as a default / fallback (light ode):
:root {
--bg-content: #fff;
--bg-navigation: #000;
--fg-content: #000;
--fg-navigation: #fff;
--fg-highlight: #539ef4;
}
And then override colors in case the browser of a visitor prefers dark color / dark mode:
@media (prefers-color-scheme: dark) {
:root {
--bg-content: #0d1117;
--bg-navigation: #161b22;
--fg-content: #c9d1d9;
--fg-navigation: #f0f6fc;
--fg-highlight: #539ef4;
}
}
Colors in css then have to pick up the variables:
/** large actor partial **/
.ui.actor.segments {
> .segment i {
position: absolute;
bottom: 1.5rem;
left: 1.5rem;
color: var(--fg-content);
line-height: 5rem;
font-size: 5rem;
}
This would also give the opportunity to set custom color themes for hosters.
Is this something you are interested in?
clever! i need to look at how it interacts with semantic ui, but generally it seems to work!
got a lot on my plate this week, but I could try to hack on something next weekend
no worries. i'm going to look at moving from semantic ui to fomantic ui, which seems to be the most active fork, as a step in this direction. it would be a useful feature.
I tried a few hacks, but nothing was really good enough (I am not very skillful in terms of CSS...). However, in general there is the theming option both for semantic-ui and fomantic-ui.
i.e. here is a little repo with some community semantic-ui themes: https://semantic-ui-forest.com/themes/
These could be switched between via JS or simply the colors with the @media tag I mentioned above.
However, even with that a little more work is required.
I.e. simply using the cyborg theme gives this:
A little additional CSS is required to make it usable:
p, .summary {
color: #fff !important;
}
.summary > a {
color: #1b6ba7 !important;
}
I did try some custom overrides that do seem to work fine for now. but they are awfully hacky tbh...:
@media (prefers-color-scheme: dark) {
body {
background-color: #111 !important;
}
.ui.menu .ui.dropdown .menu > .item, a.ui {
background: #1b1c1d !important;
color: #fff !important;
}
.ui.menu > a, .ui.dropdown {
color: #fff !important;
}
.ui.menu > button, .ui.card, .ui.segment, .ui.dropdown {
color: #fff !important;
background-color: #222 !important;
box-shadow: 0 0 0.1em #fff !important;
}
.ui.card > .extra > p > a {
color: #1e70bf !important;
}
.ui.inline.form > button, .ui.mini.button, .ui.mini.button > i, .ui.mini.button.dangerous {
color: #aaa !important;
}
trix-editor, textarea, .trix-dialog, input, table {
background: #222 !important;
color: #fff !important;
box-shadow: 0 0 0.1em #fff !important;
}
p, .summary, .ui.text, .ui.header, .meta, span {
color: #fff !important;
background: transparent !important;
}
}
It is currently live on https://social.jayvii.de
Sorry, I missed your message!
I test it with firefox on linux. The instance runs inside docker.
I updated the CSS in my instance. Unfortunately I need to re-do it every time I restart the container, because I "hot-edited" the css inside the container rather than editing the .less before building:
@media (prefers-color-scheme: dark) {
body {
background-color: #111 !important;
}
.ui.menu .ui.dropdown .menu > .item, a.ui {
background: #1b1c1d !important;
color: #fff !important;
}
.ui.menu > a, .ui.dropdown {
color: #fff !important;
}
.ui.menu > button, .ui.card, .ui.segment, .ui.dropdown {
color: #fff !important;
background-color: #111 !important;
box-shadow: 0 0 0.1em #222 !important;
}
.ui.form .field :disabled {
color: #ddd !important;
background-color: #333 !important;
opacity: 1.0 !important;
}
.ui.card > .extra > p > a, a > span {
color: #4183c4 !important;
}
.ui.card > .extra > p > a:hover, a:hover > span {
color: #1e70bf !important;
}
/*.ui.inline.form, .meta > a {
padding: 2px;
border-radius: 3px;
background-color: #ffffffaa !important;
}*/
.ui.inline.form > button, .ui.mini.button, .ui.mini.button > i, button.ui.dangerous.iconic.mini {
//color: rgba(0, 0, 0, 0.6) !important;
color: #aaa !important;
}
trix-editor, textarea, .trix-dialog, input, table {
background: #222 !important;
color: #fff !important;
box-shadow: 0 0 0.1em #fff !important;
}
p, .summary, .ui.text, .ui.header, .meta, span, figcaption, label, .text {
color: #fff !important;
background: transparent !important;
}
/* Code Blocks */
code, pre {
background-color: #333 !important
}
a.user, a.date {
color: #4183c4 !Important;
}
}
thanks! i'll take a swing at this again. i don't switch between light and dark modes, so i don't know what to expect, and it wasn't switching for me.
Here aresome example screenshots of how it looks like if your browser is set to dark mode and you open up the site (it uses the prefers-color-scheme CSS tag:
Just to clarify: i blurred some info on the screenshots that is not necessary to see how the CSS pans out ;)