search

AppFlowy-IO / AppFlowy

Bring projects, wikis, and teams together with AI. AppFlowy is an AI collaborative workspace where you achieve more without losing control of your data. The best open source alternative to Notion.
https://www.appflowy.io
GNU Affero General Public License v3.0
56.59k stars 3.69k forks source link

[FR] Consistent color scheme #4919

Open Xazin opened 6 months ago

Xazin commented 6 months ago

Description

Our current color and theme implementation for AppFlowy colors is, a bit messy in the code.

For example we have things such as darkShader1 ... 7. It would be much more easy to navigate in the future, especially for custom themes, if our color palette got completed with meaningful associations.

The current ColorScheme in the Material Theme that we do use, although somewhat arbitrarily, does contain somewhat good naming conventions.

We mix usage of Theme.of(context).colorScheme.someColor with AFThemeExtension.of(context).someColor due to not having properly mapped our colors and their usage to the Material Color Scheme.

Although we might need some form of "AFTheme" despite being able to completely remove reliance on AFThemeExetension, it would primarily be related to parsing custom themes.

Having this clearly defined in Figma and our Documentation (Where to use which colors, how they are used, their meaning, etcetera.) will be really helpful in the future.

When we see "new" or "unknown" color codes in designs, we shouldn't "try to fit that color in somewhere in our theming", we should question the usage of said color and try to see if we don't already have an existing fitting color. Otherwise our color repository will keep increasing and become too cluttered.

Impact

Additional Context

This is the way custom themes look when building them, I would have simply no clue, and would have through trial and error find out where which option is used, and it honestly makes no sense.

Expand to see example theme file ``` { "surface": "0xFFFFFFFF", "hover": "0xFFe0f8ff", "selector": "0xfff2fcff", "red": "0xfffb006d", "yellow": "0xffffd667", "green": "0xff66cf80", "shader1": "0xff333333", "shader2": "0xff4f4f4f", "shader3": "0xff828282", "shader4": "0xffbdbdbd", "shader5": "0xffe0e0e0", "shader6": "0xfff2f2f2", "shader7": "0xff333333", "bg1": "0xfff7f8fc", "bg2": "0xffedeef2", "bg3": "0xffe2e4eb", "bg4": "0xff2c144b", "tint1": "0xffe8e0ff", "tint2": "0xffffe7fd", "tint3": "0xffffe7ee", "tint4": "0xffffefe3", "tint5": "0xfffff2cd", "tint6": "0xfff5ffdc", "tint7": "0xffddffd6", "tint8": "0xffdefff1", "tint9": "0xffe1fbff", "main1": "0xff00bcf0", "main2": "0xff00b7ea", "shadow": "0x26000000", "sidebarBg": "0xfff7f8fc", "divider": "0xfff2f2f2", "topbarBg": "0xFFFFFFFF", "icon": "0xff333333", "text": "0xff333333", "input": "0xFFFFFFFF", "hint": "0xff828282", "primary": "0xff00bcf0", "onPrimary": "0xFFFFFFFF", "hoverBG1": "0xffedeef2", "hoverBG2": "0xFFe0f8ff", "hoverBG3": "0xfff2f2f2", "hoverFG": "0xff333333", "questionBubbleBG": "0xfff2fcff", "progressBarBGColor": "0xffe1fbff", "toolbarColor": "0xff333333", "toggleButtonBGColor": "0xffe0e0e0", "calendarWeekendBGColor": "0xFFFBFBFC", "gridRowCountColor" : "0xff333333" } ```

Note: I'm even sure that some of the colors aren't being used, or is only used in very few places, where another color that is used a lot could easily replace it.

emmggi commented 6 months ago

I tried making a theme of my own but was confused with tintX, bgX and shaderX properties. Trial and error is very time consuming.

Knowing what each color represents will definitely help people contribute to custom themes. If one could get a picture like this to show what part of the UI each property controls, that would make it even easier.

https://flutter.github.io/assets-for-api-docs/assets/material/app_bar.png