DoggoBit: Created page with "This is an experiment around adapting the NixOS logo colours as MediaWiki-like colours. In a basic form, MediaWiki colours are of two kinds: main colours and subtle colours. The latter are used for backgrounds. In reality it's a bit more complex than that, but any other colour variation stems from these two. Because of Display P3 screen prevalence, I also think it's time we introduce a 3rd colour, a "bright" variant. This one is to be used *ver..."

2025-06-06T22:56:01Z

Created page with "This is an experiment around adapting the NixOS logo colours as MediaWiki-like colours. In a basic form, MediaWiki colours are of two kinds: main colours and subtle colours. The latter are used for backgrounds. In reality it's a bit more complex than that, but any other colour variation stems from these two. Because of Display P3 screen prevalence, I also think it's time we introduce a 3rd colour, a "bright" variant. This one is to be used *ver..."

New page

This is an experiment around adapting the NixOS logo colours as MediaWiki-like colours. In a basic form, MediaWiki colours are of two kinds: main colours and subtle colours. The latter are used for backgrounds. In reality it's a bit more complex than that, but any other colour variation stems from these two.

Because of [[:Wikipedia:Display P3|Display P3]] screen prevalence, I also think it's time we introduce a 3rd colour, a "bright" variant. This one is to be used *very VERY* rarely, when we need to grab the user's attention. For example: a main page welcome, a critical error, etc.

The NixOS logo uses two colours:
* Light Blue <code>#7EBAE4</code>
* Dark Blue <code>#5277C3</code>

I will show below what the colour combinations produce when used as {{template link|box}}es. For each section, switch your theme colour appropriately. In actual implementation, we will be able to dynamically switch between the two, but this requires editing [[MediaWiki:common.css]]. In context, I'll also show the "usual" wiki colours below.

== Light colours ==
<div style="display: flex;">
<div style="width: 10rem; height: 10rem; margin: 10px; background-color: #EBF6FE; border: solid 1px #7EBAE4; border-radius: 0.5rem;"></div>

<div style="width: 10rem; height: 10rem; margin: 10px; background-color: #EFF4FF; border: solid 1px #5277C3; border-radius: 0.5rem;"></div>
</div>

<div style="display: flex;">
<div style="width: 10rem; height: 10rem; margin: 10px; background-color: var(--background-color-progressive-subtle); border: solid 1px var(--border-color-progressive); border-radius: 0.5rem;"></div>

<div style="width: 10rem; height: 10rem; margin: 10px; background-color: var(--background-color-success-subtle); border: solid 1px var(--border-color-success); border-radius: 0.5rem;"></div>

<div style="width: 10rem; height: 10rem; margin: 10px; background-color: var(--background-color-error-subtle); border: solid 1px var(--border-color-error); border-radius: 0.5rem;"></div>

<div style="width: 10rem; height: 10rem; margin: 10px; background-color: var(--background-color-warning-subtle); border: solid 1px var(--border-color-warning); border-radius: 0.5rem;"></div>
</div>

== Dark colours ==
<div style="display: flex;">
<div style="width: 10rem; height: 10rem; margin: 10px; background-color: #013d5c; border: solid 1px #7EBAE4; border-radius: 0.5rem;"></div>

<div style="width: 10rem; height: 10rem; margin: 10px; background-color: #041e62; border: solid 1px #5277C3; border-radius: 0.5rem;"></div>
</div>

<div style="display: flex;">
<div style="width: 10rem; height: 10rem; margin: 10px; background-color: var(--background-color-progressive-subtle); border: solid 1px var(--border-color-progressive); border-radius: 0.5rem;"></div>

<div style="width: 10rem; height: 10rem; margin: 10px; background-color: var(--background-color-success-subtle); border: solid 1px var(--border-color-success); border-radius: 0.5rem;"></div>

<div style="width: 10rem; height: 10rem; margin: 10px; background-color: var(--background-color-error-subtle); border: solid 1px var(--border-color-error); border-radius: 0.5rem;"></div>

<div style="width: 10rem; height: 10rem; margin: 10px; background-color: var(--background-color-warning-subtle); border: solid 1px var(--border-color-warning); border-radius: 0.5rem;"></div>
</div>

== Bright colours ==

Because these are only to be used sporadically, and only to show highlights, I'll show them as text, versus the normal colour. Note that you need a screen capable of displaying wide gamut colours! (e.g.: iPhone, HDR monitor, etc.)

<span style="font-size: 200%; color: oklch(0.7555 0.166793 231.1884);">Light Blue Bright</span>

<span style="font-size: 200%; color: #7EBAE4;">Light Blue</span>

<span style="font-size: 200%; color: oklch(0.5742 0.2515 259.71);">Dark Blue Bright</span>

<span style="font-size: 200%; color: #5277C3;">Dark Blue</span>

User:DoggoBit/Sandbox/Colors - Revision history