HTML/CSS Restriction #

The HTML/CSS Restriction settings allow you to precisely control which elements on your site are affected by Dark Mode. You can limit Dark Mode to specific elements, exclude elements, and use correction options to maintain consistent styling.

1. Allow Only Elements: Apply Dark Mode only to the elements you specify.
   • Enter HTML tags, CSS classes, or IDs.
   • Example: div, #site-header, .my-footer
   • Dark Mode will ignore all other elements.
2. Force to Correct (Allowed Elements): Ensures design consistency by correcting background or text colors for allowed elements if they don’t render properly.
3. Disallowed Elements: Exclude specific elements from Dark Mode.
   • Enter HTML tags, CSS classes, or IDs.
   • Example: div, #site-header, .my-footer
   • Dark Mode will not be applied to these elements.
4. Force to Correct (Disallowed Elements): Ensures proper display by adjusting background or text colors for excluded elements if they appear incorrectly.

Page/Posts Restriction #

The Page/Posts Restriction settings allow you to control where Dark Mode is applied on your website. You can limit Dark Mode to specific pages or posts, or exclude it from certain content.

Pages Restriction #

1. Allow Only Pages
   Select specific pages where Dark Mode and the floating switch should be active.
   • Dark Mode will not be applied to any other pages.
2. Disallowed Pages
   Select specific pages where Dark Mode and the floating switch should be disabled.
   • Dark Mode will remain active on all other pages.

Posts Restriction #

3. Allow Only Posts
   Choose specific posts where Dark Mode and the floating switch should be enabled.
   • Other posts will not be affected.
4. Disallowed Posts
   Choose specific posts where Dark Mode and the floating switch should be disabled.
   • Dark Mode will remain active on all other posts.

Custom CSS #

The Custom CSS settings allow you to add your own styles directly into Darkify. This gives you full control over how Dark Mode and Normal Mode are displayed on your site.

Options #

1. Dark Mode CSS: Add custom CSS that will only be applied when Dark Mode is active.
   • Example: body { background-color: #111; }
2. CSS Rules: By default, custom CSS selectors are treated as Disallowed Elements.
   • To override this, use the :not-disallowed pseudo-class.
   • Example: body:not-disallowed { color: #fff; }
3. Normal Mode CSS: Add custom CSS that applies in both Normal Mode and Dark Mode.
   • Example: h1 { font-family: "Open Sans", sans-serif; }

Extras #

The Extras section provides options for data cleanup, backup, and restoring Darkify settings. These tools are useful for site migration, troubleshooting, or starting fresh with default settings.

1. Clean-up Data on Deletion: Enable this option if you want Darkify to completely remove all plugin data from your database when the plugin is deleted.
   • If disabled, your settings will remain stored even after plugin deletion (useful if you plan to reinstall).
2. Import: Paste an exported JSON code into this field to restore your plugin settings.
3. Export & Download: Export your current settings in JSON format.
   • Copy the code directly from the field, or
   • Click Export & Download to save a .json file for backup or transfer.
4. Reset: Reset all Darkify settings back to their default values.