Skip to content

Instantly share code, notes, and snippets.

@katagaki
Last active June 1, 2023 02:49
Show Gist options
  • Save katagaki/1da75e73e3b323ae2a1ed02094264e50 to your computer and use it in GitHub Desktop.
Save katagaki/1da75e73e3b323ae2a1ed02094264e50 to your computer and use it in GitHub Desktop.
Better ClickUp dark mode, with other UI tweaks.
/* ==UserStyle==
@name ClickUp Dark Better
@match https://app.clickup.com/*
==/UserStyle== */
body {
--cu-background-main: black!important;
--cu-background-subtle: black!important;
--cu-background-on-main: black!important;
--cu-background-menu: #111!important;
--cu-background-modal: #111!important;
--cu-background-menu-opaque: #222!important;
--cu-alert-banner-background: #222!important;
--cu-alert-banner-background-subtle: #222!important;
--cu-background-main-hover-strong: #333!important;
--dashboard-table-background-color: black!important;
}
body.dark-theme,
.dark-theme,
.dark-theme .cu-loader-mind,
.dark-theme .cu-task-row__main,
.dark-theme .cu-task-row__container,
.dark-theme .cu-simple-bar__container,
.dark-theme .cu-simple-bar__body,
.dark-theme .cu2-project-list-bar__title,
.dark-theme .cu2-project-list-bar__scrollable,
.dark-theme .nav-category__header,
.dark-theme .cu2-project-list-bar-item__container,
.dark-theme .cu-simple-bar__row *,
.dark-theme .cu-simple-bar__body .cu-sidebar-favorites__header_active,
.dark-theme .cu-sidebar-favorites__list,
.dark-theme .task-container__header-wrapper,
.dark-theme .task__header,
.dark-theme .task-column.task-column_main,
.dark-theme .task-column.task-column_activity,
.dark-theme .task-mobile-tabs,
.dark-theme .task-name-block .task-name,
.dark-theme .cu-dashboard-board__group-header-container,
.dark-theme .cu-dashboard-board__content-container,
.dark-theme .cu-notifications__header_v6,
.dark-theme .cu-notifications,
.dark-theme .cu-home-header,
.dark-theme .cu-home-page__section-column_tasks,
.dark-theme .cu-home-page__section-column_calendar,
.dark-theme .cu-home-tabs,
.dark-theme .cu-inbox-list__header,
.dark-theme .cu-notification-item.comment,
.dark-theme .cu-task-relationship-type__title,
.dark-theme .task-mover__toggle,
.dark-sidebar,
.dark-theme .cu-mention-selector__footer,
.dark-theme .cu-dashboard-doc-container__topbar,
.dark-theme .gantt_task_row,
.dark-theme .gantt_task_row.odd,
.dark-theme .gantt_task_scale,
.dark-theme .gantt_data_area,
.dark-theme .gantt_grid_scale,
.dark-theme .gantt_grid,
.dark-theme .gantt_grid_data .gantt_row {
background-color: black!important;
background: black!important;
}
.dark-theme .cu-task-relationship-type__columns-container {
background: black!important;
}
.dark-theme .task-name-block,
.dark-theme .cu-editor-wrapper .cu-editor,
.dark-theme .cu-task-editor__show-more,
.dark-theme .cu-task-custom-fields__row_unset,
.dark-theme .breadcrumbs,
.dark-theme .cu-comment__toolbar,
.dark-theme .cu-edit-task-custom-field-value,
textarea,
.dark-theme .cu-dashboard-doc-title__text,
.dark-theme .cu-dashboard-doc-title .cu-editable__input,
.dark-theme .cu-notification__group-title-container,
.dark-theme .cu-notification__toggle-block_group {
background: unset!important;
}
.cu-task-row-new__container-body,
.dark-theme .cu-task-relationships-table-tasks-lazy__type,
.dark-theme .attachment-tile__inner,
.dark-theme .breadcrumbs-position__input,
.dark-theme .task-history-attachment__body .cu-attachment-preview__container,
.dark-theme .cu-rich-editor-toolbar.ql-toolbar,
.dark-theme .cu-task-relationships-table-tasks-lazy__tasks-list .cu-task-list:not(.cu-task-list_list-view-v3) .cu-task-list-header,
.dark-theme .cu-task-relationships-table-tasks-lazy__tasks-list .cu-task-list:not(.cu-task-list_list-view-v3) .cu-task-list-header__item_main,
.cu-task-relationships-table-tasks-lazy__tasks-list .cu-task-list:not(.cu-task-list_list-view-v3) .cu-task-list-header-settings,
.dark-theme .cu-comment__lip_empty,
.dark-theme .cu-comment__lip_reply-expanded.cu-comment__lip_no-reactions,
.dark-theme .cu-user-mention-list__virtual-viewport,
.dark-theme .cu-custom-field-dropdown-labels__menu-search-main,
.dark-theme .cu-custom-field-dropdown-labels__menu-search,
.dark-theme .cu-select__dropdown-menu-custom-search .cu-select__search,
.dark-theme .cu-select__dropdown-menu-options,
.dark-theme .command-popover-wrapper .command-popover-inner,
.dark-theme .cu-slash-command-value-list__item_separator,
.dark-theme .cu-dashboard-doc-quick-menu__container,
.dark-theme .cu-dashboard-doc-right-sidebar-content,
.dark-theme .cu-dashboard-doc-right-sidebar-tabs,
.dark-theme .task-minimize,
.dark-theme .task-close {
background: #222!important;
}
.dark-theme .task-container__header-wrapper,
.task-column.task-column_main,
.task-column.task-column_activity,
.task-mobile-tabs {
border-radius: unset!important;
}
.task-container {
padding: unset!important;
}
.dark-theme .cu-simple-bar__divider-placeholder {
height: 1px!important;
}
.dark-theme .cu-simple-bar__item:hover,
.dark-theme .cu-search-button_simple-layout,
.dark-theme .cu-simple-bar__body .cu-sidebar-favorites__header:hover,
.dark-theme .cu-simple-bar__body .nav-category__header:hover:before,
.dark-theme .cu-simple-bar__body .cu-nav-section:hover:not(.cu-nav-section_dragging):not(.cu-nav-section_editing):before,
.dark-theme .cu-simple-bar .cu2-project-list-bar-item__container:hover:before,
.dark-theme .cu-slash-command-list-item_active {
background-color: #333!important;
}
.cu-simple-bar__search {
margin-top: 8px!important;
}
.dark-theme .cu-notification__header,
.dark-theme .cu-notification__body,
.dark-theme .cu-notification__reply-toggle_hidden,
.dark-theme .cu-notification-delta-mention,
.dark-theme .cu-notification__group,
.dark-theme .cu-edit-widget,
.dark-theme .task_subtask,
.dark-theme .cu-dashboard-doc-container__right-sidebar-container,
.dark-theme .cu-dashboard-doc-page__comments .comments-container,
.dark-theme .cu-comment__deleted,
.dark-theme .cu-dashboard-doc-sidebar__container {
background: #111!important;
}
.dark-theme .cu-dashboard-doc-page__comments .cu-comment__lip,
.dark-theme .cu-dashboard-doc-page__comments .comment-bar,
.dark-theme .cu-dashboard-doc-page__comments .comment-bar__editor .ql-editor,
.dark-theme .cu-dashboard-doc-page__comments .cu-comment__text-edit .ql-editor,
.dark-theme .cu-dashboard-doc-page__comments .cu-comment__toolbar {
background-color: #111!important;
}
.cu-notifications__inner {
padding: 8px 65px 8px 8px!important;
max-width: unset!important;
}
.dark-theme .cu-comment__body,
.dark-theme .cu-notification__reply .comments-container,
.dark-theme .comment-bar {
background: #161616!important;
}
.dark-theme .comment-bar__editor .ql-editor {
background: unset!important;
}
.cu-notification__main-comment {
padding: unset!important;
}
.cu-comment__aside {
min-width: unset!important;
visibility: hidden;
}
app-root,
.dark-theme .cu-task-custom-fields__row-type-icon,
.dark-theme .cu-task-custom-fields__row-type-name {
color: white!important;
}
.cu-tray-bar__body {
right: 60px!important;
bottom: 0px!important;
min-width: calc(100vw - 60px)!important;
max-width: calc(100vw - 60px)!important;
border-radius: 0px!important;
background-color: #222!important;
border-color: #222!important;
}
.cu-loader-mind,
.loading-placeholder,
.task-backdrop,
.dark-theme .cu-tray-bar__list:before,
.dark-theme .cu-tray-bar__list:after,
.dark-theme .cu-comment__toolbar:before,
.dark-theme .cu-comment-bar:before,
.dark-theme .task__toolbar_last:before,
.dark-theme .cu-slash-command-value-list__item_separator:after,
.dark-theme .cu-slash-command-value-list__body:after,
.dark-theme .cu-notification .cu-notifications-comment .cu-comment__body-container_truncated .cu-comment__text:after {
visibility: hidden!important;
}
.dark-theme .task-column_main .task-column__footer.cu-hidden-print.ng-tns-c601-306.ng-star-inserted {
visibility: hidden!important;
height: 0px;
}
.cu-float-button {
right: 0px!important;
bottom: 0px!important;
background-color: var(--theme-main-color)!important;
}
.cu-float-button_simple,
.cu-float-button__toggle-simple-container-create-task:before {
border-radius: 0px!important;
border: unset!important;
transition: unset!important;
transform: unset!important;
}
.cu-create-task-draft-lazy:not(.cu-create-task-draft-lazy_embed) {
right: 0px!important;
bottom: 38px!important;
box-shadow: unset!important;
}
.cu-simple-bar__container {
height: calc(100vh - 37px)!important;
}
.dark-theme .cu-tray-item:not(.cu-tray-item_v3):not(.cu-tray-item_in-dropdown) {
background-color: #333!important;
}
.cu-float-button_simple .cu-float-button__toggle-simple-container-create-task {
border-radius: 0px!important;
}
.cu-dashboard-table__body:not(.cu-dashboard-table__body_v3) {
padding: unset!important;
}
.task-history__scroll-view {
padding: 0 16px!important;
}
.task-container__header-wrapper {
min-height: 30px!important;
}
.task-minimize,
.task-close {
height: 30px!important;
border-radius: 0px!important;
}
.task-minimize {
width: 48px!important;
right: 56px!important;
}
.task-close {
width: 48px!important;
right: 0px!important;
}
.task-minimize__icon {
right: 0px!important;
bottom: 0px!important;
}
.task__header {
min-height: unset!important;
}
.task__toolbar {
padding: 8px!important
}
.task-name-block {
padding: 8px!important;
margin: unset!important;
position: unset!important;
}
.task-name-container {
padding: unset!important;
margin: unset!important;
width: 100%!important;
}
.cu-task-custom-fields__container {
padding: 0px!important;
margin: 8px!important;
}
.ng-tns-c399-281.cu-editor-wrapper.cu-editor_task-view.cu-editor-wrapper_hover.cu-editor-wrapper_show-more.cu-editor-wrapper_active {
padding: 8px!important;
margin: unset!important;
}
.task-todo,
.task__checklist {
padding: 8px!important;
}
.cu-task-relationships {
margin: 8px!important;
}
.cu-attachments__header {
margin: unset!important;
padding: 8px!important;
}
.cu-attachments-tiles-list {
padding: 8px!important;
}
.cu-uploader.cu-uploader_compact {
padding: unset!important;
}
.task-container {
top: 0px!important;
left: 0px!important;
width: 100%!important;
height: calc(100% - 38px)!important;
max-width: unset!important;
border-radius: unset!important;
}
.cu-grid-layout__gridster.ng-tns-c1064-134.scrollVertical.ng-star-inserted {
padding: 16px!important;
}
.cu-grid-layout-item__toolbar-row {
padding: 8px 8px 4px 0!important;
}
.dark-theme .task-container .cu-task-custom-fields__container .cu-task-custom-fields__container-inner {
background: unset!important;
background-color: unset!important;
}
.dark-theme .cu-dashboard-doc-container__content(not:.cu-modal__body) {
padding-bottom: 38px!important;
}
.cu-grid-layout-item:hover .cu-grid-layout-item__toolbar-buttons .cu-grid-layout-item__toolbar-refreshed-timestamp,
.cu-dashboard-doc-page__comments .comments-container .cu-comment__aside {
visibility: hidden;
width: 0px!important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment