Skip to content

Cocrea Dark mode by fath11

Screenshot of Cocrea Dark mode

Details

Authorfath11

LicenseNo License

Categorycocrea.world

Created

Updated

Size11 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Add dark mode to cocrea!

Notes

Please note that there will be imperfections, and this theme cannot cover all edge cases unless made by the official dev

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Cocrea Dark mode
@version      20230531.08.38
@namespace    userstyles.world/user/fath11
@description  Add dark mode to cocrea!
@author       fath11
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://cocrea.world/") {
.base-layout-container {
    background-color: #111;
}
.style_recommend-project-card-content__8CxLs {
    background: #222;
}
.style_recommend-project-card-body__uXZsh {
    background: #222;
    border-radius: 10px;
}
.style_recommend-project-card-title__uoSuk {
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
    color: #fff;
    min-width: 0;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.style_user-card__whDS5 {
    width: 344px;
    background: #222;
}
.style_user-card-name__GBmn1>h5 {
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: #fff;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.style_user-card-count-item__zYhFU>h6 {
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: #fff;
    margin: 0;
}
.style_module-title__OxhUz {
    color: #fff;
}
.css-8gxmv2 .MuiInputBase-root {
    background: #111;
}
.css-dzg38z {
    color: #fff;
}
.style_header__5q4mN {
    background-color: #222;
}
.style_menu__A84Rp {
    background-color: #222;
}

/* Project tab */

.style_btnTitle__8nEQ7 {
    color: #fff;
}
.style_content__BOKjV {
    background-color: #222;
}
.style_bg__cjOOd {
    background-color: #222;
}
.style_title__teO9s {
    color: #fff;
}

/* Dashboard */

.css-vnx95i {
    background-color: #222;
}
.style_taskContainer__XfXma .style_taskTitle__I_KtK {
    color: #fff;
}
.style_taskContent__u5XFF {
    color: #fff;
}
.style_staticsCard__pCJsm {
    background-color: #222;
}
.style_staticsCard__pCJsm .style_stats__6dyvM {
    color: #fff;
}
.style_staticsCard__pCJsm .style_title__sC5mA {
    color: #fff;
}
.css-faujvq {
    background-color: #222;
}
.css-1qw96cp {
    background-color: #222;
}
.style_apexAreaChart__ke0pN .style_title__EtlqX {
    color: #fff;
}
.style_subscribers__b0OjO {
    background-color: #222;
    border-radius: 24px
}
.style_subscribers-list-item-nickname__UcXpL {
    color: #fff;
}
.style_subContainer___N2qA {
    background-color: #111;
}

/* Naquagems Tab */

.css-7nln4k {
    color: #fff;
}
.style_container__cCoFS {
    background-color: #111;
}
.style_slider__bZNMF {
    background-color: #222;
    border-radius:16px;
}
.style_slider__bZNMF .style_coin__cx5AQ h1 {
    color: #fff;
}
.style_slider__bZNMF .style_leaderboard__JE_eE h5 {
    color: #fff;
}
.css-t85mwn {
    background-color: #222;
    color: rgb(30, 32, 34);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    box-shadow: none;
    border-radius: 16px;
    height: 100%;
}
.css-kvgwnx {
    background-color: #222;
    color: rgb(30, 32, 34);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    box-shadow: none;
    border-radius: 16px;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-family: D-DIN,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    color: #fff;
}
.css-47dxsg {
    background-color: #222;
}
.css-8kgwhu {
    color: #fff;
}
.css-1oqw4gr {
    color: #fff;
}
.css-759u60 {
    color: #fff;
}
.css-r8u8y9 {
    background-color: #222;
}
.css-ugbfhb {
    color: #fff;
}
.style_table__HyVo9 thead th {
    background-color: #222;
    color: #fff;
}
.style_table__HyVo9 tbody tr td {
    color: #fff;
    padding: 16px 20px;
}
.css-meksih {
    background-color: #222;
}
.css-8h8i4q {
    background-color: #222;
}
.css-1oxzv8w {
    background-color: #222;
}
.css-8zwqq8 {
    background-color: #222;
}
.style_panel__AmUC3 .style_desp__HEvag {
    color: #fff;
}
.css-14qya0r input {
    border: 1px solid rgb(209, 213, 219);
    padding: 16px;
    border-radius: 6px;
    color: #fff;
}

/* Naquagems tab - share button */

.style_modal-container__724m4 {
    position: relative;
    margin: auto;
    background: #222;
    min-width: 480px;
    padding: 32px 40px;
    box-shadow: 0 24px 20px rgba(32,57,94,.05), 0 2px 20px rgba(0,0,0,.08);
    border-radius: 12px;
}
.style_modal__R7AVH .style_btnPanel-item__MUnjI.style_active__geu2f, .style_modal__R7AVH .style_btnPanel-item__MUnjI:hover {
    border: 1px solid #2d8cff;
    background: linear-gradient(0deg,#222,#222),#2d8cff;
    box-shadow: 0 5px 12px rgba(0,0,0,.12);
    color: #fff;
}
.style_modal__R7AVH .style_btnPanel-item__MUnjI {
    width: 140px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
}
.style_modal__R7AVH .style_panel__00sqN .style_desc__F1Vxn {
    font-size: 14px;
    letter-spacing: .15px;
    color: #fff;
    margin: 16px 0;
}

/* 3 dot popup */
.style_menu-user-operate-btn__Zc6Qr {
    padding: 8px 16px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #d1d5db;
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    white-space: nowrap;
    border-radius: 5px;
    background-color: #222;
}
.style_menu-user-operate-visible__6ITJz {
    width: 184px;
    background-color: #222;
}

.css-rkfmuv {
    background: rgb(30, 32, 34);
    padding: 0px 16px;
    height: 46px;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 23px;
    font-weight: 700;
}

/* account settings */

.styles_container__M7q_7 .styles_content__iVLGw {
    margin-top: 60px;
    padding: 32px;
    justify-content: center;
    min-width: 500px;
    background-color: #111;
}
.style_card-header__pp6eL {
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    padding: 30px 0;
    border-bottom: 1px solid #d1d5db;
}
.style_card__e4IGR {
    background: #222!important;
    box-shadow: 0 0 4px rgba(0,0,0,.25)!important;
    border-radius: 6px!important;
    padding: 0 30px!important;
    margin-bottom: 40px!important;
    color: #fff;
}
.css-19kg0ag {
    color: #fff;
}
.css-1rfrs09 {
    color: #fff;
}
.css-1rfrs09.Mui-disabled {
    color: #fff;
}
.css-19kg0ag.Mui-disabled {
    opacity: 1;
    -webkit-text-fill-color: #fff;
}
.css-1ffpt3o.Mui-selected {
    background-color: rgba(45, 140, 255, 0.08);
    color: #fff;
}
.css-1ffpt3o {
    min-height: auto;
    color: #fff;
}
.css-1umncnk.css-1umncnk.css-1umncnk {
    padding-right: 32px;
    color: #fff;
}
.css-1kmjrg3 {
    font: inherit;
    letter-spacing: inherit;
    color: #fff;
    border: 0px;
    box-sizing: content-box;
    background: none;
    height: auto;
    margin: 0px;
    -webkit-tap-highlight-color: transparent;
    display: block;
    min-width: 0px;
    width: 100%;
    animation-name: mui-auto-fill-cancel;
    animation-duration: 10ms;
    resize: none;
    padding: 0px;
    border-radius: 5px;
}

/* search */

.css-7g07io {
    background-color: #111;
    color: #fff;
}
.css-1ml4fxf {
    padding: 32px 0px 54px;
    overflow: visible;
    background-color: #111;
}
.css-nhaql8 {
    background-color: #111;
}
.css-nhaql8 {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    -webkit-tap-highlight-color: #111;
    background-color: #111;
    outline: 0px;
    border: 0px;
    margin: 0px;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    appearance: none;
    text-decoration: none;
    text-transform: none;
    font-family: "Inter var", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 0.875rem;
    line-height: 1.75;
    min-width: 64px;
    padding: 6px 8px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    color: rgb(45, 140, 255);
    font-weight: 400;
    border-radius: 5px;
}
.css-l3sjh8 {
    background-color: #111;
    color: rgb(30, 32, 34);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 8px;
    box-shadow: none;
    overflow: visible;
}
div {
    color: #fff;
}
.style_num__MU_E6 {
    display: inline-block;
    background-color: #2d8cff;
    color: #000;
    margin-left: 4px;
    padding: 5px 8px;
    line-height: 14px;
    font-size: 12px;
    border-radius: 7px;
}

/* profile editing */

.style_panel__d4AFy .style_templatePanel__Jvtl0 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222;
}
.style_panel__GGaMm {
    background-color: #222;
    height: 100%;
    padding: 32px;
    display: flex;
}
.style_panel__d4AFy .style_footer__NRHM3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 32px;
    left: 0;
    bottom: 0;
    background-color: #ffc700;
    cursor: pointer;
    color: #000;
}

/* profile page manager */

.style_page-manage-panel-title__HV_Ec {
    padding: 16px 20px;
    border-bottom: 1px solid #222;
    color: #101928;
    background-color: #222;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.style_page-manage-panel-body__ax9Wu {
    padding: 0 20px 20px;
    background-color: #222;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.style_page-operations__u7tB4 {
    background: #222;
    border: ...

Reviews

No reviews yet.