[GH-ISSUE #4919] [FR] Consistent color scheme #2188

New issue

Closed

opened 2026-03-23 21:20:27 +00:00 by mirror · 1 comment

mirror commented

2026-03-23 21:20:27 +00:00

Owner

Originally created by @Xazin on GitHub (Mar 15, 2024).
Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/4919

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

Much easier to implement new and maintain current UI
Easier to build custom themes

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.

Originally created by @Xazin on GitHub (Mar 15, 2024). Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/4919 ### 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 - Much easier to implement new and maintain current UI - Easier to build custom themes ### 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. <details> <description>Expand to see example theme file</description> ``` { "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" } ``` </details> __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.__

mirror

2026-03-23 21:20:27 +00:00

closed this issue
added the
look and joy

themes

documentation

improvements

2024
labels

mirror commented

2026-03-23 21:20:28 +00:00

Author

Owner

@emmggi commented on GitHub (Mar 16, 2024):

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

@emmggi commented on GitHub (Mar 16, 2024): 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

mirror referenced this issue

2026-03-23 22:17:25 +00:00

[PR #2188] [CLOSED] Feat : Add Language Selector on Welcome Screen #5142