Link Composable is not functioning as expected.

[hpcreator]

I am developing Static website with KOBWEB framework. Navigation is an essential part of each and every website. I am also doing something relevant. I am using Link Composable provided by KOBWEB framework with some styling. it is functioning as expected but for UI/UX my style is not attached to the component properly.

Here is a component I have used in my page :
Link( modifier = NavigationItemStyle.toModifier().padding(15.px).fontFamily(FONT_FAMILY) .fontSize(18.px).fontWeight( FontWeight.Normal ).textDecorationLine(TextDecorationLine.None), path = section.path, text = section.title )

Style which I have used is as below :
val NavigationItemStyle = CssStyle { base { Modifier.styleModifier { property("--bs-link-color", Theme.Secondary.rgb) } .color(Theme.Secondary.rgb) .transition(Transition.of(property = "color", duration = 200.ms)) } hover { Modifier.styleModifier { property("--bs-link-hover-color", Theme.Primary.rgb) } .color(Theme.Primary.rgb) } }

When I am trying to run this code it is not applying my style instead it shows the default blue color of links.

My question is, Am I doing anything wrong or this is the issue in the component itself?

[bitspittle]

Please read https://github.com/varabyte/kobweb?tab=readme-ov-file#color-mode-aware and maybe also https://github.com/varabyte/kobweb?tab=readme-ov-file#style-variables

I think the way you're trying to force change the look and feel of widget colors isn't quite right?

[hpcreator]

I have read docs and I have tried to code as shown in the image below. Unfortunately it is not working as expected. It is showing the link's default blue color. val NavigationItemStyle = CssStyle {

base { Modifier.styleModifier { property("--bs-link-color", Theme.Secondary.rgb) }.color(Theme.Secondary.rgb) .transition(Transition.of(property = "color", duration = 200.ms)) } hover { Modifier.styleModifier { property("--bs-link-hover-color", Theme.Primary.rgb) }.color(Theme.Primary.rgb) } } Link( modifier = NavigationItemStyle.toModifier().padding(15.px).fontFamily(FONT_FAMILY) .fontSize(18.px).fontWeight( FontWeight.Normal ).textDecorationLine(TextDecorationLine.None), path = section.path, text = section.title ) It would be great if you can help me guide me if I am doing anything

wrong, It will be a great help for me. Thanks Harsh Patel

…

On Fri, 2 Aug 2024 at 10:16, David Herman ***@***.***> wrote: Please read https://github.com/varabyte/kobweb?tab=readme-ov-file#color-mode-aware and maybe also https://github.com/varabyte/kobweb?tab=readme-ov-file#style-variables I think the way you're trying to force change the look and feel of widget colors isn't quite right? — Reply to this email directly, view it on GitHub <#582 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMW5CYU3GPPKG366WBIJXF3ZPMFJRAVCNFSM6AAAAABL3X4GCWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMRRHEZTKNY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[bitspittle]

It's not 100% clear to me exactly what you want, but if all you want to do is change the color of the visited link, you should use an @InitSilk block:

@InitSilk
fun updateLinkVisitedColor(ctx: InitSilkContext) {
    ctx.theme.palettes.dark.link.visited = Colors.Pink
    ctx.theme.palettes.light.link.visited = Colors.DarkRed
}

[hpcreator]

Let me explain this to you.
I want to change default color of my links from blue to my primary color. also for visited links I do not want to change any color it will be as normal state only. And when I hover on that link then it should change its color to the specified one.

The code which I have shared to you is working fine previously but after updating kobweb version it is not working. If I downgrade version then my code shows deprication warnings.

[bitspittle]

So to be clear, you want visited and non visited to have the same color (say, cyan). And hover should change the same for both (say, orange)?

[hpcreator]

exactly, but Above code does not allowed me to do so. Guide me if I am doing anything wrong.

[bitspittle]

Try this:

@InitSilk
fun initLinkColors(ctx: InitSilkContext) {
    ctx.theme.palettes.light.link.default = Colors.Cyan
    ctx.theme.palettes.light.link.visited = Colors.Cyan
}

val OrangeHoverLinkVariant = LinkStyle.addVariant {
    hover {
        Modifier
            .setVariable(LinkVars.DefaultColor, Colors.Orange)
            .setVariable(LinkVars.VisitedColor, Colors.Orange)
    }
}

@Page
@Composable
fun LinkExamplePage() {
    Link("https://google.com", variant = OrangeHoverLinkVariant)
}

(and then of course replace it with your own colors)

[hpcreator]

Thanks for your guidance. I have found one workaround which works for me.

Closing this for further discussion.

[bitspittle]

You're welcome. Your question may hopefully help someone else in the future as well. I'm glad you are working now!