Change Classroom New Dark Mode to Dracula Theme
Dicoding DraculaTheme V0.1 by aiga0
Details
Authoraiga0
LicenseNo License
Categorydicoding
Created
Updated
Size5.7 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Work In In Progress, More tweak to come
Source code
/* ==UserStyle==
@name Dicoding DraculaTheme V0.1
@version 20220617.08.51
@namespace userstyles.world/user/aiga0
@description Change Classroom New Dark Mode to Dracula Theme
@author aiga0
@license No License
==/UserStyle== */
@-moz-document domain("www.dicoding.com") {
.setting__content .item.dark {
background:#282a36;
}
.fr-view blockquote {
border-left: solid 4px #ff5555;
margin-left: 0;
padding-left: 22px;
color: #ff5555;
}
.item.dark {
background-color:#44475a !important;
color:#fafafa!important
}
.dark .classroom-bottom-nav,
.dark .classroom-top-nav {
background-color:#282a36!important;
color:#f8f8f8!important;
}
.dark {
background-color:
#44475a!important;
color:#f8f8f8!important
}
.dark p {
color:#f8f8f2!important
}
.dark .tools-overlay {
background-color:#f8f8f8!important;
color:#f8f8f8!important;
box-shadow:1px 2px 8px 0 rgba(8,8,8,.8);
}
.dark .setting.show {
background-color:#282a36!important;
color:#f8f8f8!important;
border:2px solid #52525b!important;
box-shadow:1px 2px 8px 0 rgba(8,8,8,.8)
}
.dark .feature-activation {
background-color:#282a36!important;
color:#f8f8f8!important;
border-color:#282a36!important;
box-shadow:1px 2px 8px 0 rgba(8,8,8,.8)
}
.dark #module-list {
background-color:#44475a!important;
color:#f8f8f8!important
}
.dark .module-list {
background-color:#44475a!important;
color:#f8f8f8!important
}
.dark .module-list__header {
background-color:#44475a!important;
color:#f8f8f2!important
}
.dark .module-list-content {
border-left: 2px solid #fff !important;
}
.dark a.remove-style-link {
background-color:#44475a!important;
color:#f8f8f8!important
}
.dark #appearance-icon:hover,
.dark #module-list-icon:hover,
.dark #setting-icon:hover,
.dark .classroom-bottom-nav__next:hover,
.dark .classroom-bottom-nav__prev:hover,
.dark .classroom-top-nav__title:hover {
background:#44475a!important;
color:#f8f8f2!important
}
.dark .tools-button:hover {
background-color:#282a36!important;
color:#f8f8f8!important
}
.dark .panel-heading.bg-light {
background-color:#282a36!important;
color:#f8f8f8!important
}
.dark .panel-body.bg-light {
background-color:#282a36!important;
color:#f8f8f8!important
}
.dark .dcd-btn-secondary {
background:#44475a!important;
color:#f8f8f2!important;
border:none!important
}
.dark .bg-light {
background-color:#282a36!important;
color:#f8f8f8!important
}
.dark .coderunner-widget {
border:2px solid #282a36!important;
border-radius:8px
}
.pb-2 {
padding-bottom:1rem!important
}
.dark .dcd-btn-primary {
background:#6272a4!important
}
.dcd-btn-primary {
background-color:#282a36;
border-color:#44475a;
color:#fff
}
.dark .js-module-search {
background-color:#282a36!important;
color:#f8f8f8!important;
border:1px solid #ff5555;
border-bottom: 3px solid #ff5555;
border-top-left-radius:8px;
border-top-right-radius:8px
}
.dark .js-module-search__field {
background-color:#282a36!important;
color: #50fa7b !important;
}
.container.my-3 b {
color: #50fa7b;
}
.dark .module-search-container {
background:#282a36!important;
color:#f8f8f2!important;
border:3px solid #f55;
}
.dark .module-search-container .module-search__result {
border-top:0!important;
background:#282a36!important;
color:#f8f8f2!important
}
.module-search-container .module-search__result div.container:hover {
background-color:#232531
}
.dark .shepherd-text {
color:#f8f8f2!important
}
.dark .shepherd-element {
background-color:#44475a!important;
color:#f8f8f8!important;
box-shadow:1px 2px 8px 0 rgba(40, 42, 54, .46)
}
.shepherd-enabled.shepherd-target {
background-color:#eff6ff;
border:2px solid #6272a4!important;
border-radius:8px!important
}
.dark .shepherd-button {
background-color:#44475a!important;
color:#fafafa!important;
border-color:#a3a399!important
}
.dark kbd {
background:#282a36!important;
color:#f8f8f2!important;
border-color:#6272a4!important
}
.dark .academy-tutorial-content .prettyprint-wrapper {
border-color:#282a36!important;
}
.dark .dcd-badge-danger {
background-color:rgba(255, 85, 85,.5)!important;
color:#fff!important
}
.dark .dcd-alert {
background-color:#44475a!important;
color:#f8f8f2!important;
border-color:#6272a4!important
}
.dcd-badge-success {
background-color:#6272a4;
border-color:#50fa7b;
color:#50fa7b
}
.dark #modal-exam-result .modal-header {
border-color:#6272a4!important;
}
.dark #modal-exam-result .exam-result__brief-info {
border-color:#6272a4!important
}
.dark #modal-exam-result {
background-color:#282a36 !important;
color:#fafafa!important
}
.dark #modal-exam-result .modal-content {
background-color:#282a36!important;
color:#fafafa!important
}
.dark #modal-exam-result .exam-result__brief-info--score-container {
background-color:#44475a!important;
color:#fafafa!important
}
.dark #modal-exam-result .dcd-badge-neutral.bg-white {
background-color:#44475a!important;
color:#fafafa!important;
border-color:#6272a4!important
}
.dark label.dcd-btn-secondary.active {
background: #282a36 !important;
color: #fafafa !important;
border: none !important;
}
.dark .academy-tutorial-content a {
color: #50fa7b !important;
}
.dark #modal-submission-instructions .modal-content {
background-color: #44475a !important;
color: #fafafa !important;
}
.tools-button.tools-button--discussion.btn-ghost:hover svg path {
fill: #FFF;
}
.tools-button.tools-button--help.btn-ghost:hover svg path {
fill: #FFF;
}
.tools-button.tools-button__onboarding.btn-ghost:hover svg path {
fill: #FFF;
}
.tools-button.tools-button__onboarding.btn-ghost:hover svg path {
fill: #FFF !important;
}
}