[GH-ISSUE #31 ] [FR] Darkmode #14

Author

Owner

@notd5a-alt commented on GitHub (Nov 21, 2021):

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.

@notd5a-alt commented on GitHub (Nov 21, 2021): 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.

mirror commented

Author

Owner

@rileyhawk1417 commented on GitHub (Nov 22, 2021):

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.

@rileyhawk1417 commented on GitHub (Nov 22, 2021): 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.

mirror commented

Author

Owner

@kiralabs commented on GitHub (Nov 23, 2021):

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

@kiralabs commented on GitHub (Nov 23, 2021): 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

mirror commented

Author

Owner

@notd5a-alt commented on GitHub (Nov 23, 2021):

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

@notd5a-alt commented on GitHub (Nov 23, 2021): Ok, im going to try to work on this feature for you guys.

mirror commented

Author

Owner

@rileyhawk1417 commented on GitHub (Dec 9, 2021):

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

@rileyhawk1417 commented on GitHub (Dec 9, 2021): @notd5a-alt any progress? For now am trying to make sure everything matches like font and other backgrounds.

mirror commented

Author

Owner

@notd5a-alt commented on GitHub (Dec 9, 2021):

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.

@notd5a-alt commented on GitHub (Dec 9, 2021): 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.

mirror commented

Author

Owner

@rileyhawk1417 commented on GitHub (Dec 10, 2021):

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

@rileyhawk1417 commented on GitHub (Dec 10, 2021): Well I am currently working on it was also wondering if anyone else had given it a shot

mirror commented

Author

Owner

@branhillsdesign commented on GitHub (Dec 13, 2021):

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.

@branhillsdesign commented on GitHub (Dec 13, 2021): 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.

mirror commented

https://strawpoll.com/hfarq36rc

Author

Owner

@branhillsdesign commented on GitHub (Dec 13, 2021):

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

@branhillsdesign commented on GitHub (Dec 13, 2021): ### 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 <img width="1105" alt="Dark Mode Color Theme" src="https://user-images.githubusercontent.com/51428934/145745507-5e3412c8-0e68-4ce3-b0fb-26da44ae35a5.png"> #### Option 2 based on greys with no tint <img width="1105" alt="Dark Mode Color Theme-1" src="https://user-images.githubusercontent.com/51428934/145745509-5444d0c1-5f05-4315-a1d4-e39394ea28bc.png"> #### Option 2 based on blue main brand color <img width="1105" alt="Dark Mode Color Theme-2" src="https://user-images.githubusercontent.com/51428934/145745940-af3dab87-6feb-443c-b2f7-2c30402c6b91.png"> #### Current Light Mode theme <img width="1105" alt="Light Mode Color Theme" src="https://user-images.githubusercontent.com/51428934/145745513-bfbf1803-d7aa-4054-8452-6e1e46745ac4.png"> ### Strawpoll Link https://strawpoll.com/hfarq36rc

mirror commented

Author

Owner

@SleepDaemon commented on GitHub (Dec 13, 2021):

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
https://github.com/AppFlowy-IO/appflowy/issues/31#issuecomment-992065113,
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.

@SleepDaemon commented on GitHub (Dec 13, 2021): 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 > <https://github.com/AppFlowy-IO/appflowy/issues/31#issuecomment-992065113>, > 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>. > >

mirror commented

Author

Owner

@rileyhawk1417 commented on GitHub (Dec 13, 2021):

Option 2 seems mellowed out and relaxed

@rileyhawk1417 commented on GitHub (Dec 13, 2021): Option 2 seems mellowed out and relaxed

mirror commented

Author

Owner

@MostHated commented on GitHub (Dec 13, 2021):

2 - with no tint

@MostHated commented on GitHub (Dec 13, 2021): 2 - with no tint

mirror commented

Author

Owner

@mrtolkien commented on GitHub (Dec 14, 2021):

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.

@mrtolkien commented on GitHub (Dec 14, 2021): 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.

mirror commented

Author

Owner

@annieappflowy commented on GitHub (Dec 14, 2021):

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

@annieappflowy commented on GitHub (Dec 14, 2021): 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 ![image](https://user-images.githubusercontent.com/12026239/145921691-c3db34d1-29cc-49f9-8f09-f6c94e07b03f.png)

mirror commented

Author

Owner

@annieappflowy commented on GitHub (Dec 14, 2021):

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

@annieappflowy commented on GitHub (Dec 14, 2021): > 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

mirror commented

Author

Owner

@branhillsdesign commented on GitHub (Dec 15, 2021):

@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.

@branhillsdesign commented on GitHub (Dec 15, 2021): @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. <img width="960" alt="Dark Mode Color Theme" src="https://user-images.githubusercontent.com/51428934/146274176-2efd5042-6345-442c-ab2d-dd2c1f3fbb66.png"> <img width="960" alt="Light Mode Color Theme" src="https://user-images.githubusercontent.com/51428934/146274181-8eab5eb9-c3fa-43d6-a00e-a1cd42542668.png"> 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.

mirror commented

Author

Owner

@rileyhawk1417 commented on GitHub (Dec 16, 2021):

@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.

@rileyhawk1417 commented on GitHub (Dec 16, 2021): > @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. > > <img alt="Dark Mode Color Theme" width="960" src="https://user-images.githubusercontent.com/51428934/146274176-2efd5042-6345-442c-ab2d-dd2c1f3fbb66.png"> > > <img alt="Light Mode Color Theme" width="960" src="https://user-images.githubusercontent.com/51428934/146274181-8eab5eb9-c3fa-43d6-a00e-a1cd42542668.png"> > > 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.

mirror commented

Author

Owner

@Aditya1402 commented on GitHub (Feb 14, 2022):

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

@Aditya1402 commented on GitHub (Feb 14, 2022): 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

mirror commented

Author

Owner

@hieugao commented on GitHub (Feb 14, 2022):

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.

@hieugao commented on GitHub (Feb 14, 2022): Hi @Aditya1402, I open a related PR at #259, so in case if you want to contribute some then check it out, ᵖˡᵉᵃˢᵉᵎ :smile:. I'll add some tasks inside the PR soon.

mirror commented