Loads the Dracula color scheme for any discourse forum
// ==UserScript==
// @name Discourse Auto Dark Theme
// @namespace http://tampermonkey.net/
// @version 1
// @description Loads the Dracula color scheme for any discourse forum
// @author gfish
// @license MIT
// @match *://*/*
// @grant GM_addStyle
// @grant unsafeWindow
// ==/UserScript==
(function() {
let attempts = 0;
let interv = setInterval(findDiscourse, 250);
findDiscourse();
function findDiscourse() {
if (unsafeWindow.Discourse) {
clearInterval(interv);
console.log('[Discourse Auto Dark Theme] Found Discourse, injecting Dracula theme')
GM_addStyle(`
:root {
--primary: #f2f2f2 !important;
--primary-high: #9da0b5 !important;
--primary-very-high: #9da0b5 !important;
--primary-medium: #727694 !important;
--primary-low-mid: #727694 !important;
--primary-low: #44475A !important;
--primary-very-low: #44475A !important;
--primary-high-or-secondary-low: #9da0b5 !important;
--secondary: #282a36 !important;
--secondary-high: #44475A !important;
--tertiary: #bd93f9 !important;
--tertiary-low: #44475A !important;
--tertiary-very-low: #44475A !important;
--quaternary: #8be9fd !important;
--header_background: #282a36 !important;
--header_primary: #f2f2f2 !important;
--highlight: #f1fa8c !important;
--danger: #ff5555 !important;
--success: #50fa7b !important;
--love: #ff79c6 !important;
--hover: #44475A !important;
--selected: #44475A !important;
--d-sidebar-highlight-color: var(--primary) !important;
--primary-700: var(--primary-high) !important;
--primary-500: var(--primary-high) !important;
--primary-400: var(--primary-medium) !important;
--primary-300: var(--primary-medium) !important;
--highlight-bg: var(--d-hover) !important;
--inline-code-bg: var(--primary-low) !important;
}
// DRACULA THEME
:root {
--d-sidebar-highlight-color: var(--primary) !important;
--primary-700: var(--primary-high) !important;
--primary-500: var(--primary-high) !important;
--primary-400: var(--primary-medium) !important;
--primary-300: var(--primary-medium) !important;
--highlight-bg: var(--d-hover) !important;
}
@keyframes background-fade-highlight {
0% {
background-color: var(--d-hover) !important;
}
100% {
background-color: transparent !important;
}
}
textarea,
input {
&::placeholder {
color: var(--secondary-medium) !important;
}
}
tbody {
border-top: 3px solid var(--secondary-high) !important;
tr.topic-list-item {
border-bottom: 1px solid var(--secondary-high) !important;
background-color: var(--secondary) !important;
}
}
.alert.alert-info {
background-color: var(--secondary-high) !important;
}
.topic-list td {
color: var(--primary) !important;
}
// Header
.d-header {
box-shadow: none !important;
border-bottom: 1px solid var(--secondary-high) !important;
height: 75px !important;
}
// Menu Panel Links
.panel-body-contents {
a {
color: var(--primary) !important;
}
.badge-wrapper.bullet span.badge-category {
color: var(--primary) !important;
font-weight: 400 !important;
}
}
.user-menu .quick-access-panel li {
.d-icon {
color: var(--primary) !important;
}
}
.user-menu .quick-access-panel .d-icon,
.user-menu .quick-access-panel:hover .d-icon,
.user-notifications-list .d-icon,
.user-notifications-list:hover .d-icon {
color: currentColor !important;
}
.user-menu.revamped .tabs-list .btn.active {
background: var(--tertiary) !important;
color: var(--primary) !important;
.d-icon {
color: var(--primary) !important;
}
.badge-notification {
background: var(--primary) !important;
}
}
// notifications
.d-header .unread-notifications {
background-color: var(--success) !important;
}
.unread-private-messages {
background-color: var(--love) !important;
}
// Last visit line + text
.topic-list .topic-list-item-separator td {
border-bottom: 1px solid $highlight-high#{90} !important;
span {
color: var(--highlight-high) !important;
}
}
// title when injected on top of topics
.extra-info-wrapper {
.topic-link {
color: var(--primary) !important;
}
.categories-wrapper .badge-wrapper .badge-category {
color: var(--primary) !important;
}
}
// not visited topics
tr:not(.visited) .link-top-line .title {
font-weight: 600 !important;
}
td .link-bottom-line .badge-category {
font-weight: 400 !important;
}
.new-user-wrapper .user-navigation .nav-pills li a.active {
color: var(--quaternary) !important;
border-color: var(--quaternary) !important;
}
.new-user-wrapper .user-navigation .nav-pills li a:hover,
.new-user-wrapper .user-navigation .nav-pills li a:focus {
color: var(--tertiary) !important;
border-color: var(--tertiary) !important;
}
.nav-pills > li a.active,
.nav-pills > li button.active,
.nav-pills > li > a:hover,
.nav-pills > li button:hover {
background: var(--tertiary) !important;
color: var(--secondary) !important;
}
// create topic
button#create-topic {
background-color: var(--success) !important;
color: var(--secondary) !important;
border-radius: 4px;
.d-icon {
color: var(--secondary) !important;
}
&:hover {
background-color: var(--success-medium) !important;
}
}
// header icons
.header-sidebar-toggle,
.d-header-icons {
a,
button {
.d-icon {
color: var(--primary) !important;
}
}
}
// category box color
.category-boxes .category-box-inner,
.category-boxes-with-topics .category-box-inner {
border: 1px solid var(--secondary-high) !important;
}
// select kit collection
.select-kit-row .category-name,
.select-kit-row .name {
color: var(--primary) !important;
}
.select-kit-row.is-highlighted[title='no tags'] span.name {
color: var(--tertiary) !important;
}
// post notice
.post-notice {
background-color: var(--secondary-high) !important;
}
// user name on posts and chat
.topic-meta-data {
.names .username a {
color: var(--success) !important;
}
}
.chat-message-info__username__name {
color: var(--success) !important;
}
// custom side bar styles
.custom-nav-list {
li:hover,
h3 a:hover {
background-color: var(--tertiary-500) !important;
}
}
.custom-nav-list h3 {
border-color: var(--secondary-high) !important;
}
// avatar white background
img.avatar {
background-color: var(--primary) !important;
}
.directory .me {
background-color: var(--tertiary-medium) !important;
}
// topic progress
.timeline-container .topic-timeline .timeline-scrollarea {
border-color: var(--love) !important;
.timeline-handle {
background-color: var(--love) !important;
}
}
#topic-progress {
color: var(--love-low) !important;
background-color: var(--secondary) !important;
border-color: var(--love) !important;
.bg {
background-color: var(--love) !important;
border-color: var(--love) !important;
}
}
// composer popup
.composer-popup {
background: var(--secondary-high) !important;
}
// /top
.select-kit.dropdown-select-box.period-chooser
.period-chooser-row
.top-date-string,
.select-kit.dropdown-select-box.period-chooser
.period-chooser-header
h2.selected-name
.top-date-string {
color: var(--quaternary) !important;
}
// posts
.read-state {
color: var(--quaternary) !important;
}
blockquote,
aside.quote .title {
background: var(--primary-low) !important;
border-color: var(--primary-medium) !important;
}
nav.post-controls .actions button.create,
nav.post-controls .actions a,
nav.post-controls .actions button {
color: var(--primary-medium) !important;
.d-icon {
color: currentColor !important;
}
&.d-hover {
color: var(--primary) !important;
}
}
.discourse-no-touch .topic-body .actions .fade-out {
opacity: 1;
}
pre code {
background: var(--secondary-high) !important;
}
// chat
.no-touch {
.chat-message-container:hover,
.chat-transcript:hover,
.chat-message-container.-active,
.-active.chat-transcript {
pre code {
background: var(--secondary) !important;
}
}
}
.chat-transcript {
border: 1px solid var(--primary-low) !important;
background: var(--secondary) !important;
.discourse-no-touch & {
&:hover {
background: inherit;
pre code {
background: rgba(var(--primary-rgb), 0.05) !important;
}
}
}
}
// code
p > code {
background: var(--primary-medium) !important;
}
`)
return;
}
if (attempts > 30) {
clearInterval(interv);
console.log('[Discourse Auto Dark Theme] Could not find Discourse')
return;
}
++attempts;
}
})();