Set dark theme on body

canonical · Feb 7, 2024 · 2581050 · 2581050
1 parent b43babb
commit 2581050
Showing 1 changed file with 6 additions and 15 deletions.
diff --git a/templates/docs/examples/patterns/forms/forms-dark.html b/templates/docs/examples/patterns/forms/forms-dark.html
@@ -3,39 +3,30 @@
 
 {% block standalone_css %}patterns_forms{% endblock %}
 
-
-{% block style %}
-<style>
-  body {
-    background: #262626;
-    color: #fff;
-  }
-</style>
-{% endblock %}
-
+{% set is_dark = true %}
 {% block content %}
 <form>
   <label for="exampleTextInputHelp">Email address</label>
-  <input class="p-form-validation__input is-dark" type="email" id="exampleTextInputHelp" placeholder="example@canonical.com" name="exampleTextInputHelp" autocomplete="email" aria-describedby="exampleInputHelpMessage"/>
-  <p class="p-form-help-text is-dark" id="exampleInputHelpMessage">
+  <input class="p-form-validation__input" type="email" id="exampleTextInputHelp" placeholder="example@canonical.com" name="exampleTextInputHelp" autocomplete="email" aria-describedby="exampleInputHelpMessage"/>
+  <p class="p-form-help-text" id="exampleInputHelpMessage">
     A notification email will be sent to entered email address.
   </p>
 
   <label for="exampleSelect">Ubuntu releases</label>
-  <select class="is-dark" name="exampleSelect" id="exampleSelect" name="exampleSelect" placeholder="Select an option">
+  <select name="exampleSelect" id="exampleSelect" name="exampleSelect" placeholder="Select an option">
     <option value="" disabled="disabled" selected>Select an option</option>
     <option value="1">Cosmic Cuttlefish</option>
     <option value="2">Bionic Beaver</option>
     <option value="3">Xenial Xerus</option>
   </select>
 
   <label for="exampleTextarea">Comment</label>
-  <textarea id="exampleTextarea" class="is-dark" placeholder="Type your comment here..."></textarea>
+  <textarea id="exampleTextarea" placeholder="Type your comment here..."></textarea>
 
   <label class="p-checkbox is-dark">
     <input type="checkbox" aria-labelledby="checkboxLabel4" class="p-checkbox__input" aria-describedby="exampleTickHelpMessage">
     <span class="p-checkbox__label" id="checkboxLabel4">I agree to the Terms and Conditions</span>
   </label>
-  <p class="p-form-help-text is-tick-element is-dark" id="exampleTickHelpMessage">By checking this you confirm that you have read and agree to the Terms and Conditions.</p>
+  <p class="p-form-help-text is-tick-element" id="exampleTickHelpMessage">By checking this you confirm that you have read and agree to the Terms and Conditions.</p>
 </form>
 {% endblock %}