Fix#2373

[arcturus140]

Description

This pull request provides additional styling for code elements.

before

after

Disclaimer:

Due to the many variations in monitors and browsers, color samples may appear different on different monitors.

Issue fixed

This PR automatically closes #2373 .

Type of changes

• 🔵 Bugfix

[ZeroX-DG]

I'll test this when I get home

[ZeroX-DG]

@arcturus140 Looks cool, the CSS works but it doesn't get loaded for users who already have setting....how can we fix this issue?

[arcturus140]

@ZeroX-DG hm, let me think about it.

If I add it hard coded I am not sure if the user can override it with custom CSS. I'll try this first.

Otherwise maybe add a reset button to override the current custom CSS, like in Boost Note.

[ZeroX-DG]

Maybe just leave it like that, if old user want to update their custom CSS, we can told them to paste these CSS in themselves? @Flexo013 do you have any idea on this?

[arcturus140]

@ZeroX-DG issue 2373 is considered a bug, therefore the user most likely wants to have this change applied and this PR should be a bugfix.

I'll make some changes, maybe even by applying some CSS to default and other to custom CSS.

Not sure if I work on this this weekend. Do you think default look should be more decent or can it stay as is?

[arcturus140]

how can I change this into WIP?

[arcturus140]

@ZeroX-DG do you know where settings are stored on linux when using yarn run dev?

I know the packaged install is in .config/ but not the developer instance.

[arcturus140]

the CSS styling is now in the code. Additionally, a sample has been added to the custom CSS so the user can simply make the modifications to his liking. 👍

ok, I think that's it, I'm done! 😸

[ZeroX-DG]

Very cool, I think the users can still override your css using !important if they want to. Thank you 👍

[Rokt33r]

@arcturus140 Some people might not like this change. What should we do if people don't like this coloring?

[ZeroX-DG]

@Rokt33r they can simply override it using the custom CSS feature.

Before:

After:

CSS

[data-theme="default"] p code,
[data-theme="default"] li code
{
  background-color: black;
  border-color: #d9d9d9;
  color: red;
}

[Rokt33r]

Hmm... I see. But I still want to see more feedback before I merge this.

[arcturus140]

@Rokt33r Additionally, an example is provided in the custom CSS text field in preferences so the user knows which elements to apply styling on. One can remove the border, the rounded edges, or add additional styling ...

Of course we can also default to anything we want so feedback is much appreciated 😺

[ZeroX-DG]

@arcturus140 can you resolve the conflict please?

[ZeroX-DG]

@arcturus140 PING

[Rokt33r]

@ZeroX-DG @arcturus140 I'll deal with this and merge it in this weekend. So you don't need to fix conflicts.

[Rokt33r]

The issue is about the style in dark themes. So I'm going to choose more neutral colors.

[arcturus140]

@Rokt33r looks great, I like it.