mikaa123 / linear

Ruler app with web-development in mind
http://mikaa123.github.io/linear-website/
MIT License
262 stars 21 forks source link

Custom theme CSS #19

Closed mikaa123 closed 8 years ago

mikaa123 commented 8 years ago

We've all got different needs and screens, and since this tool is for web developers, we should let web developers hack the themes to their convenience.

radiovisual commented 8 years ago

@mikaa123's thoughts from issue #15 :

I like the idea of the tooltip over the theme button. By the way, I'm not too fond of that theme button...

For the styles, we could load them directly from .linear/themes. For every .css file there, an entry is added to the tooltip. By default there could be the 3 files you talked about. They can then add the custom light/dark.css to the folder for overrides.

What do you think? Do you have another perspective/idea?

I like the idea of the separate CSS files in .linear/themes, because then developers can easily share themes with each other. If we were to embed the styles into the .linear file, then it could open up the possibility of corrupting/bloating the config file, and make it harder to share styles. I like the pure CSS approach.

radiovisual commented 8 years ago

As for the theme button, I think we can find a nice icon in the font-awesome collection you are pulling in.

radiovisual commented 8 years ago

There should be a nice way to build the themes. I propose a cool little "Theme Builder" React Component. So the "theme" menu tooltip will feel something like this:

and if you click on the "Edit Themes" option you get a window with a Simple Theme Editor in it, which lets you create new themes, or edit existing ones. This Theme Builder Component will give the user a live preview of the changes they are making.

Additionally, people can drop their own CSS files directly into the .linear/themes folder to make those themes available to them.

This gives the users two different ways to add Custom Themes.

What do you think?

mikaa123 commented 8 years ago

That would indeed be really cool. If it's not too hard/long to do and doesn't add too much complexity, then great! Otherwise, we could always just let people past their files. :)

I think we should start by the .linear/themes folder, then see if we want to go the extra mile.

radiovisual commented 8 years ago

Ok, so I have submitted a PR #25 that adds this functionality. You can add any css file you want to the .linear/themes directory, and linear will automatically load them in. You can assign the default you like the best (in the settings), and/or assign different themes to individual rulers with the new theme selection menu . Go check it out and let me know your thoughts!