Old Design

[zzhanabek]

Please, allow using old version of design. The New Design has bright toxic colours, text is not comfortable to read

[petrovicstefanrs]

Please, allow using old version of design. The New Design has bright toxic colours, text is not comfortable to read

Hey, you should be able to adjust the theme the way you like it by going to the Settings page, or through the extension Popup.

Just change the UI Theme and Highlighter theme to whatever fits your preference. Unfortunately, it is impossible to revert to the old version without building it yourself from a previous commit. Also the v2 has a lot more snippets so do give it a try.

If none of these themes are to your liking, I will release the v1 colors as a legacy theme in the next version. But it might be a few days to a week before it's released since the review process on extension websites tends to be slow.

[zzhanabek]

Hi! Thank you for your response. IMHO, all presented colour schemes are too bright. Can you add old colour scheme? What about text: the text is too small, I suggest to increase font size and add more space between lines

[petrovicstefanrs]

Ahh damn, okay. I've been told this earlier. I do tend to make things smaller as it looks better to me. For now you can press CMD & + at the same time or on windows ctrl & + to zoom it in to your liking but I'll update it in the next version to either be bigger or allow different sizes of fonts. Also legacy themes are done, and will be released but as I said, it takes a while for reviews to pass through and I need to wait for stores to approve v2 first.

Additionally, you can play around with colors as you like in developer console, and then submit a request for a theme with colors that you would like. I can't add new highlighter themes though, only the rest of the UI

// primary for bg elements
// secondary for text elements
// accent is the one that probably bothers you in existing themes
{
  primary: #
  primary_light: #
  secondary: #
  secondary_light: #
  accent: #
}

[petrovicstefanrs]

@zzhanabek Curious, do you remember which size of the font you used in v1? I assume you enlarged it at some point since the default for both v1 and v2 are the same

[zzhanabek]

@petrovicstefanrs hi! No, unfortunately

[zzhanabek]

What do you think about this?

p {
  max-width: 80ch; // https://medium.com/uiuxrivel/typography-in-user-interface-design-211b5b1cbf36
  text-wrap: auto;
  font-size: large; // works with custom page zoom very well
  line-height: 1.5;
  text-align: justify;
}

[petrovicstefanrs]

What do you mean by this? font-size: large; // works with custom page zoom very well

I would make font size changes with the base being 100% page zoom and base font size being 12px.

I'm also reconsidering the value of giving multiple options to change font size since it's so easy to do it through browser with ctrl +

[zzhanabek]

What do you mean by this?

Not everyone has the same zoom and resolution. Absolute units such as pixels will show content differently on different setups. So I suggest to leave sizing on browser.

[petrovicstefanrs]

@zzhanabek When developing, I'm working without making any assumptions about the user's setup. That's why I'm leaning towards just not adding any options to change font sizes. For example, font-size on this github issues page is 14px (absolute units), which is the same as the font-size on my extension (though the font family is different) so if the size here is fine for you there shouldn't be any difference between the two. I will just leave the size up to the user to handle in-browser by using the built-in zoom feature of every browser.

I will close this issue as the legacy themes are handled in this PR: https://github.com/petrovicstefanrs/30_seconds_of_knowledge/pull/141

If you end up deciding on some colors you'd like to see in the extension, I will add it as a new theme. Just open a new issue in this format:

.theme_name {
  --primary: #;
  --primary_highlight: #;
  --secondary: #;
  --secondary_highlight: #;
  --accent: #;
  --accent_text: #;
  --fallback_code_bg: #;
  --logo_color: #;
}