/** * Redmine - project management software * Dark Mode Theme * Uses [data-theme="dark"] selector on element * Leverages Open Color palette with inverted gray scale */ /* ===== Core Variables & Body ===== */ [data-theme="dark"] body { color: var(--oc-gray-2); background-color: var(--oc-gray-9); } [data-theme="dark"] #wrapper { background: var(--oc-gray-9); } /* ===== Top Menu ===== */ [data-theme="dark"] #top-menu { background: #1a2d3d; } [data-theme="dark"] #top-menu a { color: var(--oc-gray-2); } [data-theme="dark"] #top-menu #loggedas { color: var(--oc-gray-3); } /* ===== Header ===== */ [data-theme="dark"] #header { background: linear-gradient(180deg, #2a4a6b 30%, #1e3a54); color: var(--oc-gray-2); } [data-theme="dark"] #header a { color: var(--oc-gray-2); } [data-theme="dark"] #header h1 { color: var(--oc-gray-1); } /* ===== Quick Search ===== */ [data-theme="dark"] #quick-search #q { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: var(--oc-gray-1); } /* ===== Main Menu ===== */ [data-theme="dark"] #main-menu li a { color: var(--oc-gray-2); } [data-theme="dark"] #main-menu li a:hover { background: rgba(255, 255, 255, 0.15); color: var(--oc-white); } [data-theme="dark"] #main-menu li a.selected, [data-theme="dark"] #main-menu li a.selected:hover { background: var(--oc-gray-9); color: var(--oc-gray-2); } [data-theme="dark"] #main-menu li a.new-object { background-color: rgba(255, 255, 255, 0.15); } [data-theme="dark"] #main-menu .menu-children { background-color: var(--oc-gray-8); border-color: var(--oc-gray-6); } [data-theme="dark"] #main-menu .menu-children li a { color: var(--oc-gray-2); background-color: var(--oc-gray-8); } [data-theme="dark"] #main-menu .menu-children li a:hover { color: var(--oc-white); background-color: var(--oc-blue-8); } /* ===== Main Content Area ===== */ [data-theme="dark"] #main { background-color: var(--oc-gray-9); } [data-theme="dark"] #content { background-color: var(--oc-gray-9); color: var(--oc-gray-2); } [data-theme="dark"] #content h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--oc-gray-3); } [data-theme="dark"] h4 { border-block-end-color: var(--oc-gray-6); } /* ===== Sidebar ===== */ [data-theme="dark"] #sidebar { background: var(--oc-gray-8); border-inline-start-color: var(--oc-gray-6); } [data-theme="dark"] #sidebar h3 { color: var(--oc-gray-3); } [data-theme="dark"] #sidebar hr { background: var(--oc-gray-6); } [data-theme="dark"] #sidebar a.selected { background-color: rgba(var(--oc-blue-5-rgb), 0.5); color: var(--oc-white); } [data-theme="dark"] #sidebar-switch-button svg { stroke: var(--oc-gray-4); } [data-theme="dark"] #sidebar-switch-button:hover { background-color: var(--oc-gray-7); } /* ===== Footer ===== */ [data-theme="dark"] #footer { background: var(--oc-gray-9); border-block-start-color: var(--oc-gray-6); color: var(--oc-gray-5); } /* ===== Links ===== */ [data-theme="dark"] a, [data-theme="dark"] a:link, [data-theme="dark"] a:visited { color: var(--oc-blue-4); } [data-theme="dark"] a:hover, [data-theme="dark"] a:active { color: var(--oc-red-4); } [data-theme="dark"] a.issue.closed, [data-theme="dark"] a.issue.closed:link, [data-theme="dark"] a.issue.closed:visited { color: var(--oc-gray-5); } [data-theme="dark"] a.project.closed, [data-theme="dark"] a.project.closed:link, [data-theme="dark"] a.project.closed:visited { color: var(--oc-gray-5); } [data-theme="dark"] a.user.locked, [data-theme="dark"] a.user.locked:link, [data-theme="dark"] a.user.locked:visited { color: var(--oc-gray-5); } [data-theme="dark"] a.user.user-mention { background-color: rgba(var(--oc-blue-9-rgb), 0.3); color: var(--oc-blue-3); } /* ===== Dropdowns ===== */ [data-theme="dark"] .drdn-content { background-color: var(--oc-gray-8); border-color: var(--oc-gray-6); color: var(--oc-gray-2); } [data-theme="dark"] .drdn-items > * { border-color: var(--oc-gray-8); } [data-theme="dark"] .drdn-items > *:focus { border-color: var(--oc-gray-5); } [data-theme="dark"] .drdn-items > span { color: var(--oc-gray-4); } [data-theme="dark"] .drdn-content .autocomplete:focus { border-color: var(--oc-blue-5); } [data-theme="dark"] div + .drdn-items { border-block-start-color: var(--oc-gray-6); } [data-theme="dark"] .contextual .drdn-items > a:hover, [data-theme="dark"] .journal-actions .drdn-items > a:hover { color: var(--oc-blue-4); border-color: var(--oc-blue-7); background-color: rgba(var(--oc-blue-9-rgb), 0.2); } [data-theme="dark"] #project-jump .drdn-trigger { border-color: rgba(255, 255, 255, 0.2); color: var(--oc-gray-2); background-color: rgba(255, 255, 255, 0.08); background-image: url("/assets/chevron-down-f08c7c57.svg"); } [data-theme="dark"] #project-jump .drdn-items > * { color: var(--oc-gray-2) !important; } [data-theme="dark"] #project-jump .drdn-items > a:hover { background-color: var(--oc-blue-8); color: var(--oc-white) !important; } /* ===== Tables ===== */ [data-theme="dark"] table.list, [data-theme="dark"] .table-list { border-block-start-color: var(--oc-gray-6); border-block-end-color: var(--oc-gray-6); } [data-theme="dark"] table.list th, [data-theme="dark"] .table-list-header { background-color: var(--oc-gray-8); border-block-end-color: var(--oc-gray-6); color: var(--oc-gray-3); } [data-theme="dark"] table.list td { border-block-start-color: var(--oc-gray-7); color: var(--oc-gray-2); } [data-theme="dark"] table.list:not(.odd-even) tbody tr:nth-child(odd), [data-theme="dark"] .odd { background-color: var(--oc-gray-9); } [data-theme="dark"] table.list:not(.odd-even) tbody tr:nth-child(even), [data-theme="dark"] .even { background-color: rgba(var(--oc-gray-7-rgb), 0.3); } [data-theme="dark"] .box table.list:not(.odd-even) tbody tr:nth-child(even), [data-theme="dark"] .box .even { background-color: var(--oc-gray-9); } [data-theme="dark"] table.list:not(.odd-even) tbody tr:nth-child(odd):hover, [data-theme="dark"] .odd:hover, [data-theme="dark"] table.list:not(.odd-even) tbody tr:nth-child(even):hover, [data-theme="dark"] .even:hover { background-color: rgba(var(--oc-blue-9-rgb), 0.15); } [data-theme="dark"] table.list tbody tr.group:hover { background-color: inherit; } [data-theme="dark"] tr.group td { border-block-end-color: var(--oc-gray-6); background-color: var(--oc-gray-9); } [data-theme="dark"] tr.group span.totals { color: var(--oc-gray-4); } [data-theme="dark"] tr.group span.totals .value { color: var(--oc-gray-3); } [data-theme="dark"] tr.group a.toggle-all { color: var(--oc-gray-4); } [data-theme="dark"] tr.project.closed, [data-theme="dark"] tr.project.archived { color: var(--oc-gray-5); } [data-theme="dark"] tr.project.closed a, [data-theme="dark"] tr.project.archived a { color: var(--oc-gray-5); } [data-theme="dark"] tr.user.locked, [data-theme="dark"] tr.user.registered { color: var(--oc-gray-5); } [data-theme="dark"] tr.user.locked a, [data-theme="dark"] tr.user.registered a { color: var(--oc-gray-5); } [data-theme="dark"] table.issues td.block_column { color: var(--oc-gray-4); } [data-theme="dark"] table.issue-report tr.total, [data-theme="dark"] table.issue-report-detailed tr.total { border-block-start-color: var(--oc-gray-6); } [data-theme="dark"] table#time-report tbody tr.subtotal { color: var(--oc-gray-4); } [data-theme="dark"] table#time-report tbody tr.subtotal td.hours { color: var(--oc-gray-4); } [data-theme="dark"] table#time-report tbody tr.total { background-color: var(--oc-gray-8); border-block-start-color: var(--oc-gray-6); } [data-theme="dark"] table.permissions td.role { color: var(--oc-gray-4); } [data-theme="dark"] tr.version.closed, [data-theme="dark"] tr.version.closed a { color: var(--oc-gray-5); } [data-theme="dark"] table.list tr.overdue:not(.context-menu-selection) td.due_date { color: var(--oc-red-4); } /* ===== Sort ===== */ [data-theme="dark"] a.sort { color: var(--oc-gray-2); } [data-theme="dark"] th[role=columnheader]:not(.no-sort):after { border-color: var(--oc-gray-3) transparent; } /* ===== Forms ===== */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] button { color: var(--oc-gray-2); background-color: var(--oc-gray-8); border-color: var(--oc-gray-6); } [data-theme="dark"] select { background-color: var(--oc-gray-8); background-image: url("/assets/chevron-down-f08c7c57.svg"); } [data-theme="dark"] select option { background-color: var(--oc-gray-8); color: var(--oc-gray-2); } [data-theme="dark"] select[multiple=multiple] { background: var(--oc-gray-8); } [data-theme="dark"] input[type="submit"], [data-theme="dark"] button[type="submit"] { background-color: var(--oc-gray-7); color: var(--oc-gray-1); border-color: var(--oc-gray-6); } [data-theme="dark"] input[type="submit"]:hover, [data-theme="dark"] button[type="submit"]:hover { background-color: var(--oc-gray-6); } [data-theme="dark"] input:disabled, [data-theme="dark"] select:disabled, [data-theme="dark"] textarea:disabled { color: var(--oc-gray-5); background-color: var(--oc-gray-8); } [data-theme="dark"] input[type="text"]:focus, [data-theme="dark"] input[type="text"]:active, [data-theme="dark"] input[type="password"]:focus, [data-theme="dark"] input[type="password"]:active, [data-theme="dark"] input[type="date"]:focus, [data-theme="dark"] input[type="date"]:active, [data-theme="dark"] input[type="number"]:focus, [data-theme="dark"] input[type="number"]:active, [data-theme="dark"] select:focus, [data-theme="dark"] select:active, [data-theme="dark"] textarea:focus, [data-theme="dark"] textarea:active { border-color: var(--oc-blue-5); } [data-theme="dark"] fieldset { border-color: var(--oc-gray-6); } [data-theme="dark"] legend { color: var(--oc-gray-2); } [data-theme="dark"] hr { background: var(--oc-gray-6); } [data-theme="dark"] blockquote { border-inline-start-color: var(--oc-gray-6); } [data-theme="dark"] abbr, [data-theme="dark"] span.field-description[title] { border-block-end-color: var(--oc-gray-5); } [data-theme="dark"] .check_box_group { background: var(--oc-gray-8); border-color: var(--oc-gray-6); } [data-theme="dark"] .check_box_group.bool_cf { background: inherit; } [data-theme="dark"] input.autocomplete { background-color: var(--oc-gray-8); } [data-theme="dark"] .attachments_fields input.filename, [data-theme="dark"] #existing-attachments .filename { color: var(--oc-gray-3); } /* ===== Login Form ===== */ [data-theme="dark"] #login-form { background-color: var(--oc-gray-8); border: 1px solid var(--oc-gray-6); } /* ===== Box ===== */ [data-theme="dark"] .box { background-color: var(--oc-gray-8); color: var(--oc-gray-3); border-color: var(--oc-gray-6); } /* ===== Issue Detail ===== */ [data-theme="dark"] div.issue { background: rgba(var(--oc-yellow-9-rgb), 0.1); color: var(--oc-gray-2); } [data-theme="dark"] div.issue div.subject p { color: var(--oc-gray-4); } [data-theme="dark"] div.issue .next-prev-links { color: var(--oc-gray-4); } [data-theme="dark"] div.issue.overdue .due-date .value { color: var(--oc-red-4); } [data-theme="dark"] div#sticky-issue-header { background-color: var(--oc-gray-9); border-block-end-color: var(--oc-gray-6); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); color: var(--oc-gray-2); } /* ===== Modal ===== */ [data-theme="dark"] div.modal { background: var(--oc-gray-8); color: var(--oc-gray-2); } /* ===== Flash & Error Messages ===== */ [data-theme="dark"] div.flash.error, [data-theme="dark"] #errorExplanation { background-color: rgba(var(--oc-red-9-rgb), 0.15); border-color: var(--oc-red-8); color: var(--oc-red-3); } [data-theme="dark"] div.flash.error svg.icon-svg, [data-theme="dark"] #errorExplanation svg.icon-svg { stroke: var(--oc-red-4); } [data-theme="dark"] div.flash.notice { background-color: rgba(var(--oc-green-9-rgb), 0.15); border-color: var(--oc-green-8); color: var(--oc-green-3); } [data-theme="dark"] div.flash.notice svg.icon-svg { stroke: var(--oc-green-4); } [data-theme="dark"] div.flash.warning, [data-theme="dark"] .conflict { background-color: rgba(var(--oc-yellow-9-rgb), 0.15); border-color: var(--oc-yellow-8); color: var(--oc-yellow-3); } [data-theme="dark"] div.flash.warning svg.icon-svg, [data-theme="dark"] .conflict svg.icon-svg { stroke: var(--oc-yellow-4); } [data-theme="dark"] .nodata, [data-theme="dark"] .warning { background-color: rgba(var(--oc-yellow-9-rgb), 0.15); border-color: var(--oc-yellow-8); color: var(--oc-yellow-3); } /* ===== CommonMark Alerts ===== */ [data-theme="dark"] .markdown-alert-tip .markdown-alert-title { color: var(--oc-green-4); } [data-theme="dark"] .markdown-alert-tip .markdown-alert-title svg { stroke: var(--oc-green-4); } [data-theme="dark"] .markdown-alert-important .markdown-alert-title { color: var(--oc-grape-4); } [data-theme="dark"] .markdown-alert-important .markdown-alert-title svg { stroke: var(--oc-grape-4); } [data-theme="dark"] .markdown-alert-caution .markdown-alert-title { color: var(--oc-yellow-4); } [data-theme="dark"] .markdown-alert-caution .markdown-alert-title svg { stroke: var(--oc-yellow-4); } [data-theme="dark"] .markdown-alert-warning .markdown-alert-title { color: var(--oc-orange-4); } [data-theme="dark"] .markdown-alert-warning .markdown-alert-title svg { stroke: var(--oc-orange-4); } [data-theme="dark"] .markdown-alert-note .markdown-alert-title { color: var(--oc-indigo-4); } [data-theme="dark"] .markdown-alert-note .markdown-alert-title svg { stroke: var(--oc-indigo-4); } /* ===== Highlight ===== */ [data-theme="dark"] .highlight { background-color: rgba(var(--oc-yellow-9-rgb), 0.25); } [data-theme="dark"] .highlight.token-1 { background-color: rgba(var(--oc-red-9-rgb), 0.25); } [data-theme="dark"] .highlight.token-2 { background-color: rgba(var(--oc-green-9-rgb), 0.25); } [data-theme="dark"] .highlight.token-3 { background-color: rgba(var(--oc-violet-9-rgb), 0.2); } /* ===== Pagination ===== */ [data-theme="dark"] span.pagination { color: var(--oc-gray-4); } [data-theme="dark"] .pagination ul.pages li { border-color: var(--oc-gray-6); } [data-theme="dark"] .pagination ul.pages li.current { background-color: var(--oc-blue-7); border-color: var(--oc-blue-7); color: white; } [data-theme="dark"] .pagination ul.pages li.page:hover { background-color: var(--oc-gray-7); } [data-theme="dark"] .pagination ul.pages li.page a:hover, [data-theme="dark"] .pagination ul.pages li.page a:active { color: var(--oc-blue-4); } /* ===== Tabs ===== */ [data-theme="dark"] #content .tabs ul { border-block-end-color: var(--oc-gray-6); } [data-theme="dark"] #content .tabs ul li a { border-color: var(--oc-gray-6); border-block-end-color: var(--oc-gray-6); color: var(--oc-gray-4); } [data-theme="dark"] #content .tabs ul li a:hover { color: var(--oc-gray-3); } [data-theme="dark"] #content .tabs ul li a.selected { background-color: var(--oc-gray-9); border-color: var(--oc-gray-6); border-block-end-color: var(--oc-gray-9); color: var(--oc-gray-2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } [data-theme="dark"] #content .tabs ul li a.selected:hover { background-color: var(--oc-gray-9); } [data-theme="dark"] div.tabs-buttons { background: var(--oc-gray-9); border-block-end-color: var(--oc-gray-6); } [data-theme="dark"] button.tab-left, [data-theme="dark"] button.tab-right { border-color: var(--oc-gray-6); border-block-end-color: var(--oc-gray-6); background-color: var(--oc-gray-8); } [data-theme="dark"] button.tab-left:hover, [data-theme="dark"] button.tab-right:hover { background-color: var(--oc-gray-7); } [data-theme="dark"] button.tab-left svg.icon-svg, [data-theme="dark"] button.tab-right svg.icon-svg { stroke: var(--oc-gray-4); } [data-theme="dark"] button.tab-left.disabled, [data-theme="dark"] button.tab-right.disabled { background-color: var(--oc-gray-7); } /* ===== Tooltips ===== */ [data-theme="dark"] div.tooltip:hover span.tip { background-color: var(--oc-gray-8); border-color: var(--oc-gray-5); color: var(--oc-gray-2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .tooltip span.tip a { color: var(--oc-blue-4) !important; } [data-theme="dark"] .ui-tooltip { background: var(--oc-gray-7); color: var(--oc-gray-1); } /* ===== Wiki ===== */ [data-theme="dark"] .wiki h6 { color: var(--oc-gray-4); } [data-theme="dark"] div.wiki table, [data-theme="dark"] div.wiki td, [data-theme="dark"] div.wiki th { border-color: var(--oc-gray-6); } [data-theme="dark"] div.wiki a.new { color: var(--oc-red-4); } [data-theme="dark"] div.wiki pre { background-color: var(--oc-gray-8); border-color: var(--oc-gray-6); } [data-theme="dark"] div.wiki pre .syntaxhl { background: var(--oc-gray-8); } [data-theme="dark"] div.wiki *:not(pre) > code, [data-theme="dark"] div.wiki > code { background: rgba(255, 255, 255, 0.1); } [data-theme="dark"] div.wiki ul.toc { background-color: rgba(var(--oc-yellow-9-rgb), 0.1); border-color: var(--oc-gray-6); } [data-theme="dark"] div.wiki ul.toc > li:first-child { color: var(--oc-gray-3); } [data-theme="dark"] div.wiki ul.toc a { color: var(--oc-gray-3); } [data-theme="dark"] div.wiki ul.toc a:hover { color: var(--oc-red-4); } [data-theme="dark"] div.wiki a:target + h1, [data-theme="dark"] div.wiki a:target + h2, [data-theme="dark"] div.wiki a:target + h3, [data-theme="dark"] div.wiki a:target + h4, [data-theme="dark"] div.wiki a:target + h5, [data-theme="dark"] div.wiki a:target + h6 { background-color: rgba(var(--oc-blue-9-rgb), 0.2); } [data-theme="dark"] a.wiki-anchor:hover { color: var(--oc-gray-5) !important; } [data-theme="dark"] h1:hover a.wiki-anchor, [data-theme="dark"] h2:hover a.wiki-anchor, [data-theme="dark"] h3:hover a.wiki-anchor, [data-theme="dark"] h4:hover a.wiki-anchor, [data-theme="dark"] h5:hover a.wiki-anchor, [data-theme="dark"] h6:hover a.wiki-anchor { color: var(--oc-gray-5); } [data-theme="dark"] .wiki-update-info { color: var(--oc-gray-4); } [data-theme="dark"] div.pre-wrapper a.copy-pre-content-link { background: var(--oc-gray-7); border-color: var(--oc-gray-5); color: var(--oc-gray-3); } /* ===== Diff ===== */ [data-theme="dark"] .diff_out { background: rgba(var(--oc-red-9-rgb), 0.2); } [data-theme="dark"] .diff_out span { background: rgba(var(--oc-red-9-rgb), 0.35); } [data-theme="dark"] .diff_in { background: rgba(var(--oc-green-9-rgb), 0.2); } [data-theme="dark"] .diff_in span { background: rgba(var(--oc-green-9-rgb), 0.35); } [data-theme="dark"] .text-diff { background-color: var(--oc-gray-8); color: var(--oc-gray-3); border-color: var(--oc-gray-6); } /* ===== Journals / History ===== */ [data-theme="dark"] .journals h4.journal-header { background-color: var(--oc-gray-8); } [data-theme="dark"] .journals h4.journal-header .update-info { color: var(--oc-gray-4); } [data-theme="dark"] .journals div:target h4.journal-header { background-color: rgba(var(--oc-blue-9-rgb), 0.2); } [data-theme="dark"] .journals .private-notes { border-inline-start-color: var(--oc-red-6); } [data-theme="dark"] .journals .journal-meta .journal-link { color: var(--oc-gray-4); } [data-theme="dark"] .journals .journal-details, [data-theme="dark"] ul.revision-info { color: var(--oc-gray-4); } [data-theme="dark"] .journals .journal-details a, [data-theme="dark"] ul.revision-info a { color: var(--oc-blue-4); } [data-theme="dark"] .journals .journal-details a:hover, [data-theme="dark"] ul.revision-info a:hover { color: var(--oc-red-4); } /* ===== Activity ===== */ [data-theme="dark"] div#activity h3 { background-color: var(--oc-gray-8); } [data-theme="dark"] div#activity dt { border-block-start-color: var(--oc-gray-7); } [data-theme="dark"] div#activity dt .time { color: var(--oc-gray-4); } [data-theme="dark"] div#activity dd span.description, [data-theme="dark"] #search-results dd span.description { color: var(--oc-gray-4); } [data-theme="dark"] div#activity dt.me .time { border-block-end-color: var(--oc-gray-5); } /* ===== Progress Bar ===== */ [data-theme="dark"] table.progress td.todo { background: var(--oc-gray-7) none repeat scroll 0%; } [data-theme="dark"] p.progress-info { color: var(--oc-gray-4); } /* ===== Calendar ===== */ [data-theme="dark"] ul.cal { border-color: var(--oc-gray-6); } [data-theme="dark"] .cal .calhead { background-color: var(--oc-gray-8); } [data-theme="dark"] .cal .week-number { background-color: var(--oc-gray-8); } [data-theme="dark"] .cal .calbody { border-color: var(--oc-gray-6); } [data-theme="dark"] .cal .calbody.this-month { background-color: var(--oc-gray-9); } [data-theme="dark"] .cal .calbody.other-month { background-color: var(--oc-gray-8); } [data-theme="dark"] .cal .calbody.other-month p.day-num { color: var(--oc-gray-5); } [data-theme="dark"] .cal .calbody.nwday:not(.other-month) { background-color: var(--oc-gray-8); } /* ===== My Page Blocks ===== */ [data-theme="dark"] .mypage-box { border-color: var(--oc-gray-6); color: var(--oc-gray-3); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .block-receiver { border-color: var(--oc-gray-9); } [data-theme="dark"] .dragging .block-receiver { border-color: var(--oc-gray-5); } /* ===== Badges ===== */ [data-theme="dark"] .badge-status-open { color: var(--oc-blue-4); border-color: var(--oc-blue-4); } [data-theme="dark"] .badge-status-locked { color: var(--oc-gray-4); border-color: var(--oc-gray-4); } [data-theme="dark"] .badge-status-closed { color: var(--oc-green-4); border-color: var(--oc-green-4); } [data-theme="dark"] .badge-issues-count { background: var(--oc-gray-7); } /* ===== Context Menu ===== */ [data-theme="dark"] #context-menu ul { background: var(--oc-gray-8); border-color: var(--oc-gray-6); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } [data-theme="dark"] #context-menu li { border-color: var(--oc-gray-8); } [data-theme="dark"] #context-menu a { color: var(--oc-gray-2); } [data-theme="dark"] #context-menu a.disabled, [data-theme="dark"] #context-menu a.disabled:hover { color: var(--oc-gray-5); } [data-theme="dark"] #context-menu li:hover { border-color: var(--oc-blue-7); background-color: rgba(var(--oc-blue-9-rgb), 0.2); } [data-theme="dark"] #context-menu a:hover { color: var(--oc-blue-4); } /* ===== Sample Data ===== */ [data-theme="dark"] .sample-data { border-color: var(--oc-gray-6); background-color: var(--oc-gray-8); } [data-theme="dark"] .sample-data td { border-color: var(--oc-gray-6); } /* ===== Ajax Indicator ===== */ [data-theme="dark"] #ajax-indicator { background-color: var(--oc-gray-7); border-color: var(--oc-gray-5); color: var(--oc-gray-2); } /* ===== Thumbnails ===== */ [data-theme="dark"] div.thumbnail { background: var(--oc-gray-8); border-color: var(--oc-gray-6); } /* ===== Attachments ===== */ [data-theme="dark"] div.attachments span.author { color: var(--oc-gray-4); } [data-theme="dark"] div.fileover, [data-theme="dark"] p.custom-field-filedroplistner.fileover { background-color: rgba(var(--oc-violet-9-rgb), 0.15); } /* ===== Info / Misc ===== */ [data-theme="dark"] em.info { color: var(--oc-gray-4); } [data-theme="dark"] p.other-formats { color: var(--oc-gray-4); } [data-theme="dark"] ul.properties { color: var(--oc-gray-4); } [data-theme="dark"] span.required { color: var(--oc-red-4); } [data-theme="dark"] .tabular label.error { color: var(--oc-red-4); } [data-theme="dark"] .tabular label.error + *:not(#issue_description_and_toolbar), [data-theme="dark"] .tabular label.error + span#issue_description_and_toolbar div.jstBlock { border-color: var(--oc-red-6); } [data-theme="dark"] .decoration-red, [data-theme="dark"] a.decoration-red { color: var(--oc-red-4) !important; } [data-theme="dark"] #progress-label { color: var(--oc-gray-3); text-shadow: 1px 1px 0 var(--oc-gray-9); } /* ===== Contextual ===== */ [data-theme="dark"] .contextual { color: var(--oc-gray-3); } /* ===== SVG Icons ===== */ [data-theme="dark"] svg.icon-svg { stroke: var(--oc-gray-4); } [data-theme="dark"] svg.icon-svg-filled { fill: var(--oc-gray-4); } [data-theme="dark"] a.icon .icon-svg, [data-theme="dark"] a.icon-only .icon-svg, [data-theme="dark"] span.icon-actions .icon-svg { stroke: var(--oc-blue-4); } [data-theme="dark"] a.icon:hover .icon-svg, [data-theme="dark"] a.icon-only:hover .icon-svg, [data-theme="dark"] span.icon-actions:hover .icon-svg { stroke: var(--oc-red-4); } [data-theme="dark"] a.icon .icon-svg-filled, [data-theme="dark"] a.icon-only .icon-svg-filled { fill: var(--oc-blue-4); } [data-theme="dark"] a.icon:hover .icon-svg-filled, [data-theme="dark"] a.icon-only:hover .icon-svg-filled { fill: var(--oc-red-4); } [data-theme="dark"] .icon-ok svg.icon-svg { stroke: var(--oc-green-5); } [data-theme="dark"] .icon-error svg.icon-svg { stroke: var(--oc-red-5); } [data-theme="dark"] .icon-warning svg.icon-svg { stroke: var(--oc-yellow-5); } /* ===== Reactions ===== */ [data-theme="dark"] .reaction-button.readonly .icon-svg { stroke: var(--oc-gray-5); } [data-theme="dark"] .reaction-button.readonly .icon-label { color: var(--oc-gray-5); } /* ===== jQuery UI / Autocomplete ===== */ [data-theme="dark"] .ui-autocomplete, [data-theme="dark"] .ui-menu { border-color: var(--oc-gray-6); background: var(--oc-gray-8); } [data-theme="dark"] .ui-autocomplete .ui-menu-item > div, [data-theme="dark"] .ui-menu .ui-menu-item > div { color: var(--oc-gray-2); } [data-theme="dark"] .ui-state-active, [data-theme="dark"] .ui-widget-content .ui-state-active, [data-theme="dark"] .ui-widget-header .ui-state-active { border-color: var(--oc-blue-7); background: var(--oc-blue-8); } /* ===== Tribute (mentions) ===== */ [data-theme="dark"] .tribute-container ul { background-color: var(--oc-gray-8); border-color: var(--oc-gray-6); } [data-theme="dark"] .tribute-container li.highlight { background-color: var(--oc-blue-8); color: var(--oc-white); } /* ===== Workflow ===== */ [data-theme="dark"] table.transitions td.enabled { background: rgba(var(--oc-green-9-rgb), 0.3); } [data-theme="dark"] table.fields_permissions td.readonly { background: var(--oc-gray-6); } [data-theme="dark"] table.fields_permissions td.required { background: rgba(var(--oc-red-9-rgb), 0.3); } /* ===== Projects Index ===== */ [data-theme="dark"] #projects-index ul.projects li.root { border-color: var(--oc-gray-6); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } [data-theme="dark"] #projects-index li.root ul.projects { border-inline-start-color: var(--oc-gray-6); } [data-theme="dark"] ul.projects li.root div.archived, [data-theme="dark"] ul.projects li.child div.archived { color: var(--oc-gray-5); } /* ===== Version Summary ===== */ [data-theme="dark"] div#version-summary { background-color: var(--oc-gray-9); } /* ===== Search Results ===== */ [data-theme="dark"] #search-results dd .description { color: var(--oc-gray-4); } /* ===== Filecontent ===== */ [data-theme="dark"] .filecontent.wiki { border-color: var(--oc-gray-6); } /* ===== Query Form ===== */ [data-theme="dark"] .query-totals { color: var(--oc-gray-4); } [data-theme="dark"] .query-totals .value { color: var(--oc-gray-2); } /* ===== Rouge / Syntax Highlighting (Dark Theme) ===== */ [data-theme="dark"] .syntaxhl { background: var(--oc-gray-8); } [data-theme="dark"] .syntaxhl .hll { background-color: rgba(var(--oc-yellow-9-rgb), 0.2); } [data-theme="dark"] .syntaxhl .c { color: #6a9955; } /* Comment */ [data-theme="dark"] .syntaxhl .err { color: #f48771; background-color: transparent; } /* Error */ [data-theme="dark"] .syntaxhl .k { color: #569cd6; font-weight: bold; } /* Keyword */ [data-theme="dark"] .syntaxhl .o { color: var(--oc-gray-3); } /* Operator */ [data-theme="dark"] .syntaxhl .ch { color: #6a9955; } /* Comment.Hashbang */ [data-theme="dark"] .syntaxhl .cm { color: #6a9955; } /* Comment.Multiline */ [data-theme="dark"] .syntaxhl .cp { color: #9cdcfe; } /* Comment.Preproc */ [data-theme="dark"] .syntaxhl .cpf { color: #6a9955; } /* Comment.PreprocFile */ [data-theme="dark"] .syntaxhl .c1 { color: #6a9955; } /* Comment.Single */ [data-theme="dark"] .syntaxhl .cs { color: #6a9955; font-weight: bold; } /* Comment.Special */ [data-theme="dark"] .syntaxhl .gd { color: #f48771; } /* Generic.Deleted */ [data-theme="dark"] .syntaxhl .gi { color: #89d185; } /* Generic.Inserted */ [data-theme="dark"] .syntaxhl .go { color: #808080; } /* Generic.Output */ [data-theme="dark"] .syntaxhl .gp { color: #dcdcaa; font-weight: bold; } /* Generic.Prompt */ [data-theme="dark"] .syntaxhl .gh { color: #569cd6; font-weight: bold; } /* Generic.Heading */ [data-theme="dark"] .syntaxhl .gu { color: #c586c0; font-weight: bold; } /* Generic.Subheading */ [data-theme="dark"] .syntaxhl .gt { color: #569cd6; } /* Generic.Traceback */ [data-theme="dark"] .syntaxhl .kc { color: #569cd6; font-weight: bold; } /* Keyword.Constant */ [data-theme="dark"] .syntaxhl .kd { color: #569cd6; font-weight: bold; } /* Keyword.Declaration */ [data-theme="dark"] .syntaxhl .kn { color: #c586c0; font-weight: bold; } /* Keyword.Namespace */ [data-theme="dark"] .syntaxhl .kp { color: #569cd6; font-weight: bold; } /* Keyword.Pseudo */ [data-theme="dark"] .syntaxhl .kr { color: #569cd6; font-weight: bold; } /* Keyword.Reserved */ [data-theme="dark"] .syntaxhl .kt { color: #4ec9b0; font-weight: bold; } /* Keyword.Type */ [data-theme="dark"] .syntaxhl .m { color: #b5cea8; font-weight: bold; } /* Literal.Number */ [data-theme="dark"] .syntaxhl .s { color: #ce9178; background-color: transparent; } /* Literal.String */ [data-theme="dark"] .syntaxhl .na { color: #9cdcfe; } /* Name.Attribute */ [data-theme="dark"] .syntaxhl .nb { color: #4ec9b0; } /* Name.Builtin */ [data-theme="dark"] .syntaxhl .nc { color: #4ec9b0; font-weight: bold; } /* Name.Class */ [data-theme="dark"] .syntaxhl .no { color: #9cdcfe; font-weight: bold; } /* Name.Constant */ [data-theme="dark"] .syntaxhl .nd { color: #dcdcaa; font-weight: bold; } /* Name.Decorator */ [data-theme="dark"] .syntaxhl .ne { color: #f48771; font-weight: bold; } /* Name.Exception */ [data-theme="dark"] .syntaxhl .nf { color: #dcdcaa; font-weight: bold; } /* Name.Function */ [data-theme="dark"] .syntaxhl .nl { color: #dcdcaa; font-weight: bold; } /* Name.Label */ [data-theme="dark"] .syntaxhl .nn { color: #4ec9b0; font-weight: bold; } /* Name.Namespace */ [data-theme="dark"] .syntaxhl .nt { color: #569cd6; } /* Name.Tag */ [data-theme="dark"] .syntaxhl .nv { color: #9cdcfe; } /* Name.Variable */ [data-theme="dark"] .syntaxhl .ow { color: #c586c0; font-weight: bold; } /* Operator.Word */ [data-theme="dark"] .syntaxhl .w { color: #808080; } /* Text.Whitespace */ [data-theme="dark"] .syntaxhl .mb { color: #b5cea8; font-weight: bold; } /* Literal.Number.Bin */ [data-theme="dark"] .syntaxhl .mf { color: #b5cea8; font-weight: bold; } /* Literal.Number.Float */ [data-theme="dark"] .syntaxhl .mh { color: #b5cea8; font-weight: bold; } /* Literal.Number.Hex */ [data-theme="dark"] .syntaxhl .mi { color: #b5cea8; font-weight: bold; } /* Literal.Number.Integer */ [data-theme="dark"] .syntaxhl .mo { color: #b5cea8; font-weight: bold; } /* Literal.Number.Oct */ [data-theme="dark"] .syntaxhl .sa { color: #ce9178; background-color: transparent; } /* Literal.String.Affix */ [data-theme="dark"] .syntaxhl .sb { color: #ce9178; background-color: transparent; } /* Literal.String.Backtick */ [data-theme="dark"] .syntaxhl .sc { color: #d7ba7d; } /* Literal.String.Char */ [data-theme="dark"] .syntaxhl .dl { color: #ce9178; background-color: transparent; } /* Literal.String.Delimiter */ [data-theme="dark"] .syntaxhl .sd { color: #6a9955; } /* Literal.String.Doc */ [data-theme="dark"] .syntaxhl .s2 { color: #ce9178; background-color: transparent; } /* Literal.String.Double */ [data-theme="dark"] .syntaxhl .se { color: #d7ba7d; font-weight: bold; background-color: transparent; } /* Literal.String.Escape */ [data-theme="dark"] .syntaxhl .sh { color: #ce9178; background-color: transparent; } /* Literal.String.Heredoc */ [data-theme="dark"] .syntaxhl .si { color: #9cdcfe; background-color: transparent; } /* Literal.String.Interpol */ [data-theme="dark"] .syntaxhl .sx { color: #ce9178; background-color: transparent; } /* Literal.String.Other */ [data-theme="dark"] .syntaxhl .sr { color: #d16969; background-color: transparent; } /* Literal.String.Regex */ [data-theme="dark"] .syntaxhl .s1 { color: #ce9178; background-color: transparent; } /* Literal.String.Single */ [data-theme="dark"] .syntaxhl .ss { color: #ce9178; } /* Literal.String.Symbol */ [data-theme="dark"] .syntaxhl .bp { color: #4ec9b0; } /* Name.Builtin.Pseudo */ [data-theme="dark"] .syntaxhl .fm { color: #dcdcaa; font-weight: bold; } /* Name.Function.Magic */ [data-theme="dark"] .syntaxhl .vc { color: #9cdcfe; } /* Name.Variable.Class */ [data-theme="dark"] .syntaxhl .vg { color: #9cdcfe; font-weight: bold; } /* Name.Variable.Global */ [data-theme="dark"] .syntaxhl .vi { color: #9cdcfe; } /* Name.Variable.Instance */ [data-theme="dark"] .syntaxhl .vm { color: #9cdcfe; } /* Name.Variable.Magic */ [data-theme="dark"] .syntaxhl .il { color: #b5cea8; font-weight: bold; } /* Literal.Number.Integer.Long */ /* ===== PDF Viewer ===== */ [data-theme="dark"] #pdf-viewer { border-color: var(--oc-gray-6); background: var(--oc-gray-8); } [data-theme="dark"] #pdf-toolbar { background: var(--oc-gray-8); border-block-end-color: var(--oc-gray-6); } [data-theme="dark"] .pdf-btn { background: var(--oc-gray-7); border-color: var(--oc-gray-6); color: var(--oc-gray-3); } [data-theme="dark"] .pdf-btn:hover { background: var(--oc-gray-6); border-color: var(--oc-gray-5); color: var(--oc-gray-1); } [data-theme="dark"] .pdf-btn:active { background: var(--oc-gray-5); } [data-theme="dark"] #pdf-page-info { color: var(--oc-gray-3); } [data-theme="dark"] #pdf-page-input { background-color: var(--oc-gray-7); border-color: var(--oc-gray-5); color: var(--oc-gray-2); } [data-theme="dark"] #pdf-zoom-level { color: var(--oc-gray-3); } [data-theme="dark"] #pdf-container { background: var(--oc-gray-7); } [data-theme="dark"] #pdf-loading { color: var(--oc-gray-4); } [data-theme="dark"] #pdf-error { color: var(--oc-gray-4); } /* ===== Flyout Menu ===== */ [data-theme="dark"] .flyout-menu { background: var(--oc-gray-8); } [data-theme="dark"] .flyout-menu h3 { color: var(--oc-gray-3); } /* ===== Admin Menu ===== */ [data-theme="dark"] #admin-menu a { color: var(--oc-blue-4); } /* ===== SCM / Repository ===== */ [data-theme="dark"] tr.ui-sortable-helper { border-color: var(--oc-gray-6); } /* ===== jQuery UI Dialog ===== */ [data-theme="dark"] .ui-dialog { background: var(--oc-gray-8); border-color: var(--oc-gray-6); } [data-theme="dark"] .ui-dialog .ui-dialog-titlebar { background: var(--oc-gray-7); color: var(--oc-gray-2); } [data-theme="dark"] .ui-dialog .ui-dialog-content { color: var(--oc-gray-2); } /* ===== Tabular label error styles ===== */ [data-theme="dark"] .tabular label.error { color: var(--oc-red-4); } /* ===== JStoolbar (wiki editor) ===== */ [data-theme="dark"] .jstBlock .wiki-preview { background: var(--oc-gray-8); color: var(--oc-gray-2); } /* ===== Gantt ===== */ [data-theme="dark"] div#gantt_area .context-menu-selection { background-color: rgba(var(--oc-blue-7-rgb), 0.3) !important; } [data-theme="dark"] div#gantt_area .context-menu-selection:hover { background-color: rgba(var(--oc-blue-7-rgb), 0.3) !important; } [data-theme="dark"] div#gantt_area .context-menu-selection a { color: var(--oc-blue-4) !important; } /* ===== Scrollbar styling for webkit ===== */ [data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--oc-gray-8); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: var(--oc-gray-6); border-radius: 6px; border: 2px solid var(--oc-gray-8); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: var(--oc-gray-5); } /* ===== SVG icon filter for dark mode ===== */ /* Invert dark SVG icons that use currentColor or are embedded as images */ [data-theme="dark"] select { filter: none; } /* ===== Dark Mode Toggle Button ===== */ #dark-mode-toggle { display: inline-flex; align-items: center; cursor: pointer; background: none; border: none; padding: 2px 6px; margin-inline-start: 4px; vertical-align: middle; color: inherit; line-height: 1; border-radius: 3px; transition: background-color 0.15s ease; } #dark-mode-toggle:hover { background-color: rgba(255, 255, 255, 0.15); } #dark-mode-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #top-menu #dark-mode-toggle { color: var(--oc-white); float: inline-end; margin-inline-end: 8px; height: auto; } /* ===== Chevron SVG inversion for dark mode selects ===== */ [data-theme="dark"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } [data-theme="dark"] #project-jump .drdn-trigger { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23adb5bd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ===== Objects selection ===== */ [data-theme="dark"] .objects-selection > div, [data-theme="dark"] #user_group_ids { -webkit-column-rule-color: var(--oc-gray-6); -moz-column-rule-color: var(--oc-gray-6); } /* ===== Notifications Center ===== */ [data-theme="dark"] #notifications-trigger { color: var(--oc-gray-2); } [data-theme="dark"] #notifications-trigger:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--oc-gray-1); } [data-theme="dark"] #notifications-trigger svg { stroke: var(--oc-gray-2); } [data-theme="dark"] .notifications-badge { background: var(--oc-red-8); } [data-theme="dark"] #notifications-bell .drdn-content { background-color: var(--oc-gray-8); border-color: var(--oc-gray-6); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .notifications-header { background: var(--oc-gray-9); border-block-end-color: var(--oc-gray-6); } [data-theme="dark"] .notifications-header strong { color: var(--oc-gray-2); } [data-theme="dark"] .notifications-mark-all { color: var(--oc-blue-4); } [data-theme="dark"] .notifications-mark-all:hover { color: var(--oc-blue-3); } [data-theme="dark"] .notification-item { color: var(--oc-gray-3); border-block-end-color: var(--oc-gray-7); } [data-theme="dark"] .notification-item:hover { background-color: var(--oc-gray-7); color: var(--oc-gray-2); } [data-theme="dark"] .notification-unread { background-color: rgba(51, 154, 240, 0.08); } [data-theme="dark"] .notification-unread .notification-title { color: var(--oc-gray-1); } [data-theme="dark"] .notification-read .notification-title { color: var(--oc-gray-4); } [data-theme="dark"] .notification-read .notification-desc { color: var(--oc-gray-5); } [data-theme="dark"] .notification-title { color: var(--oc-gray-2); } [data-theme="dark"] .notification-desc { color: var(--oc-gray-4); } [data-theme="dark"] .notification-meta { color: var(--oc-gray-5); } [data-theme="dark"] .notification-time { color: var(--oc-gray-5); } [data-theme="dark"] .notification-icon svg { stroke: var(--oc-gray-4); } [data-theme="dark"] .notification-unread .notification-icon svg { stroke: var(--oc-blue-4); } [data-theme="dark"] .notification-empty { color: var(--oc-gray-5); } [data-theme="dark"] .notifications-loading { color: var(--oc-gray-5); } [data-theme="dark"] .notifications-footer { background: var(--oc-gray-9); border-block-start-color: var(--oc-gray-6); } [data-theme="dark"] .notifications-footer a { color: var(--oc-blue-4); } [data-theme="dark"] .notifications-footer a:hover { color: var(--oc-blue-3); } /* Full-page notifications - dark mode */ [data-theme="dark"] .notifications-page-item { border-block-end-color: var(--oc-gray-7); } [data-theme="dark"] .notifications-page-item:hover { background-color: var(--oc-gray-8); } [data-theme="dark"] .notifications-page-item.unread { background-color: rgba(51, 154, 240, 0.08); } [data-theme="dark"] .notifications-page-item.unread .notification-page-title a { color: var(--oc-gray-1); } [data-theme="dark"] .notification-page-title a { color: var(--oc-gray-3); } [data-theme="dark"] .notification-page-title a:hover { color: var(--oc-blue-4); } [data-theme="dark"] .notification-page-desc { color: var(--oc-gray-4); } [data-theme="dark"] .notification-page-meta { color: var(--oc-gray-5); } [data-theme="dark"] .notification-page-icon svg { stroke: var(--oc-gray-4); } [data-theme="dark"] .notifications-page-item.unread .notification-page-icon svg { stroke: var(--oc-blue-4); }