[Feature Request] Stronger adaptability mode than "Aggressive"

[PinkSerenity]

Hii,

I find the "Aggressive" mode still too weak for my tastes. Is there an easy way to do even stronger theming? If not, can "Hyper-aggressive" please be a mode?

Thank you very much.

[EmrecanKaracayir]

Version 3 is released as preview to the marketplace, there are many new features starting with code color customizations, adaptation mode changes and many enhancements. Your request was already implemented about a month ago 😆.

Custom adaptation intensity

To achieve it, download preview and start configuring. When asked about adaptation intensity, select custom and enter a number between 0 to 100 (percent).

Many more

Also this is a preview and some of the new features are in user settings under Extensions/Codemos Modern, try them and let me know what you think.

[PinkSerenity]

To achieve it, download preview and start configuring. When asked about adaptation intensity, select custom and enter a number between 0 to 100 (percent).

I just tried it, but 100% is still too weak for my tastes. Keep in mind that my previous theme looked like this:

In Windows Terminal I am using a color with an HSV value of (320°, 16%, 99%), which has twice the saturation of the old Aggressive. So if you'd allow us to go over the 100%, that would be great.

[EmrecanKaracayir]

Can you share your configuration (codemosModern.* configurations under user settings) So I can better understand what is happening?

[EmrecanKaracayir]

This new adaptation algorithm is scientifically blending two colors (backdrop and source), based on the source alpha (opacity) value, which can only be in between 0 to 1, this is why I ask for a percentage.

Because of the nature of colors blending, bright colors (sources) on bright surfaces (backdrops) blend better similar to that of dark colors on dark surfaces blend better. In your example, dimmer color (your backdrop) trying to blend with a brighter color (source or UI) resulting with low saturation.

Here you can see an estimation of blend results based on different sources and backdrops

Bright source on bright backdrop

I can't really change how physics works. But if you have an idea, feel free to contribute.

[PinkSerenity]

Can you share your configuration (codemosModern.* configurations under user settings) So I can better understand what is happening?

Sure:

{
    "codemosModern.light.design": "flat",
    "codemosModern.light.accentColor": "#AC0074",
    "codemosModern.light.adaptationColor": "#AC0074",
    "codemosModern.light.adaptationIntensity": 100,

    "codemosModern.dark.design": "flat",
    "codemosModern.dark.accentColor": "#ED63BA",
    "codemosModern.dark.adaptationColor": "#ED63BA",
    "codemosModern.dark.adaptationIntensity": 100,

    "window.autoDetectColorScheme": true,
}

This new adaptation algorithm is scientifically blending two colors (backdrop and source), based on the source alpha (opacity) value, which can only be in between 0 to 1, this is why I ask for a percentage.

Because of the nature of colors blending, bright colors (sources) on bright surfaces (backdrops) blend better and dark colors on dark surfaces blend better. In your example, dimmer color (your backdrop) trying to blend with a brighter color (source or UI) resulting with low saturation.

I see. I think. How exactly does it blend them? If the adaption color is the backdrop, why does a higher source opacity equal stronger adaption? That's the part I unfortunately don't understand yet. If the source gets drawn over the backdrop, I'd assume (with my limited knowledge) that 0% is full backdrop and 100% is full source. But the algorithm seems to be more complex then that.

If you don't have time or leisure explaining that, I completely understand. Please don't feel pressured.

[EmrecanKaracayir]

How exactly does it blend them?

I am using the Luminosity blend mode. Here comes the not so scientific explanation, In essence, the source color's brightness adjusts the backdrop color's lightness, while the backdrop retains its original hue and saturation.

When you use a light source color, like light gray, on a light backdrop color, such as yellow, the resulting blend maintains the yellow's hue and saturation because their brightness levels are similar. This means the yellow retains its vividness and looks much like the original color.

However, when you use the same light source color on a darker backdrop, like blue, the blend results in a color with the same blue hue but significantly altered brightness. This change can make the blue appear less saturated and vibrant because the contrast between the light source and dark backdrop affects the overall luminosity. Essentially, matching brightness levels helps preserve color saturation, while mismatched levels can lead to more drastic changes in appearance.

Example

As you can see yellow pretty much stays at yellow but blue changes drastically.

If the adaption color is the backdrop, why does a higher source opacity equal stronger adaption?

It is reversed when calculating, so 100 means 0 percent of the source. But this only plays a role in the final hue calculation.

But the algorithm seems to be more complex then that

The previous screenshot I posted which was the yellow theme actually showcases the algorithm, not so complex. In fact, it was a lot simpler than the previous algorithm. I internally call adaptable surfaces "mimics" so getMimicHex7() is the algorithm achieving this effect. If you want, you can examine the method here.

Btw. feel free to come up with new ideas even they are not fully implemented, we can work it out.

A definite solution I can think of is that changing the brightness of the source color. Currently, they are fixed in Modern, but feel free to change them in variants in source/modern/light/<variant>.ts it is the platte.base property.

[EmrecanKaracayir]

This is the result of changing palette.base in light/modern.ts from #F9F9F9 to #CCCCCC:

Here is the light/natural.ts with palette.base set to #AAAAAA:

We can maybe make base color customizable but I am not able to predict the outcome of that change's effects on the broader scope.

[PinkSerenity]

Hii. Sorry that I haven't responsed yesterday, I had a lot on my mind. But I kinda kept experimenting and got good results with applying alpha on the backdrop and using mix-blend-mode: soft-light;. This is how it would look like:

The order is 5%, 10%, 20%, 35% and 50%.

Here the same with the default Yellow (both light and dark values):

I will keep experimenting though.

[EmrecanKaracayir]

Interesting findings. The reason I chose Luminosity blend is that I had to control the brightness of the overall UI elements for accessibility reasons. For the light theme, In worst case scenario (backdrop is black), black text must be legible on the resulting mimic layer (adapted color). Please experiment with worst case scenarios and see how soft-light blend mode handles these cases.

Also if you are interested, this is the official wcag documents on the algorithms used to achieve blend modes.

[PinkSerenity]

For the record, here are some more examples with lower numbers:

Please experiment with worst case scenarios and see how soft-light blend mode handles these cases.

Alrighty, I'll do that.

[PinkSerenity]

I'd say until 50% it's at least readable, even if it's not pleasant. You can display it multiplied by 10, so that 10% becomes 100%, say that everything above 100% is unsupported and entering values above 500% is impossible (but still possible in the settings.json for the people who are truly crazy).

[EmrecanKaracayir]

Okay, I did a half-baked implementation in the new branch. I changed intensity to inversely mix source and resulting blend. You can browse the changes in the commit 6f175d12efab5ea71859183524b2b10c872a808d.

Here is the vsix package of the experimental version

codemos-modern-3.0.0rc1.exp.vsix.zip

It needs a lot of testing on my side to decide if it can replace the current method. Also, accessibility is my number one concern.

[PinkSerenity]

It needs a lot of testing on my side to decide if it can replace the current method. Also, accessibility is my number one concern.

Of course. I'm still experimenting and trying to keep some of the brightness control by implementing mutliple backdrops somehow. I have no idea how it will turn out, but I'm hooked. But thank you really much for actually considering this.

[PinkSerenity]

Here is the vsix package of the experimental version

codemos-modern-3.0.0rc1.exp.vsix.zip

I really like it, but I would hide the stronger settings from normal access. Accessibility is good, and people shouldn't stumble upon a way to make their editor unreadable.

I will keeping looking for an alternative way that keeps brightness at a readable level at all values.

[PinkSerenity]

I can't believe I was making it so complicated all the time.

.backdrop.bright {
	background-color: hsl(from #AC0074 h s max(20, l) / var(--alpha));
}

.backdrop.dark {
	background-color: hsl(from #ED63BA h s min(80, l) / var(--alpha));
}

It looks like this: Adaption color: Pink (Light / Dark variant)

Adaption color: Yellow (Light / Dark variant)

Adaption color: Black, White

You can set the max and min to any value you like. I think 20 and 80 is still a bit low, the text is barely readable in the 100% one. Maybe 30 and 70?

Edit: I'm actually very happy with a lightness limit of 50 (min for light theme, max for dark theme). It's very readable at all levels, but still vibrant.