Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix color scheme. #233

Merged
merged 5 commits into from Aug 31, 2023
Merged

Fix color scheme. #233

merged 5 commits into from Aug 31, 2023

Conversation

extSunset
Copy link
Contributor

@extSunset extSunset commented Aug 29, 2023

Aimed at improving the colour scheme, particularly for the light theme which was suffering from excessive brightness. I'm really looking forward to the comments on this. I am not a designer, and this is my attempt to improve the condition of the light theme in some way.

Should fix #216 and #214.

@extSunset extSunset changed the title Docker-compose generator: Fix color scheme. Fix color scheme. Aug 29, 2023
@netlify
Copy link

netlify bot commented Aug 29, 2023

Deploy Preview for cosmic-selkie-827ba7 ready!

Name Link
🔨 Latest commit 816ea71
🔍 Latest deploy log https://app.netlify.com/sites/cosmic-selkie-827ba7/deploys/64f07880dbe59b0008e2f81a
😎 Deploy Preview https://deploy-preview-233--cosmic-selkie-827ba7.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@extSunset
Copy link
Contributor Author

A silly mistake, though.

@extSunset extSunset force-pushed the fix-color-scheme branch 2 times, most recently from 3ff1d63 to be0260b Compare August 29, 2023 16:53
@extSunset
Copy link
Contributor Author

Infirma -> Infima...

The colours have been changed for softer ones. The commit covers most of the main Infirma colours for the light theme and separately code blocks. The colours of the titles in the footer have also been fixed (they were white in the light theme, making them invisible). Makes text in codeblocks `--ifm-color-primary-darker`.
Copy link
Contributor

@EmilFattakhov EmilFattakhov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a great improvement @extSunset, the light mode is no longer blinding 👓!

The only thing that stood out to me was the code-blocks on the light scheme. What do you think about wrapping them in a darker border, or slightly adjusting the background color?
For comparison, code blocks stand out in a dark mode, but not in a light mode
Screen Shot 2023-08-30 at 10 04 05 AM
Screen Shot 2023-08-30 at 10 04 16 AM

@extSunset
Copy link
Contributor Author

@EmilFattakhov I'll try playing around with different options. It might be worth adding a shadow to the block.

Added shadows to code blocks, menu details, and alert blocks. The main goal was to improve the visibility of code blocks in the light theme. Shadows were added to the other elements to maintain a unified style. Shadows were added to the dark theme for the same reason, also the lack of shadows in the dark theme caused blocks to distort when switching themes.
… variables.

The footer colour has been changed to a darker colour, similar to the original light theme. Shadow colour for code blocks in the light theme was made dependent on CSS variables.
Copy link
Contributor

@EmilFattakhov EmilFattakhov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM @extSunset, thank you for acting on the suggestions!

@EmilFattakhov EmilFattakhov merged commit 23cf84e into subspace:main Aug 31, 2023
1 check passed
@extSunset extSunset deleted the fix-color-scheme branch September 1, 2023 16:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Infirma color variables mismatch
2 participants