Idea: automatic dark/light mode

[JayVii]

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?

[toddsundsted]

clever! i need to look at how it interacts with semantic ui, but generally it seems to work!

[JayVii]

got a lot on my plate this week, but I could try to hack on something next weekend

[toddsundsted]

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.

[JayVii]

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;
}

[JayVii]

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

[toddsundsted]

thanks! how are you testing this (which OS and browser)?

[JayVii]

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;
}
} 

[toddsundsted]

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.

[JayVii]

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 ;)