Add dark mode to cocrea!
Cocrea Dark mode by fath11
Details
Authorfath11
LicenseNo License
Categorycocrea.world
Created
Updated
Size11 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
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: ...