Skip to content

docs.cycling74.com Dark Mode by Mentalist

Write a review Install Get Stylus

Details

AuthorMentalist

LicenseCC Zero

Categorydocs.cycling74.com

Created

Updated

Size3.7 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Max Online Documentation: Dark Mode - This user CSS theme for the documentation section of Cycling '74's website makes it easier on your eyes when in the dark.

Notes

This user CSS only modifies the color of the site, not layout or functionality.

This theme has been tested on various pages of the site, but not extensively. It is possible that some still-light areas or other sub-optimal styling may crop up. But the theme should be mostly reliable. Feel free to customize it further.

Source code

/* ==UserStyle==
@name           Unofficial Dark Mode theme for docs.cycling74.com
@namespace      docs.cycling74.com
@version        1.0.0 (2024 Oct 30)
==/UserStyle== */

@-moz-document domain("docs.cycling74.com") {

body {
  background-color: #15141a;
  --fbc-primary-text: #e3e2e9;
  color: #bfbfc5;
  --fbc-secondary-text: #a0a0ab;
}
strong {
  color: #f5f5f5;
}

/* title/heading styles */
.title {
  color: #c0e7f1;
}
h1.title {
  color: #f5f5f5;
}
h1, h2 {
  color: whitesmoke;
}
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
  color: #f5f5f5;
  font-weight: 600;
  line-height: 1.125;
}
.has-text-black, a.has-text-black:focus, a.has-text-black:hover {
  color: #fff !important;
}
h2.title.is-4,
h4.title.max-version-title {
  color: unset;
}
/* examples: https://docs.cycling74.com/max8/refpages/send
https://docs.cycling74.com/max8/refpages/patcher */
section[class$="_section"] div[class$="_group"] h3[class$="_name"] {
  background: rgb(55, 55, 55);
}

/* link styles */
a {
  transition: all 0.2s;
  color: #0377cb;
}
a:hover {
  color: #c0e7f1;
}

/* input fields */
.search-form input,
.search-form .button {
  background-color: #eee;
}

/* menu styles */
.box {
  background-color: rgb(36, 36, 36);
}
aside.menu { /* menu */
  background-color: rgb(36, 36, 36);
}
.menu-label {
  color: #cefaff;
}
.menu-list a {
  transition: all 0.33s;
  color: #bd9e9e;
}
.menu-list a:hover {
  color: #ce5252;
  background-color: #c0e7f1;
}
.menu-list a.is-active {
  background-color: rgb(25, 110, 171);
}
.menu-list a.is-active:hover {
  color: #c0e7f1;
}
.column.is-one-quarter {
  background-color: unset;
}

/* table styles
example: https://docs.cycling74.com/max8/vignettes/organizing_your_patch_topic*/
table,
.table thead {
  background-color: #444;
}
.content table thead td, .content table thead th {
  color: #fff;
}
.content table td, .content table th {
  border-color: #abaaaa;
}
.table.is-striped tbody tr {
  background-color: #202020;
}
.table.is-striped tbody tr:not(.is-selected):nth-child(2n) {
  background-color: #282828;
}
td.description {
  color: #ddd;
}
.content table td {
  border-color: #222;
}
table strong {
  text-shadow: 0.2px 1.2px rgba(0,0,0,0.6);
}
.columns.is-gapless .column {
  border: 1px solid #555;
}
.columns.is-gapless .column li {
  border-bottom: 1px solid #555;
}
.method_group .method_name,
.attribute_group .attribute_name,
.misc_group .misc_name,
.argument_group .argument_name,
.menuitem_group .menuitem_name,
.geninlet_group .geninlet_name,
.inlet_group .inlet_name,
.outlet_group .outlet_name,
.entry_group .entry_name,
.jsproperty_group .jsproperty_name,
.jsmethod_group .jsmethod_name {
  background: #555;
}

/* boxes of text for tips, bullet lists, misc info
example: https://docs.cycling74.com/max8/vignettes/messages_to_max */
* .bluebox, * .techdetail {
  background-color: rgb(38, 38, 38) !important;
}

/* code examples
example: https://docs.cycling74.com/max8/vignettes/jsbasic */
.content pre {
  background-color: hsl(184, 15%, 10%);
  color: #c0e7f1;
}

/* new version notice banner
example: https://docs.cycling74.com/max7/ */
#__next div:has(a[href^="/latest"]) {
  background-color: hsl(184, 15%, 10%);
}

/* alters the look of content images (comment out if it causes issues) */
article.content figure img {
  transition: all 0.5s;
  filter: invert(100%);
  mix-blend-mode: lighten;
}
/* although, hover will reveal original appearance */
article.content figure img:hover {
  filter: none;
  mix-blend-mode: normal;
}

}/* END @-moz-document */

Reviews

No reviews yet.