![Screenshot of [old] [not working] op.gg dark mode with options](https://userstyles.world/preview/2167/0.webp)
Authorjanmm14
LicenseCC BY-SA
Categoryop.gg, dark mode, darkmode, dark theme, settings, options
Created
Updated
Size58 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
A dark opgg (op.gg) style with many options, including to change the accent color (that op.gg blue color).
For League Of Legends.
(only)
More screenshots: https://github.com/Janmm14/op.gg-style
Also includes a sample with green accent color.
(Settings for that: accent color #326732, accent hue 120)
Extension with support for stylus prepocessor required.
/* ==UserStyle==
@name OP.GG Dark Mode
@version 1.0
@description A dark theme of OP.GG with options
@namespace Janmm14
@preprocessor stylus
@author Janmm14
@homepageURL https://userstyles.world/style/2167
@var color bg "Background Color" "#000"
@var checkbox a_front "Front page accent color background" 0
@var checkbox front_light "Front page light element background" 0
@var color tbb "Brightest text color" "#eee"
@var color tb "Bright Text color" "#ddd"
@var color t "Text color" "#ccc"
@var color td "Dark Text color" "#aaa"
@var color tdd "Darkest Text color" "#888"
@var color ebg "Element BG" "#0f0f0f"
@var color b "Border color" "#383838"
@var color a "Accent Color" "#293856"
@var number a_hue "Accent Color hue" ['deg', 220, 1, 359, 1]
@var checkbox ad_summoner_center "Center ad on summoner page" 1
@var checkbox opscore_beta_banner "OpScore Beta Banner" 1
@var checkbox champ_desktop_banner "Champion Desktop Baner" 1
@var checkbox new_icon "Top Nav new icon" 1
@var checkbox top_banner "Top Banner" 1
@var checkbox aggro_symbol "Show flashing aggro symbol" 1
==/UserStyle== */
/* vars */
lose_d = hsl(0, 33%, 16%)
lose_b = hsl(0, 33%, 30%)
lose_m = hsl(0, 33%, 25%)
lose_req = hsl(0, 33%, 22%)
rmk_d = hsl(0, 0%, 16%)
rmk_b = hsl(0, 0%, 30%)
rmk_m = hsl(0, 0%, 25%)
rmk_req = hsl(0, 0%, 22%)
win_d = hsl(231, 33%, 16%)
win_b = hsl(231, 33%, 35%)
win_m = hsl(231, 33%, 25%)
win_req = hsl(231, 33%, 22%)
red_g = hsl(3, 50%, 40%)
blue_g = hsl(211, 50%, 40%)
mvp = #ad6f03
@-moz-document domain("op.gg") {
/* op.gg */
if (new_icon == 0) {
.l-wrap .gnb .navi__item--new span::after {
display: none !important;
}
.l-wrap .gnb .navi__item--new span {
padding-left: 0 !important;
}
}
if (top_banner == 0) {
.image-banner {
display: none !important;
}
}
/* FIXES */
/* fix search server choose dropdown z-index bug */
.l-container, .SummonerLayout > .Header {
position: static;
}
.SummonerLayout > .Header > .LastUpdate {
position: relative;
left: 160px !important;
bottom: -5px;
}
.SummonerLayout > .Menu {
margin-top: 13px;
}
a {
outline: 0 !important;
}
/* STYLE */
/* general */
html {
background-color: bg;
}
.Button.Blue {
color: t;
background-color: a;
border-color: b;
}
.Button.Blue:hover {
filter: brightness(1.1);
border-color: b;
}
.Button.White {
background-color: bg;
color: tbb;
border-color: b;
}
.Button.White:hover {
filter: brightness(1.1);
border-color: b;
}
.page-divider {
background-color: td;
}
.Loading.black {
background-image: url(//opgg-static.akamaized.net/images/loader.black.gif);
}
.Button.RealWhite {
background-color: ebg;
border-color: b;
color: t;
}
.Button.RealWhite:hover {
border-color: b;
filter: brightness(1.3);
}
/* icons */
.__spSite,.icon, .icon {
filter: hue-rotate(-200deg) hue-rotate(a_hue) !important;
}
.__spSite-157 {
filter: hue-rotate(-180deg) hue-rotate(a_hue) !important;
}
.__spSite-155 {
filter: brightness(0.35) !important;
}
.__spSite-154 {
filter: hue-rotate(-4deg) saturate(0.5) contrast(1.5) brightness(0.8) !important;
}
.__spSite-156 {
filter: hue-rotate(-220deg) hue-rotate(250deg) saturate(0.5) contrast(1.4) brightness(0.8) !important;
}
.__spSite-195,
.__spSite-196 {
filter: brightness(1.75) !important;
}
.__spSite-88 {
filter: invert(1) contrast(1.28) !important;
}
.__spSite-159 {
opacity: 0.5;
filter: saturate(0) !important;
}
/* match summary detail expansion buttons */
.__spSite-193, .__spSite-194 {
filter: saturate(0.6) brightness(1.6) !important;
}
.__spSite-197, .__spSite-198 {
filter: saturate(0.7) brightness(1.3) !important;
}
.setting-list__item a::before, .setting-status img {
filter: hue-rotate(-220deg) hue-rotate(a_hue) brightness(0.8) saturate(1.3) !important;
}
img[src="//opgg-static.akamaized.net/images/site/champion/icon-info.png"],
img[src="//opgg-static.akamaized.net/images/site/champion/icon-tip.png"]{
filter: invert(1) brightness(1.4);
}
/* menu */
.l-menu {
background-color: a !important;
border-bottom-color: rgba(255,255,255,.2) !important;
}
.gnb .opgg-header {
background-color: a !important;
}
.gnb .opgg-header__logo {
background-color: a !important;
}
.gnb .navi__item--default {
background-color: a !important;
color: t !important;
}
.gnb .navi__item .icon {
filter: brightness(0.9);
}
.gnb .navi__item:hover {
background-color: a !important;
}
.gnb .navi__item:hover span {
filter: brightness(1.2);
}
.gnb .navi__item:hover .icon {
filter: brightness(1.3) !important;
}
.gnb .navi__item--default:hover {
filter: none !important;
}
.gnb .navi__item--default:hover span {
filter: none !important;
}
.gnb .navi__item--default:hover .icon {
filter: brightness(0.9) !important;
}
if (aggro_symbol == 0) {
.gnb .navi__item[href*="aggro"] .icon-wrapper {
display: none;
}
.gnb .navi__item[href*="aggro"] span {
margin-left: 0;
}
}
.gnb .navi__item[href*="er.op.gg"] .icon {
filter: brightness(0.8) !important;
}
.gnb .navi__item[href*="er.op.gg"]:hover .icon {
filter: brightness(0.95) !important;
}
.gnb .navi__item[href*="duo.op.gg"] .icon {
filter: brightness(0.8) !important;
}
.gnb .navi__item[href*="duo.op.gg"]:hover .icon {
filter: brightness(0.95) !important;
}
.gnb .navi__item[href*="desktop"]:hover .icon {
filter: brightness(1.2) !important;
}
.gnb .opgg-header__gnb {
background-color: rgba(0,0,0,.3) !important;
}
.menu__item > a {
color: a;
filter: saturate(0.15) brightness(3) contrast(1.8) hue-rotate(-30deg);
}
.menu__item > a.urf {
color: a;
filter: brightness(3.25) hue-rotate(-30deg);
}
.menu__item--active > a, .menu__item:hover > a {
color: tbb;
border-bottom-color: t;
filter: none;
}
.gnb .navi-expand__button:hover {
background-color: a !important;
}
.gnb .navi-expand {
background-color: a !important;
if (!a_front) {
background-color: transparent !important;
backdrop-filter: brightness(0.7) blur(10px) !important;
} else {
background-color: a !important;
filter: brightness(0.7) !important;
}
border-radius: 0 0 4px 4px;
width: 400px !important;
padding-top: 8px !important;
}
.gnb .navi-expand .navi__item {
color: t !important;
padding: 7px 0px 7px 0px !important;
}
.gnb .navi-expand .navi__item span {
padding: 0px 2px !important;
}
.gnb .navi-expand .navi__item .icon-wrapper {
background-color: a !important;
border: 0 none !important;
}
.gnb .navi-expand .navi__item:hover {
background-color: a !important;
}
.gnb .navi-expand .navi__item:hover span {
color: tbb !important;
}
.gnb .navi-expand .navi__item:hover .icon-wrapper {
filter: none;
}
.gnb .opgg-header__navi-noti-icon {
filter: brightness(1.75) hue-rotate(-220deg) brightness(0.9);
}
/* search in menu bar */
.gnb-list-item__search {
background-color: a;
}
.gnb-list-item__search input::placeholder {
color: t;
}
.gnb-list-item__search input:-ms-input-placeholder {
color: t;
}
.gnb-list-item__search input::-ms-input-placeholder {
color: t;
}
.gnb-list-item__search input {
background-color: bg;
border-radius: 0 4px 4px 0;
color: tb;
}
.gnb-list-item__search .gnb-list-item__select {
background-color: bg;
background-color: rgba(0,0,0,0.6);
color: a;
padding-right: 8px;
}
.gnb-list-item__search .gnb-list-item__select > span {
filter: brightness(2.75) saturate(0.5);
}
.gnb-list-item__search .gnb-list-item__select .gnb-list-item__title::after {
border-top-color: a;
filter: saturate(1.5);
right: -15px;
}
/* menu bar search server chooser */
.gnb-list-item__search .gnb-list-item__list {
background-color: bg;
}
.gnb-list-item__search .gnb-list-item__list .gnb-list-item__option {
color: t;
}
.gnb-list-item__search .gnb-list-item__list .gnb-list-item__option:hover {
color: tb;
background: b;
}
.gnb-list-item__search button img {
filter: hue-rotate(-230deg) brightness(0.85) hue-rotate(a_hue);
}
/* menu bar search recent/favorites */
.gnb-list-item__search .summoner-search-history {
background-color: bg;
border: 1px solid b;
border-radius: 10px;
}
.gnb-list-item__search .summoner-search-history .tabWrap._recognized {
border-radius: 10px;
}
.summoner-search-history__list .Action.Add {
top: -1px;
filter: hue-rotate(-200deg) hue-rotate(a_hue) !imp...