Skip to content

tuomashatakka/reduced-dark-ui

Repository files navigation

     

    

    

Please note that the custom view for the theme settings is deactivated until the Atom's 1.16 update.

    Reduced Dark UI

✂︎ - Reduced Dark UI theme - - - - cut here

minimal, highly customizable, plain yet usable & functional user interface theme for the atom.io. you do love it.

While this theme is currently under development and should be considered barely as a preview, it ships with a solid base at its current state. No major usage-blocking bugs should be expected. Contributions and raising issues are more than welcome - as well as any other feedback!

display

⏚ About

    atom.io/themes/reduced-dark-ui

Clean and dead simple, superior configuration schema with tons of loads of thoroughly thought settings to tweak and color to one's personal preference, and a nice guy as a developer 🙋 Hella lotta configuration options. Seriously, it is like candyland.

Feedback is great ly valuable and appreciated. Please do raise an issue if you have any problems.

∞ Key features

If you like configurability, I kindly advice you to check the Hue Shift syntax out too! It is basically a syntax theme generator with slider inputs to adjust hue, luminance, brightness, contrast, aberration and other properties for the application of syntax colors.

I actually surprised myself how f***ing awesome and usable it turned out to be!

  • UI Scaling and spacing Two handy sliders for scaling the UI scale with pin-point accuracy to match your preference
  • Apply your favorite colors Seven configurable colors:
    • Primary highlight color
    • Accent color
    • Background tint color
    • Color for success state highlights
    • Color for warning state highlights
    • Annotation color
    • Color for error state highlights
  • Custom settings view for the theme configuration. Maxed-out usability. Also, multi-column views for all configuration views & package cards!
  • Togglable-state(-of-the-art) panels with custom icons Each panel has an automatically applied icon that you may change to whichever icon you want with a handy icon picker modal.
  • Fixed tab bar & tab alignment. Window-wide tab bar - finally you can see 'em all at once. Tabs' alignment is also selectable: (center, left, right or stretch)
  • Fixed project root. Tree view's root folder fixed to the top of the tree view when scrolling down; handy for multi-root projects!
  • And so on... Make your voice matter: tell me what you want and I'll do it for you 🤗

☂ Screenshots

The following are actual footage from the theme. Screenshots may be a version or two old, so minor differences to the actual end-product may occur :( More screenshots may be found on the repository's assets/preview folder.


Core settings

Icon picker

Theme layout settings view

Tree view

Color configuration view

Package listing in settings

❁ Inspiration and thanks

This theme was inspired by the

  • Northem UI themes (especially the dark variant)
  • Material UI; and
  • Seti UI

themes.

Initially, the source for Northem Dark UI was used as a foundation for this project (with some heavy modifications though). So especially big thank you and a nod of deepest kind for the contributors of the Northem theme. You guys really made me inspired!

Thanks to all other fellow Atom package authors and contributors too involved, for making my Atom experience of a top-notch kind!

⏎ Motivation / epilogue

Atom needs more well written & throughoutly thought themes. Code editor running on webkit? Why aren't you making a package already?

Cross the boundaries, innovate, try new things. Do not fear to fall. Learn to fall the right way (what is the right way for you anyway) instead. Atom's stylesheet may be literally opened with two clicks, any time you want it. Try new things. Is a blocking modal a good idea if you need to provide some information that is available behind the modal? Probably not. Try new things. How about split view or similar? Sounds noice. Above all, remember: try new things!

If you get an idea, write it down. Testing happens naturally when you continue what you were doing in the first place 😃 If it works, congrats! You'll get my admiration and thumbs up. Convert it to a package or a theme and publish it. It's not as hard as it may sound if you've ever opened the infamous Atom Flight Manual. PS, ES6 just works - no need for coffee shit 😘

The key is that not an inch of screen estate should be wasted to something that does not provide usability or functionality, but that doesn't mean things could not be beautiful. Just try and do implement only the features that make sense, postpone the polishing until the end.

Copyright

Copyright (C) 2016-2017 Tuomas Copyright

Feel free to fork for creating a new theme, but please kindly mention this repo. See LICENSE.md for the regular boring license detail stuff.