Light mode

[jannis-baum]

auto-sync with system

[tuurep]

Have you thought about a default light theme?

I tried to make one that looks as "normal" as possible, and ended up mostly copying Github's markdown colors:

https://github.com/tuurep/dotfiles/blob/master/.vivify/styles.css

I'm very happy with this, here's how Vivify's readme looks for example:

My code font looked a little faint compared to GH so darkened the color of that

Blockquotes are also mimicking Github's style, which required me to set margin-left as 0

[jannis-baum]

Looks great! I'd be happy about a PR that adds this to the existing style sheet using CSS' media query prefers-color-scheme so that Vivify's theme syncs with the system.

One thing you might need to check still is syntax highlighting; if I saw the screenshot correctly then that's not yet specified in your light theme and the fallback dark theme colors might not look good on a bright background.

[tuurep]

Thank you, I can send it if I can manage to do some tweaks.

Yeah in fact I explicitly set the syntax off in this way:

span[class^="hljs"] {
    color: #16191d;
    font-weight: normal;
}

... to avoid obsessing over syntax highlighting for the time being :smile: but for the PR I'll do it - the hljs- groups aren't too many and probably I can mimic Github's colors on those too.

I have a question though, about the blockquotes: should I leave that out (only set it in my personal configs), or do you think the Github style should be default?

For comparison, this is how it currently is:

This is how I configured it:

CSS for the above:

blockquote {
    padding: 0 1em;
    color: #656d76;
    border-left: .25em solid #d0d7de;
    margin-left: 0
}

Dark theme would need to set a color for quote text and the left side border.

[jannis-baum]

Sounds great! Thank you!!

For the syntax highlighting make sure to check if there isn't already a theme somewhere else before putting in the effort; I'm pretty sure the package we use for the highlighting should offer a GitHub theme somewhere.

I like your version of the block quotes! Feel free to make that the default and also adjust the dark theme☺️ I was probably rushing through the initial theme and didn't think about it🙈

[tuurep]

Yeah I suspected the blockquote was the way it was simply because it was not set at all :D but I wasn't completely sure

Great, I'll go for it

Also note: I don't use the dark theme so if I set a color you don't like, don't hesitate to change it :smile:

[jannis-baum]

Hey :) How is the light mode going? Let me know in case there is something I can help with!

[tuurep]

Yeah I should get on with it, I'm wholly unfamiliar with the system auto-sync but what you linked should be enough for me to start a PR :D I'll open one later tonight (could be night-time latest)

By the way on my own system I don't even know what I'm "preferring"

I find something like this though: https://wiki.archlinux.org/title/Dark_mode_switching

So maybe it's a thing that could be set up (I don't need it though :smile: )

[jannis-baum]

Yeah I should get on with it, I'm wholly unfamiliar with the system auto-sync but what you linked should be enough for me to start a PR :D I'll open one later tonight (could be night-time latest)

By the way on my own system I don't even know what I'm "preferring"

I find something like this though: https://wiki.archlinux.org/title/Dark_mode_switching

So maybe it's a thing that could be set up (I don't need it though :smile: )

Cool, thanks! No worries about the auto-sync. You can just paste the thing from that link and then I'll try it out & fix it in case there's a problem. But I think it'll just work :) Definitely no need to install something just for that!

[tuurep]

Great, thanks! Shoulda just done it a few days back but had that on my mind for sure.

[jannis-baum]

Great, thanks! Shoulda just done it a few days back but had that on my mind for sure.

Oh no worries at all!

[tuurep]

Hey today I didn't have much time for this, but tomorrow I can definitely send PR :smile: I did find a github highlight.js theme though:

https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css

in the highlight.js repo itself

[jannis-baum]

Closed in #43

[tuurep]

Can I ask you what's the origin of your dark theme, did you create it yourself?

I'm planning to add the same type of prefers switch on this browser addon's block page:

https://github.com/tuurep/NoDistractions-fork

Thinking of using Vivify's dark mode palette (generally)

Supposedly that's allowed and all, but I'm actually curious where it's from? :smile:

[jannis-baum]

Hello! I'm happy you seem to like the color scheme☺️ I did create it myself, it's called Jellyfish. Feel free to use it!

Some more info on the color scheme, just in case you're interested:

A while ago I came up with the goal of having 1 single dynamic color scheme for everything in the terminal, i.e. one that has dark and light mode and can be changed automatically without reloading anything (including the scrollback). For this I created Chameleon, a tool that uses a .yaml color definition to build these dynamic color schemes for Vim, kitty terminal, TextMate/bat, and any other color scheme for terminal applications. It basically works by using the 256 color format for the tools and then makes minimal adjustments to the terminal's (e.g. kitty's) mapping from 24-bit color to the 256 colors. This way we can just switch the terminal's color mapping and all colors change without requiring reloading.

Anyways, Jellyfish is my .yaml file for Chameleon, i.e. it compiles into my Vim, kitty, bat, zsh, fzf, and exa/ls themes. Funny thing is that after all this I never actually did properly set up the light mode though haha so Jellyfish still only has a dark mode, hope I'll do that at some point so I can make use of having implemented Chameleon

[tuurep]

Ah, very interesting. I mean I kinda do the same thing for terminal, but by hand and for one fixed set of colors.

Could be more organized, I have this fairly scuffed HTML table to keep track of this:

https://htmlpreview.github.io/?https://github.com/tuurep/dotfiles/blob/master/.github/colortable.html

:smile: