/* * Dark theme overrides for RMS2015. * Activated when is set (see sys_css.php, header.php). * The attribute is set from the cookie "rms_theme" by a small inline script * in sys_css.php, and toggled by the button in header.php. * Wrapped in @media screen so printed pages keep the normal light colours. */ @media screen { /* ---- theme toggle button icon (moon in light mode, sun in dark mode) ---- */ html[data-theme="dark"] .rms-theme-icon-light { display: none; } html:not([data-theme="dark"]) .rms-theme-icon-dark { display: none; } #rms_theme_btn { font-size: 18px; line-height: 1; } /* ---- base ---- */ html[data-theme="dark"] { color: #d8d8d8; background-color: #1e1e1e; color-scheme: dark; } html[data-theme="dark"] body, html[data-theme="dark"] .content-wrapper, html[data-theme="dark"] .right-side, html[data-theme="dark"] .content, html[data-theme="dark"] .main-footer { background-color: #1e1e1e; color: #d8d8d8; } html[data-theme="dark"] .main-footer { border-top-color: #333; } /* The skin paints a white doodle/banner image (bg.png / bg-rcheva.png) behind the content; drop it in dark mode so no bright strip shows behind the page header. */ html[data-theme="dark"] body, html[data-theme="dark"] .content-wrapper, html[data-theme="dark"] .right-side, html[data-theme="dark"] .main-footer, html[data-theme="dark"] .layout-boxed, html[data-theme="dark"] .login-page, html[data-theme="dark"] .register-page { background-image: none !important; } html[data-theme="dark"] #loadingDiv { background-color: #1e1e1e; } html[data-theme="dark"] hr { color: #444; background-color: #444; } html[data-theme="dark"] a:link, html[data-theme="dark"] a:visited { color: #8ab4f8; } html[data-theme="dark"] a:hover, html[data-theme="dark"] a:active { color: #b3ccff; } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .content-header > h1, html[data-theme="dark"] .box-title, html[data-theme="dark"] label, html[data-theme="dark"] .label-block, html[data-theme="dark"] small, html[data-theme="dark"] .text-muted { color: #d8d8d8; } /* ---- header / sidebar (skin) ---- */ html[data-theme="dark"] .skin .main-header .navbar, html[data-theme="dark"] .skin .main-header .logo, html[data-theme="dark"] .skin .main-header .logo:hover, html[data-theme="dark"] .skin .main-header .navbar .sidebar-toggle:hover { background-color: #263238; } html[data-theme="dark"] .skin .main-header li.user-header { background-color: #37474f; } html[data-theme="dark"] .skin .wrapper, html[data-theme="dark"] .skin .main-sidebar, html[data-theme="dark"] .skin .left-side, html[data-theme="dark"] .skin .sidebar-menu > li.header { background-color: #161d21; } html[data-theme="dark"] .skin .sidebar-menu > li > .treeview-menu { background: #1c252a; } html[data-theme="dark"] .skin .sidebar-menu > li:hover > a, html[data-theme="dark"] .skin .sidebar-menu > li.active > a { background: #37474f; border-left-color: #8ab4f8; } /* ---- panels / boxes / cards ---- */ html[data-theme="dark"] .box, html[data-theme="dark"] .box-header, html[data-theme="dark"] .box-footer, html[data-theme="dark"] .panel, html[data-theme="dark"] .panel-body, html[data-theme="dark"] .panel-default > .panel-heading, html[data-theme="dark"] .well, html[data-theme="dark"] .info-box, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .popover, html[data-theme="dark"] .callout, html[data-theme="dark"] #jump { background-color: #2b2b2b; color: #d8d8d8; border-color: #444; } html[data-theme="dark"] .box { border-top-color: #555; } html[data-theme="dark"] .box-header.with-border, html[data-theme="dark"] .box-footer, html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: #444; } html[data-theme="dark"] .box-header .box-title { color: #d8d8d8; } /* ---- module sub-menu cards (pms_home.php: .menu-box) and colour helpers ---- */ html[data-theme="dark"] .menu-box { background: #2b2b2b; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } html[data-theme="dark"] .menu-box-icon { background: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .menu-box:hover { background: #333; } html[data-theme="dark"] .menu-box-content a, html[data-theme="dark"] .menu-box-content a:hover { color: #d8d8d8; } html[data-theme="dark"] .text-black { color: #d8d8d8 !important; } html[data-theme="dark"] .text-black:hover { color: #fff !important; } html[data-theme="dark"] .bg-gray { background-color: #444 !important; color: #d8d8d8; } html[data-theme="dark"] .bg-white { background-color: #2b2b2b !important; } html[data-theme="dark"] .bg-gray-light { background-color: #3a3a3a !important; } /* ---- dropdowns / menus / tabs / pagination ---- */ html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a, html[data-theme="dark"] .navbar-nav > .user-menu > .dropdown-menu > .user-footer, html[data-theme="dark"] .navbar-nav > .user-menu > .dropdown-menu > .user-body { background-color: #2b2b2b; color: #d8d8d8; border-color: #444; } html[data-theme="dark"] .dropdown-menu > li > a { color: #d8d8d8; } html[data-theme="dark"] .dropdown-menu > li > a:hover, html[data-theme="dark"] .dropdown-menu > li > a:focus { background-color: #3a3a3a; color: #fff; } html[data-theme="dark"] .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a { border-bottom-color: #444; } html[data-theme="dark"] .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover { background-color: #3a3a3a; } /* module sub-menu list (pms_menu.php: .nav-pills.nav-stacked) - bootstrap hovers with #eee */ html[data-theme="dark"] .nav > li > a:hover, html[data-theme="dark"] .nav > li > a:focus, html[data-theme="dark"] .nav .open > a, html[data-theme="dark"] .nav .open > a:hover, html[data-theme="dark"] .nav .open > a:focus { background-color: #3a3a3a; color: #fff; } html[data-theme="dark"] .nav-stacked > li > a { color: #d8d8d8; } html[data-theme="dark"] .nav-stacked > li > a:hover { border-left-color: #8ab4f8; } html[data-theme="dark"] .nav-stacked > li.header { border-bottom-color: #444; } html[data-theme="dark"] .nav-pills > li.active > a, html[data-theme="dark"] .nav-pills > li.active > a:hover, html[data-theme="dark"] .nav-pills > li.active > a:focus { background-color: #2f4f8f; color: #fff; border-top-color: #8ab4f8; } html[data-theme="dark"] .nav-tabs { border-bottom-color: #444; } html[data-theme="dark"] .nav-tabs > li > a { color: #d8d8d8; } html[data-theme="dark"] .nav-tabs > li > a:hover { background-color: #3a3a3a; border-color: #444; } html[data-theme="dark"] .nav-tabs > li.active > a, html[data-theme="dark"] .nav-tabs > li.active > a:hover, html[data-theme="dark"] .nav-tabs > li.active > a:focus { background-color: #2b2b2b; color: #fff; border-color: #444 #444 transparent; } html[data-theme="dark"] .nav-tabs-custom, html[data-theme="dark"] .nav-tabs-custom > .tab-content { background-color: #2b2b2b; } html[data-theme="dark"] .pagination > li > a, html[data-theme="dark"] .pagination > li > span { background-color: #2b2b2b; color: #8ab4f8; border-color: #444; } html[data-theme="dark"] .pagination > .active > a, html[data-theme="dark"] .pagination > .active > span { background-color: #37474f; border-color: #37474f; color: #fff; } html[data-theme="dark"] .breadcrumb { background-color: transparent; } /* ---- forms ---- */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .input, html[data-theme="dark"] .select, html[data-theme="dark"] .button, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .input-group-addon, html[data-theme="dark"] .btn-default { background-color: #333; color: #e8e8e8; border-color: #555; } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .input:focus, html[data-theme="dark"] textarea:focus { border-color: #8ab4f8; background-color: #3a3a3a; } html[data-theme="dark"] .btn-default:hover, html[data-theme="dark"] .btn-default:focus, html[data-theme="dark"] .button:hover { background-color: #444; color: #fff; } html[data-theme="dark"] ::-webkit-input-placeholder { color: #999; } html[data-theme="dark"] .form-control[disabled], html[data-theme="dark"] .form-control[readonly] { background-color: #2a2a2a; color: #aaa; } /* ---- tables ---- */ html[data-theme="dark"] .table, html[data-theme="dark"] table { color: #d8d8d8; } html[data-theme="dark"] .table > thead > tr > th, html[data-theme="dark"] .table > tbody > tr > td, html[data-theme="dark"] .table > tbody > tr > th, html[data-theme="dark"] .table > tfoot > tr > td { border-color: #444; } html[data-theme="dark"] .table-bordered, html[data-theme="dark"] .table-bordered > thead > tr > th, html[data-theme="dark"] .table-bordered > tbody > tr > td { border-color: #444; } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: #262626; } html[data-theme="dark"] .table-hover > tbody > tr:hover { background-color: #333; } html[data-theme="dark"] .table > thead > tr > th { background-color: #2f2f2f; } /* Legacy inline bgcolor / inline styles that are light in the light theme. Colourful values (blue/green/orange headers, pastel status cells) are left as-is. */ html[data-theme="dark"] [bgcolor="#FFFFFF"], html[data-theme="dark"] [bgcolor="#ffffff"], html[data-theme="dark"] [bgcolor="#FFF"], html[data-theme="dark"] [bgcolor="#fff"], html[data-theme="dark"] [bgcolor="white"], html[data-theme="dark"] [bgcolor="#F6F6F6"], html[data-theme="dark"] [bgcolor="#F4F4F4"], html[data-theme="dark"] [bgcolor="#f5f5f5"], html[data-theme="dark"] [bgcolor="#F5F5F5"] { background-color: #2b2b2b !important; } html[data-theme="dark"] [bgcolor="#F0F0F0"], html[data-theme="dark"] [bgcolor="#f0f0f0"], html[data-theme="dark"] [bgcolor="#EEEEEE"], html[data-theme="dark"] [bgcolor="#eeeeee"], html[data-theme="dark"] [bgcolor="#EEE"], html[data-theme="dark"] [bgcolor="#eee"], html[data-theme="dark"] [bgcolor="#E7E7E7"], html[data-theme="dark"] [bgcolor="#e7e7e7"], html[data-theme="dark"] [bgcolor="#CCCCCC"], html[data-theme="dark"] [bgcolor="#cccccc"] { background-color: #3a3a3a !important; } /* Highlight rows/cells (#FFCCAA = row with comment / forced grade / not enrolled, chk_score*). Keep the "highlighted" meaning with a dark amber background and light text. */ html[data-theme="dark"] [bgcolor="#FFCCAA"], html[data-theme="dark"] [bgcolor="#ffccaa"], html[data-theme="dark"] [bgcolor="#ffeedd"], html[data-theme="dark"] [bgcolor="#FFEEDD"] { background-color: #5c3a1e !important; color: #ffe0c2; } html[data-theme="dark"] [bgcolor="#FFCCAA"] td, html[data-theme="dark"] [bgcolor="#ffccaa"] td, html[data-theme="dark"] [bgcolor="#FFCCAA"] a, html[data-theme="dark"] [bgcolor="#ffccaa"] a { color: #ffe0c2; } html[data-theme="dark"] [bgcolor="#FFCCAA"] td { background-color: transparent; } /* Pastel status colours: same hue, darkened, light text */ html[data-theme="dark"] [bgcolor="#f6d8ce"], html[data-theme="dark"] [bgcolor="#F6D8CE"] { background-color: #5a3328 !important; color: #f3d6cc; } html[data-theme="dark"] [bgcolor="#f6cee3"], html[data-theme="dark"] [bgcolor="#F6CEE3"] { background-color: #5a2c46 !important; color: #f3cce0; } html[data-theme="dark"] [bgcolor="#f6ced8"], html[data-theme="dark"] [bgcolor="#F6CED8"] { background-color: #5a2c39 !important; color: #f3ccd6; } html[data-theme="dark"] [bgcolor="#f5f6ce"], html[data-theme="dark"] [bgcolor="#F5F6CE"] { background-color: #4a4a1e !important; color: #eeefc4; } html[data-theme="dark"] [bgcolor="#eccef5"], html[data-theme="dark"] [bgcolor="#ECCEF5"] { background-color: #46285a !important; color: #e8ccf3; } html[data-theme="dark"] [bgcolor="#cef6ce"], html[data-theme="dark"] [bgcolor="#CEF6CE"] { background-color: #1f4a1f !important; color: #cdeecd; } html[data-theme="dark"] [bgcolor="#cee3f6"], html[data-theme="dark"] [bgcolor="#CEE3F6"] { background-color: #1f3a55 !important; color: #cde0f3; } html[data-theme="dark"] [bgcolor="#ccddff"], html[data-theme="dark"] [bgcolor="#CCDDFF"] { background-color: #23345a !important; color: #ccddff; } html[data-theme="dark"] [bgcolor="#ccffff"], html[data-theme="dark"] [bgcolor="#CCFFFF"] { background-color: #1e4a4a !important; color: #ccf5f5; } html[data-theme="dark"] [bgcolor="#ffccff"], html[data-theme="dark"] [bgcolor="#FFCCFF"] { background-color: #4a2a4a !important; color: #f5ccf5; } html[data-theme="dark"] [bgcolor="#f0f055"], html[data-theme="dark"] [bgcolor="#F0F055"], html[data-theme="dark"] [bgcolor="#f0f090"], html[data-theme="dark"] [bgcolor="#F0F090"] { background-color: #5a5a10 !important; color: #f5f5b0; } html[data-theme="dark"] [bgcolor="#55ff55"], html[data-theme="dark"] [bgcolor="#55FF55"] { background-color: #1e5a1e !important; color: #c8f5c8; } html[data-theme="dark"] [bgcolor="#7dc3e3"], html[data-theme="dark"] [bgcolor="#7DC3E3"] { background-color: #1f4a60 !important; color: #d0e8f5; } html[data-theme="dark"] [bgcolor="#e26e6e"], html[data-theme="dark"] [bgcolor="#E26E6E"] { background-color: #7a2a2a !important; color: #ffd6d6; } html[data-theme="dark"] [bgcolor="#d4d4d4"], html[data-theme="dark"] [bgcolor="#D4D4D4"], html[data-theme="dark"] [bgcolor="#c5c5c5"], html[data-theme="dark"] [bgcolor="#C5C5C5"], html[data-theme="dark"] [bgcolor="#aaaaaa"], html[data-theme="dark"] [bgcolor="#AAAAAA"] { background-color: #444 !important; color: #d8d8d8; } html[data-theme="dark"] [bgcolor="#f0cccc" i] { background-color: #5a2e2e !important; color: #f3d0d0; } html[data-theme="dark"] [bgcolor="#ffffcc" i], html[data-theme="dark"] [bgcolor="#ffff99" i] { background-color: #4a4a1e !important; color: #eeefc4; } html[data-theme="dark"] [bgcolor="99ff99" i], html[data-theme="dark"] [bgcolor="#99ff99" i], html[data-theme="dark"] [bgcolor="#ccffcc" i] { background-color: #1f4a1f !important; color: #cdeecd; } html[data-theme="dark"] [bgcolor="#ffdddd" i], html[data-theme="dark"] [bgcolor="#ffeeee" i] { background-color: #5a2e2e !important; color: #f3d0d0; } /* Inline style="background(-color): " embedded in pages. Attribute selectors match the literal text, so common spellings are listed; the "i" flag ignores case. */ html[data-theme="dark"] [style*="background-color:#ffffff" i], html[data-theme="dark"] [style*="background-color: #ffffff" i], html[data-theme="dark"] [style*="background-color:#fff;" i], html[data-theme="dark"] [style*="background-color: #fff;" i], html[data-theme="dark"] [style*="background-color:white" i], html[data-theme="dark"] [style*="background-color: white" i], html[data-theme="dark"] [style*="background:#ffffff" i], html[data-theme="dark"] [style*="background: #ffffff" i], html[data-theme="dark"] [style*="background:#fff;" i], html[data-theme="dark"] [style*="background: #fff;" i], html[data-theme="dark"] [style*="background:white" i], html[data-theme="dark"] [style*="background: white" i], html[data-theme="dark"] [style*="background: rgb(255, 255, 255)" i], html[data-theme="dark"] [style*="background-color:#f5f5f5" i], html[data-theme="dark"] [style*="background-color: #f5f5f5" i], html[data-theme="dark"] [style*="background:#f7f7f7" i], html[data-theme="dark"] [style*="background: #f7f7f7" i], html[data-theme="dark"] [style*="background:#f4f4f4" i], html[data-theme="dark"] [style*="background: #f4f4f4" i] { background-color: #2b2b2b !important; color: #d8d8d8; } html[data-theme="dark"] [style*="background-color:#f0f0f0" i], html[data-theme="dark"] [style*="background-color: #f0f0f0" i], html[data-theme="dark"] [style*="background-color:#eeeeee" i], html[data-theme="dark"] [style*="background-color: #eeeeee" i], html[data-theme="dark"] [style*="background-color:#eee;" i], html[data-theme="dark"] [style*="background-color: #eee;" i], html[data-theme="dark"] [style*="background-color:#e7e7e7" i], html[data-theme="dark"] [style*="background-color: #e7e7e7" i], html[data-theme="dark"] [style*="background:#f0f0f0" i], html[data-theme="dark"] [style*="background: #f0f0f0" i], html[data-theme="dark"] [style*="background:#eeeeee" i], html[data-theme="dark"] [style*="background: #eeeeee" i], html[data-theme="dark"] [style*="background:#e7e7e7" i], html[data-theme="dark"] [style*="background: #e7e7e7" i], html[data-theme="dark"] [style*="background:#dddddd" i], html[data-theme="dark"] [style*="background: #dddddd" i] { background-color: #3a3a3a !important; color: #d8d8d8; } html[data-theme="dark"] [style*="background:#ffffcc" i], html[data-theme="dark"] [style*="background: #ffffcc" i], html[data-theme="dark"] [style*="background:#ffff99" i], html[data-theme="dark"] [style*="background: #ffff99" i], html[data-theme="dark"] [style*="background-color:#ffffcc" i], html[data-theme="dark"] [style*="background-color: #ffffcc" i], html[data-theme="dark"] [style*="background-color: yellow" i], html[data-theme="dark"] [style*="background-color:yellow" i] { background-color: #4a4a1e !important; color: #eeefc4; } html[data-theme="dark"] [style*="background:#ccffcc" i], html[data-theme="dark"] [style*="background: #ccffcc" i], html[data-theme="dark"] [style*="background:#ddffdd" i], html[data-theme="dark"] [style*="background: #ddffdd" i], html[data-theme="dark"] [style*="background:#aaeeaa" i], html[data-theme="dark"] [style*="background: #aaeeaa" i] { background-color: #1f4a1f !important; color: #cdeecd; } html[data-theme="dark"] [style*="background:#ccffff" i], html[data-theme="dark"] [style*="background: #ccffff" i], html[data-theme="dark"] [style*="background-color:#ccffff" i], html[data-theme="dark"] [style*="background-color: #ccffff" i] { background-color: #1e4a4a !important; color: #ccf5f5; } html[data-theme="dark"] [style*="background:#ffdddd" i], html[data-theme="dark"] [style*="background: #ffdddd" i], html[data-theme="dark"] [style*="background:#ffeeee" i], html[data-theme="dark"] [style*="background: #ffeeee" i], html[data-theme="dark"] [style*="background:#ffaaaa" i], html[data-theme="dark"] [style*="background: #ffaaaa" i], html[data-theme="dark"] [style*="background:#eeaaaa" i], html[data-theme="dark"] [style*="background: #eeaaaa" i] { background-color: #5a2e2e !important; color: #f3d0d0; } html[data-theme="dark"] [style*="background-color:#ffeedd" i], html[data-theme="dark"] [style*="background-color: #ffeedd" i] { background-color: #5c3a1e !important; color: #ffe0c2; } html[data-theme="dark"] [style*="background-color:#ffccff" i], html[data-theme="dark"] [style*="background-color: #ffccff" i] { background-color: #4a2a4a !important; color: #f5ccf5; } /* Dark text embedded in pages (, style="color:#000000") disappears on a dark background. Every light background above has been darkened, so light text is safe everywhere. */ html[data-theme="dark"] font[color="#000000" i], html[data-theme="dark"] font[color="#000" i], html[data-theme="dark"] font[color="black" i], html[data-theme="dark"] font[color="#000080" i], html[data-theme="dark"] font[color="#333333" i], html[data-theme="dark"] font[color="#333" i], html[data-theme="dark"] [style*="color:#000000" i], html[data-theme="dark"] [style*="color: #000000" i], html[data-theme="dark"] [style*="color:#000;" i], html[data-theme="dark"] [style*="color: #000;" i], html[data-theme="dark"] [style*="color:black" i], html[data-theme="dark"] [style*="color: black" i], html[data-theme="dark"] [style*="color:#333333" i], html[data-theme="dark"] [style*="color: #333333" i] { color: #d8d8d8 !important; } /* saturated / grey text colours that lose contrast on dark grey */ html[data-theme="dark"] font[color="red" i], html[data-theme="dark"] font[color="#ff0000" i], html[data-theme="dark"] font[color="#cc0000" i], html[data-theme="dark"] [style*="color:red" i], html[data-theme="dark"] [style*="color: red" i], html[data-theme="dark"] .text-red, html[data-theme="dark"] .text-danger { color: #ff7b7b !important; } html[data-theme="dark"] font[color="green" i], html[data-theme="dark"] font[color="#008000" i], html[data-theme="dark"] [style*="color:green" i], html[data-theme="dark"] [style*="color: green" i], html[data-theme="dark"] .text-green, html[data-theme="dark"] .text-success { color: #6fd98a !important; } html[data-theme="dark"] font[color="blue" i], html[data-theme="dark"] font[color="#0000ff" i], html[data-theme="dark"] [style*="color:blue" i], html[data-theme="dark"] [style*="color: blue" i] { color: #8ab4f8 !important; } html[data-theme="dark"] font[color="#888888" i], html[data-theme="dark"] font[color="#888" i], html[data-theme="dark"] font[color="gray" i], html[data-theme="dark"] font[color="grey" i], html[data-theme="dark"] font[color="#666666" i], html[data-theme="dark"] font[color="#666" i], html[data-theme="dark"] [style*="color:#888888" i], html[data-theme="dark"] [style*="color: #888888" i], html[data-theme="dark"] [style*="color:#666" i], html[data-theme="dark"] [style*="color: #666" i], html[data-theme="dark"] [style*="color:gray" i], html[data-theme="dark"] [style*="color: gray" i] { color: #b0b0b0 !important; } /* bright backgrounds that are kept as-is need dark text */ html[data-theme="dark"] [bgcolor="orange" i], html[data-theme="dark"] [bgcolor="yellow" i], html[data-theme="dark"] [bgcolor="#ffa500" i], html[data-theme="dark"] [bgcolor="#ffff00" i], html[data-theme="dark"] [style*="background:orange" i], html[data-theme="dark"] [style*="background: orange" i], html[data-theme="dark"] [style*="background-color:orange" i], html[data-theme="dark"] [style*="background-color: orange" i] { color: #111 !important; } /* light tints used by export-style pages (#fff3cb / #f8cbac) */ html[data-theme="dark"] [bgcolor="#fff3cb" i], html[data-theme="dark"] [style*="#fff3cb" i] { background-color: #4a4a1e !important; color: #eeefc4; } html[data-theme="dark"] [bgcolor="#f8cbac" i], html[data-theme="dark"] [style*="#f8cbac" i] { background-color: #5c3a1e !important; color: #ffe0c2; } /* mid-blue heading text (#336699) is hard to read on dark grey */ html[data-theme="dark"] font[color="#336699" i], html[data-theme="dark"] [style*="color:#336699" i], html[data-theme="dark"] [style*="color: #336699" i] { color: #8ab4f8 !important; } /* Page-level