search

nordtheme / atom-ui

An arctic, north-bluish clean and elegant minimal Atom UI theme.
https://www.nordtheme.com/ports/atom-ui
MIT License
95 stars 15 forks source link

Set font size for UI #50

Open leshek-pawlak opened 7 years ago

leshek-pawlak commented 7 years ago

Hi! First of all - this theme is great! I really love the design, transitions and colors.

But.. there is one thing which makes it quite cumbersome to use for me - font size. It's set to 14px. It's too big for me. To change the font size in the entire theme, I need to add some nasty css code to my atom stylesheet.

Is it possible to add font-size selection in the theme settings? This option is for example in the "one-dark-ui" theme.

Greetings!

arcticicestudio commented 7 years ago

Hi, nice to hear you like it 😄 Your request was also on my TODO list, only too busy with my job to create a issue for it yet, but I will definitely take a look at it this weekend as it shouldn't be too much effort to implement.

arcticicestudio commented 7 years ago

I implemented the new theme setting "UI Font Size". You can check out the feature/ghi-#50-theme-setting-font-size branch to test it and see if it fits your needs. I limited the range of the possible value that can be set from 8 to 20 to keep the theme clean and readable and to avoid accidentally oversized font which can only be changed by manually editing the config.cson file.

The current implementation does exactly what the name of the settings describes: I only changes the font size of the UI. Some other themes like "One Dark UI" are also scaling all UI components based on the font size value which is in my eyes not the way this setting should work. If you'd like to scale the UI or having problems with HIDPI the --force-device-scale-factor=<FLOATING_POINT_VALUE> (e.g.: --force-device-scale-factor=1.5) option of Atom is the correct way to go.

As far as I tested it works fine except the fact that there is a alignment issue of the theme selection drop-downs.

Feel free to post your review and/or improvement suggestions.

Screenshots (The blurry font in the textbox is related to my local HIDPI settings)

Default 14px

Custom 10px

arcticicestudio commented 7 years ago

It seems like there are edge cases where the default @font-size LESSCSS variable is not used for some of the UI elements like the "Open Config Folder" on the screenshots. As of the migration to the new Atom theme package API in versions >=1.13.0 I also recognized deformed UI components which may be related to the "hardcoded" px values 😐

Contrary to my statement above I'll maybe have to revisit this feature and refactor all selectors and rules that are related to the font size and implement it the way the official One Dark UI theme is designed by using multiplier to also scale/resize elements to avoid unexpected size behaviours.

bencardoen commented 7 years ago

Thanks for implementing this, works great for me.

we3geeks commented 7 years ago

Would love to see this change merged and released. (Or perhaps I'm just not seeing it for some reason?)

russoue commented 7 years ago

Is there any ETA to merge and release it?

gamblebkb commented 7 years ago

These seem related so I'll post it here. Changing font family in stylesheet(styles.less) doesn't work for this theme. I've tried also with default ones and it works. Thanks!