Publish 2026-02-10

Author: alexanderby

help/plus/index.html

@@ -58,6 +58,8 @@
     <article class="page-grid-content">
         <h1>Help — Dark Reader</h1>
         <style>
+    @import "../../styles/help-plus.css";
+
     aside,
     .v2-help-banners,
     darkreader-donate-mascot,
@@ -107,16 +109,16 @@ <h2 id="customize-your-theme">Customize your theme</h2>
 <ul>
 <li>You can adjust the <strong>Background</strong>, <strong>Text</strong>, and <strong>Filter</strong> mode settings. This can be used to better suit your screen parameters and the lighting in the room.</li>
 </ul>
+<h3>1. Background</h3>
 <img src="/images/help/plus/darkreader-background.png" alt="Customize your theme" style="width: 15rem;" loading="lazy" />
 
-<h3>1. Background</h3>
+<h3>2. Text</h3>
 <img src="/images/help/plus/darkreader-text.png" alt="Customize your theme" style="width: 15rem;" loading="lazy" />
 
-<h3>2. Text</h3>
+<h3>3. Filter</h3>
 <img src="/images/help/plus/darkreader-filter.png" alt="Customize your theme" style="width: 15rem;" loading="lazy" />
 
-<h3>3. Filter</h3>
-<h2 id="custom-site-settings">Custom Site Settings</h2>
+<h2 id="custom-site-settings">Settings</h2>
 
 <img src="/images/help/plus/darkreader-site-settings.png" alt="Custom site settings" style="width: 15rem;" loading="lazy" />
 
@@ -128,7 +130,7 @@ <h2 id="custom-site-settings">Custom Site Settings</h2>
 <li><strong>4 - Advanced</strong></li>
 <li>You can also click on <strong>About</strong> to learn more about us and our work.</li>
 </ul>
-<h2 id="custom-site-settings">Site List</h2>
+<h2 id="site-list">Site List</h2>
 
 <img src="/images/help/plus/darkreader-site-list.png" alt="Site List" style="width: 15rem;" loading="lazy" />
 
@@ -155,6 +157,9 @@ <h2 id="Advanced">Advanced</h2>
 <li><strong>Reset all settings</strong> to default.</li>
 <li>If you&#39;re familiar with CSS selectors, you can contribute by suggesting fixes for filtering specific websites. You can open <strong>Developer Tools</strong> and add your own fix.</li>
 </ul>
+<h2 id="contacts">Contacts</h2>
+
+<p>For any questions e-mail to <a href="mailto:support@darkreader.org">support@darkreader.org</a></p>
 
         <script>
             (() => {

styles/help-plus.css

@@ -0,0 +1,66 @@
+:root {
+    --color-background: hsl(0, 0%, 0%);
+    --color-background-article: hsl(212, 45%, 7%);
+    --color-control: hsl(214, 39%, 30%);
+    --color-control-hover: hsl(196, 46%, 31%);
+    --color-text: hsl(215, 44%, 54%);
+    --color-text-highlight: #ffffff;
+    --color-accent: hsl(5, 78%, 61%);
+    --gradient-accent: linear-gradient(to right, hsl(9, 51%, 53%), hsl(354, 52%, 50%), hsl(214, 46%, 50%));
+}
+
+html,
+body {
+    color: var(--color-text);
+    font-family: system-ui, sans-serif;
+}
+
+html {
+    background-color: var(--color-background-article);
+    position: relative;
+}
+
+html::before {
+    background-color: var(--color-background);
+    content: "";
+    display: block;
+    height: 3.5rem;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+}
+
+body {
+    background-color: transparent;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    color: var(--color-text);
+}
+
+h2,
+h3 {
+    font-weight: 300;
+}
+
+a,
+.v2-help-header-link {
+    color: var(--color-text);
+}
+
+.v2-help-logo-link {
+    background-image: var(--gradient-accent);
+    mask-image: url(/images/darkreader-type.svg);
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+}
+
+.v2-help-title {
+    color: var(--color-text-highlight);
+}