Makes ClickUp look like Discord's dark theme! (Requires ClickUp theme to be set to dark mode)
ClickUp - Discord Dark Theme by chew
![Screenshot of ClickUp - Discord Dark Theme](https://userstyles.world/preview/2995/0.jpeg)
Details
Authorchew
LicenseNo License
Categoryclickup
Created
Updated
Size9.4 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Make sure you set your ClickUp theme to Dark Mode!
Source code
/* ==UserStyle==
@name ClickUp - Discord Dark Theme
@version 20220128.19.24
@namespace userstyles.world/user/chew
@description Makes ClickUp look like Discord's dark theme! (Requires ClickUp theme to be set to dark mode)
@author chew
@license No License
==/UserStyle== */
@-moz-document domain("app.clickup.com") {
/** Settings Colors */
:root {
--discord-background-primary: #36393f;
--discord-background-secondary: #2f3136;
--discord-background-modifier-hover: rgba(79,84,92,0.16);
--discord-background-tertiary: #202225;
--discord-blurple: #5865F2;
--discord-blurple-560: hsl(235,calc(var(--saturation-factor, 1)*51.4%),52.4%);
}
body {
--theme-main-color: #5865F2!important;
--theme-main-color-dark: #5865F2!important;
--theme-main-color-light: #FFFFFF!important;
}
/** Task */
.dark-theme .task-column.task-column_main {
background: var(--discord-background-primary);
}
.dark-theme .cu-editor-wrapper .cu-editor {
background: var(--discord-background-primary);
}
.dark-theme .task-name-block {
background: var(--discord-background-primary);
}
.dark-theme .task-name-block .task-name {
background: var(--discord-background-primary);
}
.dark-theme .task-column.task-column_activity {
background: var(--discord-background-secondary);
}
.dark-theme .task__header {
background: var(--discord-background-primary);
}
.dark-theme .task-container__header-wrapper {
background-color: var(--discord-background-secondary);
}
.dark-theme .comment-bar {
background: var(--discord-background-primary);
}
.dark-theme .comment-bar__editor .ql-editor {
background: var(--discord-background-primary);
}
.dark-theme .task__toolbar_last:before {
background: var(--discord-background-primary);
}
.dark-theme .attachment-tile__inner {
background: var(--discord-background-primary);
}
.dark-theme .cu-task-row-new__container {
background: var(--discord-background-secondary);
border: 1px solid var(--discord-background-secondary);
}
.dark-theme .cu-dashboard-table__scroll {
background: var(--discord-background-primary);
}
.dark-theme .cu-simple-bar__container {
background: var(--discord-background-secondary);
}
.dark-theme .cu-simple-bar__body {
background: var(--discord-background-secondary);
}
.dark-theme .cu2-views-bar__container {
background: var(--discord-background-primary);
}
.dark-theme .cu2-views-bar_v6 .cu2-views-bar__options {
background: var(--discord-background-primary);
}
.dark-theme .cu-task-list-header__item_main {
background: var(--discord-background-primary);
}
.dark-theme .cu-task-row__container {
background: var(--discord-background-secondary);
border-color: var(--discord-background-secondary);
}
.dark-theme .cu-task-row__main {
background: var(--discord-background-secondary);
}
.dark-theme .cu-simple-bar__item:hover {
background: var(--discord-background-modifier-hover);
}
.dark-theme .cu2-search_simple-layout {
background: var(--discord-background-tertiary);
}
.dark-theme .cu-header-quick-switcher_simple-layout {
background: var(--discord-background-primary);
}
.dark-theme .cu2-project-list-bar__title {
background: var(--discord-background-secondary);
}
.dark-theme .cu2-project-list-bar__title:hover {
background: var(--discord-background-modifier-hover);
}
.dark-theme .cu2-project-list-bar__scrollable {
background: var(--discord-background-secondary);
}
.dark-theme .cu2-project-list-bar-item__container {
background: var(--discord-background-secondary);
}
.dark-theme .cu2-project-list-bar__new-toggle, .cu-simple-bar.dark-theme .cu2-project-list-bar__new-toggle {
color: #fff;
background-color: var(--discord-blurple);
transition: background-color .17s ease,color .17s ease;
}
.dark-theme .cu2-project-list-bar__new-toggle:hover, .dark-theme .cu2-project-list-bar__new.cu-dropdown_open .cu2-project-list-bar__new-toggle {
background-color: var(--discord-blurple-560);
transition: background-color .17s ease,color .17s ease;
}
.dark-theme .task-minimize {
background-color: var(--discord-blurple);
transition: background-color .17s ease,color .17s ease;
}
.dark-theme .task-minimize > svg {
fill: #fff;
}
.dark-theme .task-minimize:hover {
fill: #aaa;
background-color: var(--discord-blurple-560);
transition: background-color .17s ease,color .17s ease;
}
.dark-theme .cu2-views-bar_v6 .cu2-views-bar__btn_outline:is(.cu2-views-bar_v6 .cu2-views-bar__btn_outline:hover,.cu2-views-bar_v6 .cu2-views-bar__btn_outline:focus) {
background-color: var(--discord-blurple-560);
transition: background-color .17s ease,color .17s ease;
}
.dark-theme .cu2-views-bar_v6 .cu2-views-bar__btn_outline {
color: #fff;
background-color: var(--discord-blurple);
transition: background-color .17s ease,color .17s ease;
}
.dark-theme .cu2-views-bar_v6 .cu2-views-bar__share-label {
color: #fff;
}
.dark-theme .cu2-views-bar_v6 .cu2-views-bar__share-icon {
fill: #fff;
stroke: #fff;
}
.cu2-project-list-bar__new-icon {
fill: #fff;
}
.dark-theme .cu-simple-bar__row {
background: var(--discord-background-secondary);
}
.dark-theme .cu-simple-bar__row .cu-accordion__toggle_expanded {
background: var(--discord-background-secondary);
}
.dark-theme .cu-grid-sidebar__body {
background: var(--discord-background-secondary);
}
.dark-theme .cu-simple-bar__body .cu-sidebar-favorites__header_active {
background: var(--discord-background-secondary);
}
.dark-theme .cu-sidebar-favorites__list {
background: var(--discord-background-secondary);
}
.dark-theme .cu-simple-bar__divider-placeholder {
background: var(--discord-background-secondary);
}
.dark-theme .cu-task-list-header {
background: var(--discord-background-primary);
}
.dark-theme .cu-data-view-item {
background: var(--discord-background-primary);
}
.dark-theme .cu-data-view-item__name_not-empty:after {
background: linear-gradient(to right,rgba(43,52,59,0) 0%, var(--discord-background-primary) 70%, var(--discord-background-primary) 100%);
}
.dark-theme .cu2-views-bar_v6 .cu-data-view-item_tab:hover .cu-data-view-item__name_not-empty:after, .dark-theme .cu2-views-bar_v6 .cu-data-view-item_tab.cu-data-view-item_selected .cu-data-view-item__name_not-empty:after {
background: linear-gradient(to right,rgba(43,52,59,0) 0%,var(--discord-background-primary) 70%,var(--discord-background-primary) 100%);
}
.dark-theme .cu-data-view-list__edge_right:before {
background: linear-gradient(to right,rgba(43,52,59,0) 0%,var(--discord-background-primary) 30%,var(--discord-background-primary) 100%);
}
.dark-theme .cu-dashboard-doc-container__main {
background: var(--discord-background-primary);
}
.dark-theme .cu-dashboard-doc-container__scroll-container {
background: var(--discord-background-primary);
}
.dark-theme .cu-dashboard-doc-title__text, .dark-theme .cu-dashboard-doc-title .cu-editable__input {
background: var(--discord-background-primary);
}
/**
* Automations
*/
.dark-theme .cu-automation-tab-manage__container {
background: var(--discord-background-secondary);
}
.dark-theme .cu-automation-tab-manage__item {
background-color: var(--discord-background-primary);
}
.dark-theme .cu-automation-list__header {
background: var(--discord-background-primary);
}
.dark-theme .cu-automation-modal__container {
background-color: var(--discord-background-secondary);
}
/** Home */
.dark-theme .cu-home-header {
background: var(--discord-background-primary);
}
.dark-theme .cu-home-page__body {
background: var(--discord-background-primary);
}
.dark-theme .cu-home-page__section-column_tasks {
background: var(--discord-background-primary);
}
.dark-theme .cu-home-page__section-column_calendar {
background: var(--discord-background-primary);
}
.dark-theme .cu-lineup_v2 .cu-lineup__add-items-toggle {
background: var(--discord-background-primary);
}
.cu-home-header__btn {
color: #fff;
fill: #fff;
background-color: var(--discord-blurple);
transition: background-color .17s ease,color .17s ease;
}
.dark-theme .cu-home-header__btn:hover {
fill: #aaa;
background-color: var(--discord-blurple-560);
transition: background-color .17s ease,color .17s ease;
}
.cu-home-header__btn_active .cu-home-header__btn-icon {
fill: #fff;
}
.cu-home-header__btn_active .cu-home-header__btn-label {
color: #fff;
}
.dark-theme .cu-home-tagged-comments__header {
background-color: var(--discord-background-tertiary);
}
.dark-theme .cu-home-tagged-comments__body {
background-color: var(--discord-background-secondary);
}
.dark-theme .cu-home-tabs {
background: var(--discord-background-primary);
}
/** Notifications */
.dark-theme .cu-notifications {
background: var(--discord-background-primary);
}
.dark-theme .cu-notifications__header_v6 {
background: var(--discord-background-primary);
}
}