Allow to change the color of the Sidebar

Please help! I am so depressed by the heavy black sidebar that I am about to quit Asana. I don’t see a way to change the color to a color that I want to live with. Am I missing something?

Hi @Annie_Finch and thanks for sharing your feedback with us, we really appreciate it. As it stands, there is no option to update the sidebar colour so I’ve gone ahead and moved your post to the #productfeedback category to allow you and other customers to support this request.

I don’t believe we’ve planned to implement this feature in the near future, but I’ll make sure to keep you posted as soon as I have an update on my end! If there is anything else we can help with in the meantime, don’t hesitate to reach out, we’ll be happy to help!

@Annie_Finch Depressed is a very strong word. I’ve never had any complain with darker color on the sidebar, it just add clarity and contrast to the main tasks area.

But if you really need to change the color and @Marie said that this feature won’t be implemented in the near future, I have a workaround which might help.

If you use Chrome as browser, you can download the extension called Stylebot (https://stylebot.dev/)
the extension allows you to change the CSS of the page.

Once you installed, activate the extension, go to the code section and paste this code:
(here’s the video explanation: https://youtu.be/lis7vG-D4bA

/* Change Sidebar Background Color */
.Sidebar {
    background-color: #ffffff;
}

/* Change Sidebar Text Color */
.SidebarReportsItemRow, .SidebarReportsItemRow:link, .SidebarReportsItemRow:visited,.SidebarWorkspaceHeader-workspaceName,
.SidebarItemRow, .SidebarItemRow:link, .SidebarItemRow:visited,.SidebarInvite {
    color: #000000;
}

/* Change Sidebar Invite your team color */
.InverseSecondaryButton.AbstractThemeableRectangularButton {
    border-color: #5d5d5d;
    color: #5f5f5f;
}

You should have layout like this:

If you need to alter the color, simply change the hex code (#xxxxxx) with anything you like.

I hope this trick help you.

4 Likes

Leonarce trick is perfect, however I would add: if you decide to change the style, then you won’t get any update from Asana, and that might break the design in some cases, just be aware.

1 Like

Nice workaround @Leonarce, thanks for sharing it!

1 Like

Ah yes, you’re right. But at the moment I believe this is the fastest workaround and the css code only change the color, so I hope it won’t break the layout or design.

For sure, I just don’t want people to come back later complaining about their page being broken because they used a hack :stuck_out_tongue:

1 Like