[FR] UI Full Customization

[DeMoN100]

Description

Have premade themes as choice selection is tacky & dull to follow the typical motto. As an open source alternative people like to customize their own UI with workspaces so lets make it happen. Rewrite appearance to be a CSS selector so a person can select their own colors for the UI from a color picker or input by color code.

Impact

Makes people happy to have a nortion alternative where they can customize their own UI. I like mine black and red maybe you like yours terminal green theme or perhaps you like purple and yellow together.

Additional Context

Make it happen!

[annieappflowy]

cc: @a-wallen

[a-wallen]

Hi @DeMoN100 thanks for contributing to this issue! I'm working on adding customizable themes: https://github.com/AppFlowy-IO/AppFlowy/pull/2670 This is the MVP. Please message me on discord at a-wallen to provide suggestions. I look forward to working with you.

[DeMoN100]

Looks pretty interesting but I don't see any GUI for selecting colors. If theres an export import then thats cool but the themes should be easily creatable in a gui. It would also be nice if in appearance there was a text box so each individual can put in their own css for extra styling.

As for making a theme the GUI should have everything in a list with display of what it affects. You should be able to click on it then get a color picker like the example below.

With the options to save & export/import a person can style a theme import it. For easy sharing there could be a text box with the code ready to copy on click so you can just paste it to anyone. The import/export options should spit out .txt files with the theme's code including extra css options.

The main goal is to create a gui so non-coders can happily stylize their appflowy the way they like. The extra css text box that would appear in appearance settings would allow someone to tweak their style even further. For example with that someone could round icons, add gradients anywhere, customize every page a different color, add outer glow to text & more.

People will love it & it will be another + under the apps belt. I stick with apps that let you customize & more foss apps are going that direction to give the user one more thing they can control. I hope this will be accomplished in appflowy.

@a-wallen Thanks but I don't use discord I use Matrix for iming.

[a-wallen]

@DeMoN100 I think that those all sound like great ideas. We could really use all the feedback we can get before we land this. Could you keep in touch on this thread? I'll keep you updated when I make changes based on your feedback. Thank you so much, we value your opinion!

[DeMoN100]

@DeMoN100 I think that those all sound like great ideas. We could really use all the feedback we can get before we land this. Could you keep in touch on this thread? I'll keep you updated when I make changes based on your feedback. Thank you so much, we value your opinion!

Yes I will if you decide to check out matrix one day it would be cool if you could make a bridge to your discord support so users across matrix can get help too. You can find my room in my social links. https://chaotic.gg/@truedemon100 It's always the best to extend your reach!

I look forward to seeing more features & implementations into this app. Theres so much that needs to be done to get it up to par with notion but the foundation of the groundwork is by far going to blow them away.

So following this little concept picture I made.

Under appearance should be a small menu with one option "Classes" this menu would just be a quick list of all the css classes names so people can know what exactly they are trying to change when they mess with extra css options. Then we have at the top our import button where the user would import his .txt file to import the theme they would like to use. Underneath is the export bar which would display the code partially and by clicking this bar this would automatically copy to your clipboard for quick pasting wherever to easily share it & to the right of it an arrow with the drop down option to save as .txt for convenience.

Then comes our list of things we can change through the GUI which will be alphabetized with the text bar to allow us to type in our #FF0000 with our color selector to the right of it as a small circle. Use traditional naming such as background, tables, & etc aka naming them what they are going to actually change. I am not a fan of the primary. secondary, & accent style. Then towards the bottom is out Extra CSS Options where the user can input his own css code to expand on customizing their theme. That is where the user can do things such as round all icons, create animations for icons on a menu like on the left sidebar to make a page name shake when you hover your mouse over it.

This is the concept of course it's open to discuss changes to it just show a picture with it. You get the idea though with the list I didn't fill it with everything because I figured one was enough to show you okay this would repeat in this section. This would be the default that goes across appflowy.

But I would like to see on any page you could right click on the background & add a customize option which will let you mess with the appearance again only it will affect that one page & not your entire app flowy. It would even be better if we could add our own background picture to the type area of appflowy so the background could be different from the cover art photo. Does that give the user the capability to blind himself yeah but it would be their choice to add a background behind everything they type. i'm aware the right click will have to change to compare with notions MANY OPTIONS ON RIGHT CLICK but the gui options could probably be on top before the list begins with everything you can add in.

[DeMoN100]

I hope the idea is still being built into the app :D looking forward to tweaking appflowy to my own style.