<@U02AB5P2XU6> Hi, on your blog on Android, the bottom bar of Chrome is not in dark Mode, any idea t...

# kobweb

[אליהו הדס]

@David Herman Hi, on your blog on Android, the bottom bar of Chrome is not in dark Mode, any idea to fix this ? Maybe open on issue on Github ?

[David Herman]

Thanks for the report. Are you talking about the scrollbar? Because that's not something I have control of I think?

[David Herman]

I appreciate the comparison with GitHub though

[David Herman]

I'll open a bug to investigate

[S.]

Also happens on my kobweb sites, haven't looked into it yet. but no, that's not the scrollbar, it's the home "button"/gesture thing

[David Herman]

Seems like this! https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color

[David Herman]

Thank you @אליהו הדס I had no idea

[David Herman]

Opened https://github.com/varabyte/kobweb/issues/627. I will take a stab at this tomorrow morning I think, if it is as trivial as I'm hoping.

[אליהו הדס]

@David Herman Wow Thanks a lot :)

[CLOVIS]

wow, TIL

[curioustechizen]

In an Android app, that bar would be called the navigation bar. There are several APIs that deal with it.

For example if you set your app for edge-to-edge you could still offset your buttons to not overlap with that bar using suitable inset modifiers or padding modifiers. All of those have the name navigationBar in them.

Also, you could use some system UI APIs to set the color for the navigation bar and those APIs also use the name navigationBar in them.

[David Herman]

Just an update, does not seem as trivial as I hoped. You can visit https://bitspittle.dev -- I am now setting the theme-color but my Android phone is not respecting it.

[David Herman]

Investigating. Clearly the github folks are doing it so there should be a way.

[אליהו הדס]

Perfect, it's work !

[אליהו הדס]

@David Herman maybe you have to clean the cache

[David Herman]

I'm playing with stuff but sadly I think it's still broken

[David Herman]

Try changing the color mode to light and I think you'll see it's broken in that case

[David Herman]

It's been very frustrating to test this change because as far as I can tell, Chrome for Android doesn't have a way to force refresh, and inspecting is tricky. I actually installed Android Studio just so I could start running a virtual device and inspect the DOM.

[אליהו הדס]

1000011097.jpg

[David Herman]

Looks like I got something that worked.

I declared the current color scheme as "light" or "dark" and then defined two theme colors: one which applies in light mode, and one which applies in dark.

[David Herman]

I'll share the code a bit later. You can paste it in your own site for now but I'll add it into the next version of Kobweb if you just want to wait.

[אליהו הדס]

the problem is that on your blog the theme does not sync with the device mode

[David Herman]

Latest seems to be working

screen-20241214-194235.mp4

[David Herman]

(screen record on Android hides the navigation buttons but you can see the bottom bar changing color now)

[אליהו הדס]

that's what i'm saying, you have to change the mode of the device first

[David Herman]

Ah, you're saying I should default to the device color mode if possible?

[אליהו הדס]

Before, no matter the device mode, the navigation bar was in light mode, now it is synchronized but the site not necessarily

[אליהו הדס]

The Site is displayed in Dark Mode by default

[David Herman]

Yes I set that up manually

[David Herman]

I should possibly add a new option, use system default

[אליהו הדס]

Most sites don't have buttons to change the mode, it seems to me.

[אליהו הדס]

They only sync with the device mode

[אליהו הדס]

Anyway, thanks a lot, I love kobweb!

[David Herman]

OK @אליהו הדס, you'll need to clear the local storage for the page (I save the user's last selected color mode after you visit the page for the first time), but at this point, my blog site should respect your device's color mode preference the first time you visit it.

[אליהו הדס]

@David Herman Thanks a lot, it's work great !

[David Herman]

Awesome! Thanks for putting this issue on my radar.

[David Herman]

If you are in a place where you can use kobweb=0.20.1-SNAPSHOT in your libs.versions.toml , that will start automatically setting the theme for you.

[David Herman]

And it also exposes a new ColorMode.systemPreference property which you can use for the initial color mode.

[David Herman]

Bringing it all together, the change to my blog site looks like this: https://github.com/bitspittle/bitspittle.dev/commit/740aeaacb7a0ec783df15faf4a031ba190d978b5

[אליהו הדס]

Thanks a lot! When will there be a kobpress for blogging? 😅

[David Herman]

Hahaha, I'll get right on that! ... After finishing the docs site, getting CSS API coverage to 100%, adding all remaining planned Silk widgets, figuring out how to split Kobweb sites up into smaller pieces, adding tons of functionality to the Kobweb IntelliJ Plug-in, and fixing all bugs with the 1.0 Milestone label....... Uh, don't wait up for me 😅

But seriously, I would be proud of a day when Kobweb ends up being a layer under other technology, that would be wild.

[אליהו הדס]

I think kobweb is the web framework with the most potential, and is what compose html should be. I have high hopes that one day it will have its moment of hype and that many technologies will use it

[David Herman]

Thank you for your kind words!

I'm actually ok if Kobweb's growth remains slow and steady, without any rocket ship, because I'm not in this thing for money or anything like that. If too many people start piling on all at the same time, I don't know if I'm ready to manage that and continued development!

I'm also really excited about Kilua. The developer behind that is doing some really clever stuff, and they have a ton of experience in the Kotlin web dev space. Check out https://github.com/rjaros/kilua sometime if you haven't already.

[אליהו הדס]

I think we just have to do like Linus Torvalds, solve today's problems and see where it takes us 🙂 . As for Kilua, I had already seen it, I didn't look into it in depth but I have the impression of moving away a bit from Jetpack Compose and that it requires being very close to HTML, where Kobweb makes every effort to get closer to Compose.

[David Herman]

Agreed about the approach -- just tackle what's right in front of you. I'm just trying to solve problems and get to 1.0! I haven't really thought about anything more than that.

Even with Kobweb I end up writing a lot of HTML / CSS logic but yes, I'm hoping especially once I have a ton of Silk widgets, it will feel less "sharp" than working with raw HTML. Time will tell I guess!

I'm glad Robert is working on his approach so both will be available. I'm also glad he's providing an SSR solution because I gave up even trying to think about that two years ago, that was too many balls for me to juggle!

[S.]

@אליהו הדס which features would you want from a kobpress? kobweb already has some good blogging capabilities I think.
one of the best parts about frameworks like kobweb in general, is that in the end it's "just html and css" rather than a black box with half of Hogwarts inside. so it's very extensible, meaning you can make it fit for about any requirements and usecases. for example you can easily implement your own ssr for seo indexing purposes, use something like asciidoc or markdown renderers to create your own medium, and you have the whole world of js libs available so you could add some ready to use comment boxes

[אליהו הדס]

@S. In fact, I thought it would have been nice to design a desktop app that would act as a panel, that is to say that would allow you to easily manage your posts, categories, authors, etc. a bit like wordpress does. It would also have been nice if it generated a static json api as well as an rss. And also nice if there were already predefined themes that could be edited

[S.]

oh I totally missed the wordpress reference 😂. That's quite a lot of work then

[S.]

I thought you meant something more like https://medium.com

[אליהו הדס]

Yes, that's the idea. I just kept in mind that WordPress was originally for blogs. 😅

[S.]

fair enough. posts management would just be database CRUD, rss api should be fairly simple as well, themes in terms of colours too but if you want to have a drag&drop editor to freely move sections around then that's a monumental task. kobweb sites still need to be compiled whereas wordpress is inherently SSR

[אליהו הדס]

No no I don't want elementor with kobweb 🤢

[אליהו הדס]

It's mainly to manage your posts.

[אליהו הדס]

Currently, it's just markdowns, it's a bit tedious to make categories, subcategories, tags, you have to rewrite everything each time,

[אליהו הדס]

I also think that it is not that complicated, especially since the Jewel demo integrates a very nice markdown editor

[S.]

ah that's a relief, and sounds a lot more doable.
(also markdown is a good format for the new standard way of writing blog posts - chatgpt)

[אליהו הדס]

It might even be possible to link it to gpt type APIs to help us write the article

[אליהו הדס]

This is more or less the idea, with a push button to push the modifications, and the site is built automatically via github actions

[אליהו הדס]

Even for the documentations it would be very nice, I find that all the current solutions are a bit archaic

[אליהו הדס]

Oh yes and facilitate internationalization

[S.]

the most difficult part would be writing the UI for such a text editor.
I have an app where I let users write pure asciidoc, which isn't pretty but has a jvm and js renderer, so users can freely write and edit their notes since rebuilding the site each time isn't feasible. https://app.fluen.se/notes/96202/在...呢

[אליהו הדס]

run the Jewel demo, they already have a very nice editor

[אליהו הדס]

or else https://github.com/MohamedRejeb/compose-rich-editor also did a great job

[S.]

yeah the editor is cool but not for compose html

[אליהו הדס]

Why do it with compose html? Just make a desktop app that acts as a panel, you can do it with compose for desktop

[S.]

in my case markdown didn't do the job but yes, there are already many editors available.

[S.]

because shipping desktop apps isn't so trivial

[אליהו הדס]

I love desktop apps personally 🙂

[S.]

also my comment was based on that I already looked at this library for my project where I needed something for compose html

[S.]

yeah, but not shipping them 😅

[S.]

also, do you mean anything specific about internationalization? basic localisation is very much doable, like here for example https://fluen.se/en/ or https://fluen.se/zh/

[אליהו הדס]

What I mean is that the panel itself handles the markdown in each language, like you have the list of your posts and inside each post, you can write your post in the language you want. It's just to simplify the process and avoid mistakes, and especially keep a clear structure if there are a lot of posts

[David Herman]

FYI @אליהו הדס after talking to another Kobweb dev today, we decided to make setting the theme color opt-in and not automatic. It doesn't seem like we should assume that most sites want to set it.

However, I'll consider adding it into all the templates, and I'll definitely update the Kobweb README.

Anyway, the updated commit now looks like this: https://github.com/bitspittle/bitspittle.dev/commit/9d3fbcb4629f7a57f8650843ab953fe9d4ef3eb7

The only change from before is now you have to manually call MetaThemeColor() yourself.

[David Herman]

It's come to my attention that actually theme-color is actually not what we want to be setting here. That controls the look and feel of the browser itself, not the gesture bar underneath it. So.... work still in progress 🙂

[David Herman]

OK confirmed. Do not use MetaThemeColor(), it will go away shortly.