Redmine

/**

 * Redmine - project management software

 * Copyright (C) 2006-  Jean-Philippe Lang

 * This code is released under the GNU General Public License.

 */

/*

 * Dark color scheme for the default theme.

 *

 * This stylesheet is loaded after application.css with

 * media="screen and (prefers-color-scheme: dark)". It redefines the

 * semantic color tokens and the Open Color palette, so most rules in

 * application.css adapt without changes:

 *

 * - gray-0..9 are inverted (based on the GitHub dark palette)

 * - hue-0..3 become dark, tinted background colors

 * - hue-4..6 are unchanged mid tones

 * - hue-7..9 become light colors for text on dark backgrounds

 */

:root {

  color-scheme: dark;

  --color-current-marker: #4c8ed9;

  --color-top-menu-background: #12273a;

  --color-header-background: #1c3d57;

  --color-text-muted: #8b949e;

  --color-top-menu-text: #c9d1d9;

  --color-top-menu-link: #e6edf3;

  --color-header-text: #ffffff;

  --color-header-link: #f0f6fc;

  --color-background: #0d1117;

  --color-background-overlay: #161b22;

  --color-selected-background: #2c6aa0;

  --color-selected-text: #ffffff;

  --color-shadow-rgb: 1, 4, 9;

  --oc-gray-0: #161b22;

  --oc-gray-0-rgb: 22, 27, 34;

  --oc-gray-1: #1c2128;

  --oc-gray-1-rgb: 28, 33, 40;

  --oc-gray-2: #21262d;

  --oc-gray-2-rgb: 33, 38, 45;

  --oc-gray-3: #2d333b;

  --oc-gray-3-rgb: 45, 51, 59;

  --oc-gray-4: #30363d;

  --oc-gray-4-rgb: 48, 54, 61;

  --oc-gray-5: #6e7681;

  --oc-gray-5-rgb: 110, 118, 129;

  --oc-gray-6: #8b949e;

  --oc-gray-6-rgb: 139, 148, 158;

  --oc-gray-7: #adbac7;

  --oc-gray-7-rgb: 173, 186, 199;

  --oc-gray-8: #cdd9e5;

  --oc-gray-8-rgb: 205, 217, 229;

  --oc-gray-9: #e6edf3;

  --oc-gray-9-rgb: 230, 237, 243;

  --oc-red-0: #20161c;

  --oc-red-0-rgb: 32, 22, 28;

  --oc-red-1: #2e1a1f;

  --oc-red-1-rgb: 46, 26, 31;

  --oc-red-2: #411f24;

  --oc-red-2-rgb: 65, 31, 36;

  --oc-red-3: #5e272b;

  --oc-red-3-rgb: 94, 39, 43;

  --oc-red-4: #ff8787;

  --oc-red-4-rgb: 255, 135, 135;

  --oc-red-5: #ff6b6b;

  --oc-red-5-rgb: 255, 107, 107;

  --oc-red-6: #fa5252;

  --oc-red-6-rgb: 250, 82, 82;

  --oc-red-7: #ff6b6b;

  --oc-red-7-rgb: 255, 107, 107;

  --oc-red-8: #ff8787;

  --oc-red-8-rgb: 255, 135, 135;

  --oc-red-9: #ffa8a8;

  --oc-red-9-rgb: 255, 168, 168;

  --oc-pink-0: #1e151f;

  --oc-pink-0-rgb: 30, 21, 31;

  --oc-pink-1: #2b1926;

  --oc-pink-1-rgb: 43, 25, 38;

  --oc-pink-2: #3d1d2e;

  --oc-pink-2-rgb: 61, 29, 46;

  --oc-pink-3: #57243b;

  --oc-pink-3-rgb: 87, 36, 59;

  --oc-pink-4: #f783ac;

  --oc-pink-4-rgb: 247, 131, 172;

  --oc-pink-5: #f06595;

  --oc-pink-5-rgb: 240, 101, 149;

  --oc-pink-6: #e64980;

  --oc-pink-6-rgb: 230, 73, 128;

  --oc-pink-7: #f06595;

  --oc-pink-7-rgb: 240, 101, 149;

  --oc-pink-8: #f783ac;

  --oc-pink-8-rgb: 247, 131, 172;

  --oc-pink-9: #faa2c1;

  --oc-pink-9-rgb: 250, 162, 193;

  --oc-grape-0: #1b1627;

  --oc-grape-0-rgb: 27, 22, 39;

  --oc-grape-1: #261932;

  --oc-grape-1-rgb: 38, 25, 50;

  --oc-grape-2: #341e42;

  --oc-grape-2-rgb: 52, 30, 66;

  --oc-grape-3: #49255a;

  --oc-grape-3-rgb: 73, 37, 90;

  --oc-grape-4: #da77f2;

  --oc-grape-4-rgb: 218, 119, 242;

  --oc-grape-5: #cc5de8;

  --oc-grape-5-rgb: 204, 93, 232;

  --oc-grape-6: #be4bdb;

  --oc-grape-6-rgb: 190, 75, 219;

  --oc-grape-7: #cc5de8;

  --oc-grape-7-rgb: 204, 93, 232;

  --oc-grape-8: #da77f2;

  --oc-grape-8-rgb: 218, 119, 242;

  --oc-grape-9: #e599f7;

  --oc-grape-9-rgb: 229, 153, 247;

  --oc-violet-0: #161629;

  --oc-violet-0-rgb: 22, 22, 41;

  --oc-violet-1: #1c1a36;

  --oc-violet-1-rgb: 28, 26, 54;

  --oc-violet-2: #251f47;

  --oc-violet-2-rgb: 37, 31, 71;

  --oc-violet-3: #322661;

  --oc-violet-3-rgb: 50, 38, 97;

  --oc-violet-4: #9775fa;

  --oc-violet-4-rgb: 151, 117, 250;

  --oc-violet-5: #845ef7;

  --oc-violet-5-rgb: 132, 94, 247;

  --oc-violet-6: #7950f2;

  --oc-violet-6-rgb: 121, 80, 242;

  --oc-violet-7: #845ef7;

  --oc-violet-7-rgb: 132, 94, 247;

  --oc-violet-8: #9775fa;

  --oc-violet-8-rgb: 151, 117, 250;

  --oc-violet-9: #b197fc;

  --oc-violet-9-rgb: 177, 151, 252;

  --oc-indigo-0: #121829;

  --oc-indigo-0-rgb: 18, 24, 41;

  --oc-indigo-1: #161e36;

  --oc-indigo-1-rgb: 22, 30, 54;

  --oc-indigo-2: #1b2548;

  --oc-indigo-2-rgb: 27, 37, 72;

  --oc-indigo-3: #223162;

  --oc-indigo-3-rgb: 34, 49, 98;

  --oc-indigo-4: #748ffc;

  --oc-indigo-4-rgb: 116, 143, 252;

  --oc-indigo-5: #5c7cfa;

  --oc-indigo-5-rgb: 92, 124, 250;

  --oc-indigo-6: #4c6ef5;

  --oc-indigo-6-rgb: 76, 110, 245;

  --oc-indigo-7: #5c7cfa;

  --oc-indigo-7-rgb: 92, 124, 250;

  --oc-indigo-8: #748ffc;

  --oc-indigo-8-rgb: 116, 143, 252;

  --oc-indigo-9: #91a7ff;

  --oc-indigo-9-rgb: 145, 167, 255;

  --oc-blue-0: #0f1b28;

  --oc-blue-0-rgb: 15, 27, 40;

  --oc-blue-1: #102234;

  --oc-blue-1-rgb: 16, 34, 52;

  --oc-blue-2: #122c45;

  --oc-blue-2-rgb: 18, 44, 69;

  --oc-blue-3: #143a5d;

  --oc-blue-3-rgb: 20, 58, 93;

  --oc-blue-4: #4dabf7;

  --oc-blue-4-rgb: 77, 171, 247;

  --oc-blue-5: #339af0;

  --oc-blue-5-rgb: 51, 154, 240;

  --oc-blue-6: #228be6;

  --oc-blue-6-rgb: 34, 139, 230;

  --oc-blue-7: #339af0;

  --oc-blue-7-rgb: 51, 154, 240;

  --oc-blue-8: #4dabf7;

  --oc-blue-8-rgb: 77, 171, 247;

  --oc-blue-9: #74c0fc;

  --oc-blue-9-rgb: 116, 192, 252;

  --oc-cyan-0: #0e1d24;

  --oc-cyan-0-rgb: 14, 29, 36;

  --oc-cyan-1: #0e262f;

  --oc-cyan-1-rgb: 14, 38, 47;

  --oc-cyan-2: #0f333c;

  --oc-cyan-2-rgb: 15, 51, 60;

  --oc-cyan-3: #104550;

  --oc-cyan-3-rgb: 16, 69, 80;

  --oc-cyan-4: #3bc9db;

  --oc-cyan-4-rgb: 59, 201, 219;

  --oc-cyan-5: #22b8cf;

  --oc-cyan-5-rgb: 34, 184, 207;

  --oc-cyan-6: #15aabf;

  --oc-cyan-6-rgb: 21, 170, 191;

  --oc-cyan-7: #22b8cf;

  --oc-cyan-7-rgb: 34, 184, 207;

  --oc-cyan-8: #3bc9db;

  --oc-cyan-8-rgb: 59, 201, 219;

  --oc-cyan-9: #66d9e8;

  --oc-cyan-9-rgb: 102, 217, 232;

  --oc-teal-0: #0d1e20;

  --oc-teal-0-rgb: 13, 30, 32;

  --oc-teal-1: #0e2827;

  --oc-teal-1-rgb: 14, 40, 39;

  --oc-teal-2: #0e362f;

  --oc-teal-2-rgb: 14, 54, 47;

  --oc-teal-3: #0f4a3d;

  --oc-teal-3-rgb: 15, 74, 61;

  --oc-teal-4: #38d9a9;

  --oc-teal-4-rgb: 56, 217, 169;

  --oc-teal-5: #20c997;

  --oc-teal-5-rgb: 32, 201, 151;

  --oc-teal-6: #12b886;

  --oc-teal-6-rgb: 18, 184, 134;

  --oc-teal-7: #20c997;

  --oc-teal-7-rgb: 32, 201, 151;

  --oc-teal-8: #38d9a9;

  --oc-teal-8-rgb: 56, 217, 169;

  --oc-teal-9: #63e6be;

  --oc-teal-9-rgb: 99, 230, 190;

  --oc-green-0: #111f1c;

  --oc-green-0-rgb: 17, 31, 28;

  --oc-green-1: #142a20;

  --oc-green-1-rgb: 20, 42, 32;

  --oc-green-2: #183825;

  --oc-green-2-rgb: 24, 56, 37;

  --oc-green-3: #1e4c2d;

  --oc-green-3-rgb: 30, 76, 45;

  --oc-green-4: #69db7c;

  --oc-green-4-rgb: 105, 219, 124;

  --oc-green-5: #51cf66;

  --oc-green-5-rgb: 81, 207, 102;

  --oc-green-6: #40c057;

  --oc-green-6-rgb: 64, 192, 87;

  --oc-green-7: #51cf66;

  --oc-green-7-rgb: 81, 207, 102;

  --oc-green-8: #69db7c;

  --oc-green-8-rgb: 105, 219, 124;

  --oc-green-9: #8ce99a;

  --oc-green-9-rgb: 140, 233, 154;

  --oc-lime-0: #162018;

  --oc-lime-0-rgb: 22, 32, 24;

  --oc-lime-1: #1d2b18;

  --oc-lime-1-rgb: 29, 43, 24;

  --oc-lime-2: #273919;

  --oc-lime-2-rgb: 39, 57, 25;

  --oc-lime-3: #355019;

  --oc-lime-3-rgb: 53, 80, 25;

  --oc-lime-4: #a9e34b;

  --oc-lime-4-rgb: 169, 227, 75;

  --oc-lime-5: #94d82d;

  --oc-lime-5-rgb: 148, 216, 45;

  --oc-lime-6: #82c91e;

  --oc-lime-6-rgb: 130, 201, 30;

  --oc-lime-7: #94d82d;

  --oc-lime-7-rgb: 148, 216, 45;

  --oc-lime-8: #a9e34b;

  --oc-lime-8-rgb: 169, 227, 75;

  --oc-lime-9: #c0eb75;

  --oc-lime-9-rgb: 192, 235, 117;

  --oc-yellow-0: #201e16;

  --oc-yellow-0-rgb: 32, 30, 22;

  --oc-yellow-1: #2e2714;

  --oc-yellow-1-rgb: 46, 39, 20;

  --oc-yellow-2: #413413;

  --oc-yellow-2-rgb: 65, 52, 19;

  --oc-yellow-3: #5e4711;

  --oc-yellow-3-rgb: 94, 71, 17;

  --oc-yellow-4: #ffd43b;

  --oc-yellow-4-rgb: 255, 212, 59;

  --oc-yellow-5: #fcc419;

  --oc-yellow-5-rgb: 252, 196, 25;

  --oc-yellow-6: #fab005;

  --oc-yellow-6-rgb: 250, 176, 5;

  --oc-yellow-7: #fcc419;

  --oc-yellow-7-rgb: 252, 196, 25;

  --oc-yellow-8: #ffd43b;

  --oc-yellow-8-rgb: 255, 212, 59;

  --oc-yellow-9: #ffe066;

  --oc-yellow-9-rgb: 255, 224, 102;

  --oc-orange-0: #201a17;

  --oc-orange-0-rgb: 32, 26, 23;

  --oc-orange-1: #2f2017;

  --oc-orange-1-rgb: 47, 32, 23;

  --oc-orange-2: #422916;

  --oc-orange-2-rgb: 66, 41, 22;

  --oc-orange-3: #5f3616;

  --oc-orange-3-rgb: 95, 54, 22;

  --oc-orange-4: #ffa94d;

  --oc-orange-4-rgb: 255, 169, 77;

  --oc-orange-5: #ff922b;

  --oc-orange-5-rgb: 255, 146, 43;

  --oc-orange-6: #fd7e14;

  --oc-orange-6-rgb: 253, 126, 20;

  --oc-orange-7: #ff922b;

  --oc-orange-7-rgb: 255, 146, 43;

  --oc-orange-8: #ffa94d;

  --oc-orange-8-rgb: 255, 169, 77;

  --oc-orange-9: #ffc078;

  --oc-orange-9-rgb: 255, 192, 120;

}

/* Colored chips keep the colors of the light scheme */

.avatar-color-0 { background-color: #f03e3e; }

.avatar-color-1 { background-color: #fd7e14; }

.avatar-color-2 { background-color: #ffd43b; }

.avatar-color-3 { background-color: #37b24d; }

.avatar-color-4 { background-color: #15aabf; }

.avatar-color-5 { background-color: #1c7ed6; }

.avatar-color-6 { background-color: #ae3ec9; }

.avatar-color-7 { background-color: #f06595; }

div.avatar-with-child > .avatar:nth-child(2) { border-color: var(--color-background); }

.badge-private { background: #e03131; border-color: #e03131; }

li.change.change-A svg.icon-svg { fill: #37b24d; }

li.change.change-M svg.icon-svg { fill: #f59f00; }

li.change.change-C svg.icon-svg { fill: #1098ad; }

li.change.change-R svg.icon-svg { fill: #ae3ec9; }

li.change.change-D svg.icon-svg { fill: #f03e3e; }

.tooltip:hover { color: var(--oc-gray-9); }

/* Neutral backgrounds instead of the tinted yellow and orange */

div.issue, #login-form, div.wiki ul.toc {

  background: var(--oc-gray-0);

  border: 1px solid var(--oc-gray-4);

}

div.wiki table, div.wiki td, div.wiki th { border-color: var(--oc-gray-4); }

/*

 * The wiki toolbar icons are SVG background images with a fixed dark stroke.

 * Render the buttons with light colors and invert them. jstoolbar.css is

 * loaded after this stylesheet, hence the more specific selectors.

 */

.jstBlock .jstElements button {

  filter: invert(1) hue-rotate(180deg);

  background-color: #f8f9fa;

  border-color: #ced4da;

  color: #212529;

}

.jstBlock .jstElements .jstb_pre::before { color: #212529; }

.jstBlock .jstElements button:hover {

  background-color: #dee2e6;

  border-color: #adb5bd;

}

/* Distinguish buttons from text fields */

input[type="submit"], button[type="submit"], input[type="button"] { background-color: var(--oc-gray-1); }

/* jQuery UI */

.ui-widget-content {

  background: var(--color-background-overlay);

  border-color: var(--oc-gray-4);

  color: var(--oc-gray-9);

}

.ui-widget.ui-widget-content { border-color: var(--oc-gray-4); }

.ui-widget-header {

  background: var(--oc-gray-2);

  border-color: var(--oc-gray-4);

  color: var(--oc-gray-9);

}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button {

  background: var(--oc-gray-1);

  border-color: var(--oc-gray-4);

  color: var(--oc-gray-8);

}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: var(--oc-gray-8); }

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover,

.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus,

.ui-button:hover, .ui-button:focus {

  background: var(--oc-gray-3);

  border-color: var(--oc-gray-5);

  color: var(--oc-gray-9);

}

.ui-state-hover a, .ui-state-hover a:hover, .ui-state-focus a, .ui-state-focus a:hover { color: var(--oc-gray-9); }

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {

  background: var(--oc-yellow-1);

  border-color: var(--oc-yellow-3);

  color: var(--oc-yellow-9);

}

.ui-state-highlight a, .ui-widget-content .ui-state-highlight a { color: var(--oc-yellow-9); }

.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {

  background: var(--oc-red-1);

  border-color: var(--oc-red-3);

  color: var(--oc-red-9);

}

.ui-icon, .ui-widget-content .ui-icon, .ui-widget-header .ui-icon,

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-button .ui-icon { filter: invert(1); }

.ui-state-active .ui-icon { filter: none; }

      const darkMode = getComputedStyle(document.documentElement).colorScheme === 'dark';

      mermaid.initialize({ startOnLoad: false, securityLevel: 'strict', suppressErrorRendering: true,

                           theme: darkMode ? 'dark' : 'default' });

<% unless current_theme %>

<meta name="color-scheme" content="light dark" />

<%= stylesheet_link_tag 'dark', :media => 'screen and (prefers-color-scheme: dark)' %>

<% end %>

  def test_dark_css_with_default_theme

    Setting.ui_theme = ''

    get '/'

    assert_response :success

    assert_select 'meta[name=color-scheme][content=?]', 'light dark'

    assert_select "link[rel=stylesheet][media=?]:match('href', ?)",

                  'screen and (prefers-color-scheme: dark)', %r{/assets/dark-\w+\.css}

  end

  def test_no_dark_css_with_theme

    get '/'

    assert_response :success

    assert_select 'meta[name=color-scheme]', 0

    assert_select "link[rel=stylesheet]:match('href', ?)", %r{/dark-\w+\.css}, 0

  end