Atom UI Personalization Plugin - Wallpapers, Background art, Syntax Color Scheme Editor


#1

Edited to remove less than professional content

I’ve been working on a plugin to add background changing / switching to atom. basically I’ve built a replacement for the Atom menu with jquery / superfish that allows for custom skinning of the menubar + a syntax color scheme builder / changer and what seems to be the most innovative feature (in that i haven’t seen it done) - background / wallpapers behind the code.

git repo for the package(s) if you want to try em out or provide feedback / code, just clone & apm install:


The UI / Syntax color changer itself:

  • examples of effects:

(feels like i missed some of my favorite color themes in screenshots ;/ rest assured with a creative eye you can do better, the catalog / changer should be a big help here.)

there’s a lot more i want to do with it and it’s still falling a little short of release quality IMO (so that’s why there’s no package on atom.io yet) but a few more hours of work should have that squared away (I plan on adding a wallpaper catalog + categorized as my initial goal was changing backgrounds…) - I’m working on a lot of stuff with atom/related tech and i get easily distracted and hyperactive, so i really appreciate any help, especially aimed at getting this package finished / up and rolling for everybody. though if the demand is there i’m sure i could get it done a lil quicker…

on the technical side: this package uses less.js & colorthief for color mixing, prior to generating the output less/css (which is quite sloppily applied ATM - something i intend to fix), when an image is initially loaded the colors are extracted from the image with colorthief and then a few basic rotations and hue/lightness adjustments are done to try and guess which colors will look best for syntax over the image. i’m pretty sure this could be further improved with existing code, as well as moving that process / preloading of the images into a separate task / worker.

i’m working on quite a few more packages for atom, if anybody is interested in helping out or testing those in the more ‘private beta’ stage, holla at me - could like really use another hand on some things, anybody down for dev talk sounds cool.

also:
sidenote - just published this calculator package today, some webdevs may find it useful…

greets guys,

  • gstack

#2

PS – the default BG repo as of right now is a little on the sketchy / NSFW side for most people, while interesting if you want to use the plugin with some more safe backgrounds, change the repo in lib/bg.js - this one i believe is mostly pictures of space / landscapes: https://github.com/gstack/bars-backgrounds/blob/master/bgs.txt

look forward to feedback from you guys! comments / questions / concerns welcomed.


#3

While I appreciate wanting to showcase your package, let’s keep the content posted to Discuss professional …


#4

check out editor-background plugin


#5

how can I do the apm instalation? I’m a new baby. No idea how to do it :disappointed_relieved: I already cloned the documents


#6

You don’t need to clone the repos unless you’re editing the code. You can just install the packages through the Settings -> Install view or through the command line with apm install apex-ui-personalize and apm install apex-superfish-menu.

If you want to edit the code to make improvements, you can add the repo to Atom no matter where it is on your computer by navigating to its folder in the command line and typing apm install (which installs any dependencies) and then apm link (which creates a symlink in .atom/packages to the code folder).