Skip to content

ClickUp - Discord Dark Theme by chew

Screenshot of ClickUp - Discord Dark Theme
Homepage Write a review Install Get Stylus

Details

Authorchew

LicenseNo License

Categoryclickup

Created

Updated

Size9.4 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Makes ClickUp look like Discord's dark theme! (Requires ClickUp theme to be set to dark mode)

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);
}
}

Reviews

No reviews yet.