[FR] Darkmode about appflowy

[notd5a-alt]

Ok, im going to try to work on this feature for you guys.

[mrtolkien]

To start maybe using an open color scheme like Solarized, Monokai, or Dracula would be simpler?

This way there would be no need to reinvent the wheel and users of those themes will feel right at home.

[annieappflowy]

To start maybe using an open color scheme like Solarized, Monokai, or Dracula would be simpler?

This way there would be no need to reinvent the wheel and users of those themes will feel right at home.

second to your point that using something ppl are familiar with makes ppl feel right at home :D

[rileyhawk1417]

Well I think it would be nice to have custom themes, but for now maybe focusing on Light and Dark theme switches would be a starting point.

[kiralabs]

A Dark/Light toggle would be nice, but honestly, most people just stick to one 'theme', so even if it was a config file that people can replace by dropping in another and even just a 'Theme Picker' to select a config file, that would be cool :)

Would also be very good in adoption of AppFlowy for people who enjoy ricing all of their programs/utilities like the folks on r/unixporn

[annieappflowy]

option 2
I'd even prefer the grey color used for the left panel as the color for the main editor.
This is Obsidian's dark mode - I think it's pretty eye-pleasing

[branhillsdesign]

Dark mode options

Please note that these color schemes are not fully realized and accessibility testing will need to be performed

Option 01 Based on the secondary purple brand color

Option 2 based on greys with no tint

Option 2 based on blue main brand color

Current Light Mode theme

Strawpoll Link

https://strawpoll.com/hfarq36rc

[branhillsdesign]

@mrtolkien I looked at various color themes that are popular for IDE's, but unfortunately, almost none of them are WCAG compliant. Which is unfortunate, because some of them are real slick. They also don't cover the majority of use cases an application will have, especially one that uses colors for organization like Appflowy has planned.

---

With that being said, @annieappflowy has had the entire MVP already designed prior to coming on to the project, so I wanted to essentially expand on the colors that are in-use for the designs already and then double check for accessibility compliance. I did really enjoy Obsidian's dark mode @annieappflowy, and part of that is in this dark mode.

---

I want to change the names on each of the color variables so that any developer that does want to make a theme for the app in the future will know what each color is used for (This is also why there's duplicate colors, but with different names), or when developing widgets in general, there won't be any guessing on what color goes where. That way the devs can focus on what's important and don't have to think about UI.

Feel free to comment or make any suggestions on things.

I also don't know much about dart or flutter, so I could use some help implementing the color themes in the code if someone wants to take the reigns on that.

[SleepDaemon]

I agree, dark mode is more eye comforting. My eyes are very sensitive to bright lights and just using the app burns into my retinas. Having dark mode would make it more comfortable to use and allowing longer work time.

[MostHated]

Yeah, I will keep an eye on this thread, because even with my monitor's brightness down, it's just too bright for me to try and use for any extended period of time.

[alilosoft]

@annieappflowy @appflowy Are you currently using a custom theme for the material app or just the default?
I'm just getting started with Flutter but I may work on this issue if I get some guidance 💙

[notd5a-alt]

If anyone isnt working on this is can probably add this feature. Just need to know what the devs / people may want in terms of accent colors.
Also any recommendations for the positioning / placement of the dark mode switch would be appreciated.

[rileyhawk1417]

@notd5a-alt any progress?
For now am trying to make sure everything matches like font and other backgrounds.

[notd5a-alt]

Hi, ive been extremely busy and i actually forgot i was working on this xD. I dont have the time rn, maybe someone else can / is working on it. I was also thinking it might be best to implement dark modes and theming after the extension system comes online. Then it should become easier to make themes and have custom user made themes. Something like Typoras system? But more refined and user friendly.

[rileyhawk1417]

Well I am currently working on it was also wondering if anyone else had given it a shot

[branhillsdesign]

I grabbed the colors from the theme files and working on what dark mode will look like in figma. I’ll have updates with some options this evening to show with color codes that correspond to already existing color tokens.

[SleepDaemon]

Option 2

…

On Mon, Dec 13, 2021 at 6:04 AM Brandon Hills ***@***.***> wrote: Dark mode options *Please note that these color schemes are not fully realized and accessibility testing will need to be performed* Option 01 Based on the secondary purple brand color [image: Dark Mode Color Theme] <https://user-images.githubusercontent.com/51428934/145745507-5e3412c8-0e68-4ce3-b0fb-26da44ae35a5.png> Option 2 based on greys with no tint [image: Dark Mode Color Theme-1] <https://user-images.githubusercontent.com/51428934/145745509-5444d0c1-5f05-4315-a1d4-e39394ea28bc.png> Option 2 based on blue main brand color [image: Dark Mode Color Theme-2] <https://user-images.githubusercontent.com/51428934/145745940-af3dab87-6feb-443c-b2f7-2c30402c6b91.png> Current Light Mode theme [image: Light Mode Color Theme] <https://user-images.githubusercontent.com/51428934/145745513-bfbf1803-d7aa-4054-8452-6e1e46745ac4.png> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#31 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AVDOXQM53GX56MGSIWTMZS3UQVPE5ANCNFSM5IKW4E3Q> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[rileyhawk1417]

Option 2 seems mellowed out and relaxed

[MostHated]

2 - with no tint

[rileyhawk1417]

@mrtolkien I looked at various color themes that are popular for IDE's, but unfortunately, almost none of them are WCAG compliant. Which is unfortunate, because some of them are real slick. They also don't cover the majority of use cases an application will have, especially one that uses colors for organization like Appflowy has planned.

With that being said, @annieappflowy has had the entire MVP already designed prior to coming on to the project, so I wanted to essentially expand on the colors that are in-use for the designs already and then double check for accessibility compliance. I did really enjoy Obsidian's dark mode @annieappflowy, and part of that is in this dark mode.

I want to change the names on each of the color variables so that any developer that does want to make a theme for the app in the future will know what each color is used for (This is also why there's duplicate colors, but with different names), or when developing widgets in general, there won't be any guessing on what color goes where. That way the devs can focus on what's important and don't have to think about UI.

Feel free to comment or make any suggestions on things.

I also don't know much about dart or flutter, so I could use some help implementing the color themes in the code if someone wants to take the reigns on that.

I hear you right now am trying to implement the dark mode feature, so i can have a starting point. The thing am struggling with is having the text color automatically change with the theme. For example when its dark mode the text is white. When its light mode the text is still white making it not visible since the app theme is light mode.

[Aditya1402]

Hi there! This is my first time contributing to Open Source projects.

Can you guide me about how I can contribute towards this good-first-issue? @annieappflowy

[hieugao]

Hi @Aditya1402, I open a related PR at #259, so in case if you want to contribute some then check it out, ᵖˡᵉᵃˢᵉᵎ 😄. I'll add some tasks inside the PR soon.

[polypixeldev]

@annieappflowy I think that this issue should be closed, as from what I can see Darkmode has already been implemented.