A new dark mode theme for spigotmc.org
Adds a couple customization options.
SpigotMC NewDark by janmm14
Details
Authorjanmm14
LicenseGPL v3
Categoryspigotmc.org
Created
Updated
Size40 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
GitHub: https://github.com/Janmm14/spigotmc-newdark
Credits of the thread icons go to https://userstyles.org/styles/144069/spigot-dark-theme
Options:
- Dim spigotmc orange (i suggest trying out 0.825 dim value)
- Make header black
- Remove header (adds small spigotmc logo to ghome button)
- Remove useless margins on home page and wiki pages
- Choose whether inline code has white or black background
- Increase width of code blocks
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name SpigotMC NewDark
@namespace github.com/Janmm14/spigotmc-newdark
@version 1.2.8
@description SpigotMC.org NewDark mode userstyle. https://userstyles.world/style/4051/spigotmc-newdark
@preprocessor less
@author Janmm14
@var range dim "Dim spigotmc orange" [1, 0.4, 1, 0.025]
@var checkbox black_header "Black header background" 1
@var checkbox no_header "Remove the header" 1
@var checkbox nomargin "Less margin on spigotmc home news feed and wiki pages" 1
@var checkbox icode_dark "Should inline code [icode] have dark background" 1
@var number codeblockrightmargin "Right margin of code blocks (+1)" [141, 1, 1000, 1, 'px']
==/UserStyle== */
@-moz-document url-prefix("https://spigotmc.org"), url-prefix("https://www.spigotmc.org") {
html {
background: black;
&:before {
content: @dim;
display: none;
}
}
body {
background: black;
color: #d3d3d3;
}
a[href]:hover {
color: #ccc;
}
.spigot_headerReadAboutWrapper a:hover {
color: #efb61c;
}
.primaryContent a, .ugc a:link, .ugc a:visited {
color: #efb61c;
}
#AccountMenu ul.links a:hover, .articleItem a:hover {
color: #efb61c;
}
#navigation {
.navTabs {
.navTab.selected {
.navLink {
background-color: #1b1e22;
&::after, &::before {
bottom: -4px;
background: transparent;
border-bottom: 4px solid #1b1e22;
}
&::before {
border-radius: 0 0 100% 0;
border-right: 4px solid #1b1e22;
}
&::after {
border-radius: 0 0 0 100%;
border-left: 4px solid #1b1e22;
}
}
}
}
}
.navTabs {
.navTab.selected {
.tabLinks {
background: #1b1e22;
border-color: #30353b;
a {
color: #ddd;
text-shadow: 0 1px #555;
}
}
}
}
#userBar .navTabs {
& when (@black_header = 1) {
background: black;
border-bottom: 0 none;
padding-bottom: 3px;
}
}
#userBar .navTabs .navLink, #userBar .navTabs .SplitCtrl {
color: #ddd;
}
.Menu {
border-width: 1px;
border-left-color: #444;
border-right-color: #444;
border-bottom-color: #444;
border-radius: 0 0 10px 10px;
&.tabMenu {
border-left-color: #efb61c;
border-right-color: #efb61c;
border-bottom-color: #efb61c;
}
.primaryContent {
background: rgba(38, 38, 38, 0.9);
border-color: #262626;
}
.secondaryContent {
background: rgba(30, 30, 30, 0.9);
border-bottom: 1px solid transparent;
}
}
.textCtrl {
background-color: black;
color: #bfbfbf;
border-color: #444;
}
#QuickSearch .primaryControls .uix_icon {
color: #efb61c;
background: #444;
text-shadow: 0 1px rgba(239, 182, 28,.25);
}
#QuickSearch .primaryControls:focus-within {
.uix_icon {
line-height: 32px;
border: 1px solid #efb61c;
border-right-color: transparent;
}
}
#QuickSearch .formPopup .secondaryControls {
background: rgba(17, 17, 17, .95);
background-clip: padding-box;
border-color: #333;
box-shadow: 4px 4px 10px -2px rgba(0,0,0,.9);
color: #d3d3d3;
}
#QuickSearch .button:not(.primary) {
background-color: #333;
color: #eee;
}
.navTabs .navTab.PopupClosed .navLink {
color: #eee;
}
.sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3, .breadcrumb, a.callToAction span, .xenOverlay .heading {
box-shadow: inset 0 1px rgba(255,255,255,.4),inset 0 -1px rgba(0,0,0,.2);
color: #eee;
}
.breadcrumb .crust a.crumb {
color: #eee;
}
.sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3, .breadcrumb, a.callToAction span, .xenOverlay .heading {
filter: brightness(@dim);
}
.breadcrumb, .uix_breadCrumb_toggleList li.toggleList_item {
filter: brightness(@dim);
}
#navigation .navTabs {
& when (@black_header = 0) {
filter: brightness(@dim);
}
& when (@black_header = 1) {
background: transparent;
box-shadow: none;
}
}
& when (@no_header = 1) {
#navigation .navTabs {
> .pageWidth {
padding-left: 0px;
padding-right: 10px;
ul li.articles.PopupClosed:hover a.navLink {
background: -moz-radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);
background: -webkit-radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);
background: radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);
&::before {
filter: brightness(1.1);
}
}
ul li.articles a.navLink {
padding-left: 0px;
display: flex;
&::before {
background-image: url("//static.spigotmc.org/img/spigot.png");
background-size: 50px;
background-repeat: no-repeat;
background-position-x: 5px;
background-position-y: 5px;
content: "";
display: inline-block;
height: 40px;
width: 55px;
position: static;
border: 0 none;
border-radius: 0;
}
}
}
}
@media(max-width: 800px) {
#navigation .navTabs {
> .pageWidth {
padding-left: 16px;
padding-right: 16px;
ul li.articles a.navLink {
background-image: none;
background-size: 50px;
background-repeat: no-repeat;
background-position-y: 0;
&::before {
content: none;
display: none;
height: 0px;
width: 0px;
border-radius: 0;
}
}
}
}
#navigation .pageContent .navTabs ul.navLeft li.navTab--navPanelTrigger {
&:hover a.navLink {
background: -moz-radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);
background: -webkit-radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);
background: radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);
i.uix_icon-menu {
filter: brightness(1.1);
}
}
a.navLink {
padding-left: 0px;
&:hover {
background: -moz-radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);
background: -webkit-radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);
background: radial-gradient(circle at 20%, rgba(255, 255, 255, 0.22) 0%, #00000000 35%);
}
}
i.uix_icon-menu {
padding-left:50px;
background-image: url("//static.spigotmc.org/img/spigot.png");
background-size: 50px;
background-repeat: no-repeat;
background-position-y: 5px;
background-origin: border-box;
}
}
}
@media(min-width: 1200px) {
#header #userBar .navTabs {
box-shadow: none;
}
#header #userBar {
display: block;
position: absolute;
width: 100%;
.pagewidth {
position: absolute;
}
.navTab {
padding-top: 6px;
padding-bottom: 5px;
}
.navRight {
position: relative;
margin-left: auto;
margin-right: 0;
z-index: 999;
}
}
}
}
#logoBlock {
& when (@no_header = 1) {
display: none;
}
}
#logoBlock .pageContent {
& when (@black_header = 1) {
background: transparent;
}
...