Dark theme for phoronix.com with some options (no pages requiring an account covered)
Phoronix - dark theme by alan
Mirrored from https://codeberg.org/alan2b7/firefox/raw/branch/main/userstyles/phoronix-dark-theme.user.css
Details
Authoralan
LicenseMIT
Categoryphoronix.com
Created
Updated
Size20 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Phoronix - dark theme
@namespace alan
@version 1.13
@description Dark theme with some options
@author alan
@homepageURL https://codeberg.org/alan2b7/firefox
@license MIT
@preprocessor stylus
@var select select-theme "Colors preset" ["Black","Dark-Gray"]
@var select custom-colors "Custom colors" ["Off","On"]
@var color main-bg-color "Main background color" #0d0d0d
@var color secondary-bg-color "Secondary background color" #1a1a1a
@var color main-font-color "Main font color" #e6e6e6
@var color secondary-font-color "Secondary font color" #ccc
@var color thread-bg-color "Thread background color" #333
@var color borders-color "Borders color" #262626
@var select brightness-level "Images brightness level" {
"100% (default)": "none",
"80%": "brightness(80%)",
"60%": "brightness(60%)",
"50%": "brightness(50%)"
}
@var select hide-author "Articles: 'About the author'" {
"Show(default)": "block",
"Hide": "none"
}
@var select hide-search "Google search" {
"Show(default)": "block",
"Hide": "none"
}
@var select hide-notices "Forum notices (some)" {
"Show(default)": "block",
"Hide": "none"
}
@var select hide-thread-search "Threads: search bar" {
"Show(default)": "flex",
"Hide": "none"
}
==/UserStyle== */
@-moz-document url-prefix("https://www.phoronix.com/") {
:root {
--green: #459d68; /* lighter phoronix green */
--green2: #3e783b; /* phoronix forum banner */
--brightness-level: brightness-level;
--hide-notices: hide-notices;
--hide-author: hide-author;
--hide-search: hide-search;
--hide-thread-search: hide-thread-search;
if select-theme == "Black" {
--deep-dark: #0d0d0d;
--lighter-deep-dark: #1a1a1a;
--font1: #e6e6e6;
--font2: #ccc;
--text-bg: #333;
--small-borders: #404040;
}
if select-theme == "Dark-Gray" {
--deep-dark: #15141a; /* dark-gray-90 */
--lighter-deep-dark: #1c1b22; /* dark-gray-80 */
--font1: #e0e0e6; /* light-gray-30 */
--font2: #bfbfc9; /* light-gray-50 */
--text-bg: #2b2a33; /* dark-gray-60 */
--small-borders: #23222b; /* dark-gray-70 */
}
if custom-colors == "On" {
--deep-dark: main-bg-color;
--lighter-deep-dark: secondary-bg-color;
--font1: main-font-color;
--font2: secondary-font-color;
--text-bg: thread-bg-color;
--small-borders: borders-color;
}
}
}
@-moz-document url-prefix("https://www.phoronix.com/") {
/* ---- general ---- */
html,
body {
background-color: var(--deep-dark);
color: var(--font1);
}
a {
color: var(--green);
}
article a,
#sidebar a,
#litemenu a {
color: var(--green);
}
/* ---- header menu ---- */
#headerwrap {
background-color: var(--lighter-deep-dark);
}
#categories-content::before {
border-color: transparent transparent var(--small-borders);
}
#categories-content {
background-color: var(--deep-dark);
border-color: var(--small-borders);
}
#categories-content a {
color: var(--font1);
}
/* ---- content ---- */
#content-bg {
background-color: var(--deep-dark);
}
#content {
background-color: var(--lighter-deep-dark);
border-left-color: var(--small-borders);
border-right-color: var(--small-borders);
}
#main {
border-right-color: var(--small-borders);
}
#sidebar-wrap {
border-left-color: var(--small-borders);
}
#sidebar aside {
color: var(--font2);
}
/* ---- article ---- */
article {
border-bottom-color: var(--small-borders);
color: var(--font1);
}
article .details,
article .details a {
color: var(--font2);
}
article.full img {
background-color: var(--font1);
border-color: var(--small-borders);
filter: var(--brightness-level);
}
article.full .author,
#about-author p {
color: var(--font2);
}
#sidebar aside header,
.article-box header,
#about-author header,
.wide-article-box header {
color: var(--font1);
}
article p[align="center"] em {
color: var(--font2);
}
blockquote {
color: var(--font1);
}
object[type="image/svg+xml"] {
background-color: var(--font1);
filter: var(--brightness-level);
}
/* ---- hidden ---- */
#about-author {
display: var(--hide-author);
}
#search {
display: var(--hide-search);
}
/* ---- footer ---- */
#footer {
border-top-color: var(--small-borders);
}
.extra-info,
.extra-info a {
color: var(--font2);
}
.extra-info hr {
border-color: var(--small-borders);
}
}
@-moz-document url-prefix("https://www.phoronix.com/forums/") {
/* ---- general ---- */
body {
background-color: var(--deep-dark);
color: var(--font1);
}
a,
a:active,
a:visited,
.b-link,
.ui-widget-content a {
color: var(--green);
}
a:hover,
.b-link:hover,
.ui-widget-content a:hover {
color: var(--green2);
}
a:focus,
input:focus,
textarea:focus,
button:focus,
select:focus,
.js-link:focus,
.js-button:focus,
.b-button:focus,
.ui-state-focus,
.custom-dropdown:focus,
.cke_dialog_body .cke_dialog_contents .b-button:focus {
outline: none;
}
/* ---- input ---- */
input[type="text"],
input[type="password"],
textarea,
select {
background-color: var(--text-bg);
border-color: var(--small-borders);
}
#sidebar aside header,
.article-box header,
#about-author header,
.wide-article-box header {
color: var(--font1);
}
.b-form-input__input,
.cke_dialog_body .cke_dialog_contents .b-form-input__input {
color: var(--font2);
}
.b-form-input__input--shadow {
box-shadow: inset 1px 1px 1px 0px var(--small-borders);
}
body .b-form-input__input:focus,
body .b-form-textarea__textarea:focus {
border-color: var(--small-borders);
}
.b-form-input__inside-button {
background: none 0 0,linear-gradient(to bottom,var(--small-borders),var(--small-borders)),var(--lighter-deep-dark);
}
.textbox {
color: var(--font2);
}
/* ---- top menu ---- */
.b-top-menu__background {
background-color: var(--deep-dark);
}
.b-top-menu__background::before {
border-bottom-color: var(--deep-dark);
}
.b-comp-menu-dropdown__trigger--headerbar {
color: var(--font2);
}
.b-comp-menu-dropdown__trigger--headerbar:hover {
color: var(--font2);
}
.b-comp-menu-dropdown--open-on-hover .b-comp-menu-dropdown__trigger:hover,
.b-comp-menu-dropdown--open-on-hover:hover .b-comp-menu-dropdown__trigger,
.b-comp-menu-dropdown--open .b-comp-menu-dropdown__trigger {
background-color: var(--deep-dark);
color: var(--font2);
}
.b-comp-menu-dropdown__content {
background: var(--deep-dark);
}
.b-comp-menu-dropdown .b-comp-menu-dropdown__content-item:hover {
color: var(--font1);
}
/* ---- login menu ---- */
body .canvas-layout-container .activate-user-widget,
body .canvas-layout-container .activate-email-widget,
body .canvas-layout-container .forgot-password-widget,
body .canvas-layout-container .contactus-widget,
body .canvas-layout-container .registration-widget {
background-color: var(--deep-dark);
}
/* ---- top level forums - headers ---- */
.canvas-layout-container .canvas-widget.announcement-widget,
.view-mode .widget-no-border > .widget-header {
background-color: var(--lighter-deep-dark);
color: var(--font1);
}
.canvas-layout-container .widget-header {
background-color: var(--lighter-deep-dark);
}
.module-title,
.module-title h1,
.view-mode .canvas-layout-container .canvas-widget.widget-no-border > .widget-header .module-title,
.page-title-widget .module-title,
.page-title-widget .module-title h1 {
color: var(--font1);
}
.widget-tabs .widget-tabs-nav .ui-tabs-nav,
.widget-tabs .widget-tabs-nav li.ui-tabs-active {
background-color: var(--lighter-deep-dark);
}
.widget-tabs .widget-tabs-nav .ui-tabs-nav li a {
color: var(--font2)
}
.widget-tabs .widget-tabs-nav .ui-tabs-nav li a:hover {
color: var(--font2);
}
.widget-tabs .widget-tabs-nav li.ui-tabs-active a,
.widget-tabs .widget-tabs-nav li.ui-tabs-active a:hover {
color: var(--font1);
}
/* ---- top level forums - containers ---- */
body .forum-list-container {
background-color: var(--lighter-deep-dark);
}
body .forum-list-container .forum-item td,
body .subchannel-widget .forum-list-container .forum-item td[class] {
border-top-color: var(--small-borders);
}
.forum-list-container .forum-list-header {
background-color: var(--lighter-deep-dark);
color: var(--font2);
}
.forum-list-container .category-header {
background-color: var(--deep-dark);
}
...