Asana - Dark Cobalt

Added by S. Baker@userstyles, Created: Mar 11, 2016, Updated: Apr 19, 2017
  • With the style applied
  • Live project example
  • Custom theme example


Less blinding light!

Included is the ability to customize the theme.

I recommend choosing a color palette with matching light and dark tones when changing colors.

More info
If this style was helpful, please leave a review.

STYLE BROKEN? READ HERE: Asana does weird things sometimes with stylesheets. If you see issues on first page load, disabling and re-enabling the style should fix it. Alternatively, close focus view or refresh the page. This issue mainly occurs when opening Asana for the first time or reopening a closed Asana tab in your browser.

HOW TO HELP IMPROVE OR FIX THINGS? READ HERE: Asana has ten billion different ways to customize task views, project displays, etc. I don't use 9/10 of these, so if something changes on their end and breaks the style code, I will have no idea unless you tell me. Send a message or post a comment here!

UPDATING AFTER MAKING CHANGES? READ HERE: If you are clicking the update button after having made your own, personal changes to the style, please be aware that those will be overwritten. Create a back up before updating w/ custom changes, ladies and gentlemen!

ME WANT CUSTOM THEME? READ HERE: A great tool for building your own custom theme: (note: you will have to manually make the darker/lighter tones from your chosen color palette). It's best to choose "monochromatic" as the color rule.

When new features are added, you may need to reinstall due to the customization options (they have to be overwritten or added).

This is developed primarily for Chrome browsers.

04/19/17 -- Fix for some background colors.
04/10/17 -- Task row floating white background fix.
04/07/17 -- Top bar fix.
04/06/17 -- Attachments menu item color fixed.
03/31/17 -- Personal task view calendar fixed.
03/29/17 -- Various hotfixes.
03/21/17 -- Numbered task display fixed.
03/15/17 -- Fixes to new react dropdown menus.
03/13/17 -- Various fixes to project 'Board' view.
02/28/17 -- Uploading file name font no longer dark while uploading.
02/16/17 -- Fix for sidebar.
02/06/17 -- Fixes to custom fields dropdown menu. Fixes to personal task view pane.
02/03/17 -- Fixed blinding separators in task pane. Completed tasks darker font color fix. Various other QOL changes. Various custom field fixes.
02/01/17 -- Fixed projects panel :hover.
01/30/17 -- Fixed :hover for completing tasks button.
01/25/17 -- Fixed rogue white border on task rows.
01/12/17 -- Fixed repeating task icon. Gradient section styling is now an option that can be disabled.
01/11/17 -- Additional calendar fixes + custom field fixes.
01/09/17 -- Fixed calendar in React display.
01/06/17 -- Various React fixes (font colors, task icons, etc.).
01/05/17 -- Fixed font color in project selection menu.
01/03/17 -- Fixed completed task icons in @[lookup].
12/07/16 -- Fixed dropdown svg/polygons and tag selection box.
11/31/16 -- Various additional task pane fixes.
11/30/16 -- Various task pane fixes.
11/28/16 -- Fixed mouse-over borders for react views.
11/16/16 -- Cleaned up custom fields dialog box.
10/26/16 -- Fixed some background colors in custom fields and hover menus.
10/11/16 -- Things seem to be back to normal. Stylish working again.
09/23/16 -- Fixed :hover box shadow and border color on task items. Fixed some button colors.
09/20/16 -- Updated small pixel-line of background leak at the bottom of the screen.
09/09/16 -- Fixed some nav link coloring and icons.
08/25/16 -- Fixed the star denoting 'today' in the calendar.
08/25/16 -- More React fixes. Removed annoying trailing border on last item of rows.
08/24/16 -- Added a light gradient to sections to help with differentiating between section and task line items. Various fixes for React changes.
08/23/16 -- Fixed task divider border styling, hover styling, focused styling.
08/10/16 -- Fixed task deleted/replaced text's background color so it's legible.
08/09/16 -- Task completed fill now uses 'task_completed' as gradient color.
08/08/16 -- Fixed 'New Project' dialog box.
08/03/16 -- Archive button now takes background color of task_hover.
08/02/16 -- Added options to control task and section divider styles (dotted or solid), new scrollbar color.
08/01/16 -- Updated task and section dividers, added color options for dividers, new task hover border.
07/26/16 -- Renamed theme.
07/21/16 -- New task drag-and-drop location styling -- fixed as of 8/22/16.
07/13/16 -- Hotfix for React changes (you may need to completely reinstall).
07/11/16 -- New default color scheme and standardized colors/naming convention.
07/08/16 -- Fixed actor link colors in archive and task pane task:hover, fixed black text in some menus.
07/05/16 -- Updated 'Add Members' menu styling, left navbar pane can now be colorized.
06/27/16 -- Layout updates, new advanced search style, subtask pane fixes, minified CSS, customize your theme.
06/21/16 -- Updated some white things when selecting multiple tasks.
06/08/16 -- Fixed black hyperlinks within inbox.
06/02/16 -- Updated :hover colors for some nav elements (easier to read).
05/31/16 -- Fixed some subtask issues.
05/16/16 -- Fixed white text input box in task pane (again).
05/11/16 -- Update to :hover for task lists in inbox.
05/10/16 -- Fixed white text input box in task pane.

You should to add comment and rate the style.


+ Create discussion

Applies to:
CC0 1.0 Universal.
S. Baker@userstyles has waived all copyright and related or neighboring rights to Asana - Dark Cobalt, to the extent allowed by law.

Related styles:

WARNING: This webware is not functioning properly. Please enable javascript in your browser and try again.