Gravity Forms Orbital Theme don’t work when switch on dark mode in Jannah News theme.
Does anyone have any suggestions on how I might find a solution?
Best regards,
Oriano
Hi Oriano,
As you’re having the issue with the premium commercial theme, I’m unable to get the theme to replicate the issue on my sandbox. Is it possible to just upload/share the Jannah theme so I can try to replicate the issue on my end to find the solution.
Hi Faisal, thank you for your reply.
I’m sorry, but I only have a single licence for the Jannah theme, purchased on Themeforest, and I don’t think my licence authorises me to send you the theme. Furthermore, in any case, to be able to work on the theme’s settings, I’d have to give you my purchase code 
and obviously I can’t give it to you, as it’s being used on a live site.
What I can do is install a test form on a hidden page of the live site and send you the link to that page.
Would that be helpful?
Best regartds,
Oriano
Hi Oriano,
No need to give me the license key. Just give me the installable theme/zip file so I can test without activating the license.
If you can create a sandbox website and give me the login access, that will work too. But without accessing the dashboard, I might not get the full idea about the issue.
Thank you
Hi Faisal, I have set up a test site.
How can I send you the admin login details? (in Private, if possible?)
Thank you
Oriano
Hi Faisal,
I’ve sent you the login details for the test site in a private message.
In this video screenshot, you can see part of the problem.
Thanks for your help.
Best regards,
Oriano
1 Like
Hi Oriano,
Thanks for sending me the login credentials. To resolve the issue, try the following CSS code in the child theme’s style.css file or in Appearance → Customize → Additional CSS.
/* ============================================================
Dark Mode Fix — Gravity Forms
============================================================ */
/* -- GF CSS custom property overrides -- */
html.dark-skin .gform_wrapper {
--gf-color-primary: #5b8af8;
--gf-color-secondary: #4a78e8;
--gf-color-in-ctrl: #2a2d32;
--gf-color-in-ctrl-contrast: #e0e0e0;
--gf-color-white: #2a2d32;
--gf-color-black: #e0e0e0;
--gf-ctrl-border-color: #444850;
}
/* -- Labels & descriptions -- */
html.dark-skin .gform_wrapper .gfield_label,
html.dark-skin .gform_wrapper .gfield_legend,
html.dark-skin .gform_wrapper .gform_title,
html.dark-skin .gform_wrapper .gform_description,
html.dark-skin .gform_wrapper .gfield_description,
html.dark-skin .gform_wrapper .gfield_required {
color: #e0e0e0 !important;
}
/* -- Text inputs, email, tel, number, url, password -- */
html.dark-skin .gform_wrapper input[type="text"],
html.dark-skin .gform_wrapper input[type="email"],
html.dark-skin .gform_wrapper input[type="tel"],
html.dark-skin .gform_wrapper input[type="number"],
html.dark-skin .gform_wrapper input[type="url"],
html.dark-skin .gform_wrapper input[type="password"],
html.dark-skin .gform_wrapper input[type="search"],
html.dark-skin .gform_wrapper textarea,
html.dark-skin .gform_wrapper select {
background-color: #2a2d32 !important;
color: #e0e0e0 !important;
border-color: #444850 !important;
}
/* -- Placeholder text -- */
html.dark-skin .gform_wrapper input::placeholder,
html.dark-skin .gform_wrapper textarea::placeholder {
color: #9ca3af !important;
opacity: 1;
}
/* -- Select <option> elements -- */
html.dark-skin .gform_wrapper select option {
background-color: #2a2d32 !important;
color: #e0e0e0 !important;
}
/* -- Checkbox & Radio labels -- */
html.dark-skin .gform_wrapper .gchoice label,
html.dark-skin .gform_wrapper .gfield_radio .gchoice label,
html.dark-skin .gform_wrapper .gfield_checkbox .gchoice label {
color: #e0e0e0 !important;
}
/* -- Checkbox & Radio accent color -- */
html.dark-skin .gform_wrapper input[type="checkbox"],
html.dark-skin .gform_wrapper input[type="radio"] {
accent-color: #5b8af8;
}
/* -- Complex field sub-labels (e.g. First / Last name split) -- */
html.dark-skin .gform_wrapper .ginput_complex label,
html.dark-skin .gform_wrapper .ginput_complex span label {
color: #9ca3af !important;
}
/* -- Focus states -- */
html.dark-skin .gform_wrapper input:focus,
html.dark-skin .gform_wrapper textarea:focus,
html.dark-skin .gform_wrapper select:focus {
border-color: #5b8af8 !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(91, 138, 248, 0.25) !important;
}
/* -- Validation / error states -- */
html.dark-skin .gform_wrapper .validation_message,
html.dark-skin .gform_wrapper .gfield_error .gfield_label {
color: #ff6b6b !important;
}
html.dark-skin .gform_wrapper .gfield_error input,
html.dark-skin .gform_wrapper .gfield_error select,
html.dark-skin .gform_wrapper .gfield_error textarea {
border-color: #ff6b6b !important;
}
/* -- Character counter -- */
html.dark-skin .gform_wrapper .charleft {
color: #9ca3af !important;
}
/* -- Submit button -- */
html.dark-skin .gform_wrapper .gform_footer input[type="submit"],
html.dark-skin .gform_wrapper .gform_page_footer input[type="submit"],
html.dark-skin .gform_wrapper input[type="submit"],
html.dark-skin .gform_wrapper button[type="submit"] {
background-color: #5b8af8 !important;
color: #ffffff !important;
border-color: #5b8af8 !important;
}
/* -- Confirmation message (post-submit) -- */
html.dark-skin .gform_confirmation_wrapper,
html.dark-skin .gform_confirmation_message {
color: #e0e0e0 !important;
}
Screenshot
The source code can also be accessed here:
If you still need any help, please feel free to send me a message. I’ll be happy to assist.
Regards,
Faisal (volunteer)
1 Like
Hi Faisal, thank you so much for your help.
I’ve done some initial tests with your CSS. Great work.
The only field that doesn’t seem to be converted to dark mode is the field class="gform-field-label gform-field-label–type-inline gfield_consent_label”
Please see the video screenshot
Best regards,
Oriano
Hi Oriano,
Please try adding the following CSS code immediately after the existing code; this should resolve the issue.
/* -- Consent field label -- */
html.dark-skin .gform_wrapper .gfield_consent_label,
html.dark-skin .gform_wrapper .gfield_consent_label a {
color: #e0e0e0 !important;
}
/* -- Consent field description box -- */
html.dark-skin .gform_wrapper .gfield_consent_description {
color: #e0e0e0 !important;
border-color: #444850 !important;
background-color: #2a2d32 !important;
}
/* -- fieldset <legend> labels -- */
html.dark-skin .gform_wrapper legend.gfield_label {
color: #e0e0e0 !important;
}
Screenshot
Give it a try, and let me know how that goes! 
1 Like
Great Faisal
all the forms I’ve tested so far are working properly.
Best regards,
Oriano
2 Likes
Hi Oriano,
Glad to hear the forms are working properly now! If you need any further assistance or run into any other issues, please feel free to reach out. I’ll be happy to help.
Best regards,
Faisal
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.