Merge pull request #649 from alan-turing-institute/iss604/dark_mode

[Ready for Review] Implement dark theme option

Author: helendduncan

server/apps/main/templates/main/help.html

@@ -46,7 +46,7 @@ <h5 class="heading-blue" id="sharing-stories">What Stories Should I Share On Aut
           <p>
             <div class="row ">
               <div class="col">
-                <a class="btn btn-outline-dark float-end"
+                <a class="btn btn-outline-primary float-end"
                   href="{% url 'main:content_moderation_guidelines' %}" rel="noopener noreferrer">
                   Read the code of conduct
                 </a>
@@ -66,7 +66,7 @@ <h5 class="heading-blue" id="who-can-share">Who Can Share Stories On AutSPACEs?<
           <p>
             <div class="row ">
               <div class="col">
-                <a class="btn btn-outline-dark float-end"
+                <a class="btn btn-outline-primary float-end"
                   href="{% url 'main:content_moderation_guidelines' %}" rel="noopener noreferrer">
                   Read the code of conduct
                 </a>
@@ -108,7 +108,7 @@ <h5 class="heading-blue" id="what-happens-to-stories">What Happens To The Storie
           <p>
             <div class="row">
               <div class="col">
-                <a class="btn btn-outline-dark float-end"
+                <a class="btn btn-outline-primary float-end"
                   href="{% url 'main:content_moderation_guidelines' %}" rel="noopener noreferrer">
                   Read the code of conduct
                 </a>
@@ -126,7 +126,7 @@ <h5 class="heading-blue" id="how-to-decide">How Do You Decide Which Stories To P
           <p>
             <div class="row">
               <div class="col">
-                <a class="btn btn-outline-dark float-end"
+                <a class="btn btn-outline-primary float-end"
                   href="{% url 'main:content_moderation_guidelines' %}" rel="noopener noreferrer">
                   Read the code of conduct
                 </a>
@@ -143,7 +143,7 @@ <h5 class="heading-blue" id="what-if-not-accepted">What Can I Do If I Want My St
           <p>
             <div class="row">
               <div class="col">
-                <a class="btn btn-outline-dark float-end"
+                <a class="btn btn-outline-primary float-end"
                   href="{% url 'main:content_moderation_guidelines' %}" rel="noopener noreferrer">
                   Read the code of conduct
                 </a>
@@ -184,7 +184,7 @@ <h5 class="heading-blue" id="share-someone-else">Can I Share A Story About Someo
           <p>
             <div class="row">
               <div class="col">
-                <a class="btn btn-outline-dark float-end"
+                <a class="btn btn-outline-primary float-end"
                   href="{% url 'main:content_moderation_guidelines' %}" rel="noopener noreferrer">
                   Read the code of conduct
                 </a>
@@ -199,7 +199,7 @@ <h5 class="heading-blue" id="share-someone-else">What's the Process for Sharing
           page</a> when you are logged in and write in the text box about any time you have been effected by your senses.
             Then you can submit your experience for research or to share publicly on our website. The flow chart below shows
             the steps you can take to share an experience on AutSPACEs.</p>
-          <p><img src="{% static '/images/submit-experience.svg' %}" class="mx-auto d-block" alt="Flow chart showing the
+          <p><img src="{% static '/images/submit-experience_grey.svg' %}" class="mx-auto d-block" alt="Flow chart showing the
             process for submitting a story"/></p>
         </div>
         <div class="faq-class">

server/apps/main/templates/main/partials/navigation.html

@@ -28,7 +28,6 @@
           </li>
           {% endif %}
           {% endif %}
-
           <li class="nav-item dropdown">
             <a class="nav-link nav-link-menu dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
               data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -41,6 +40,9 @@
               <li><a class="dropdown-item" href="{% url 'main:help' %}">Help</a></li>
             </ul>
           </li>
+          <li class="nav-item">
+            <a class="nav-link nav-link-menu" id="theme-toggle"><i class="bi bi-circle-half"></i> Switch Light/Dark</a>
+          </li>
         </ul>
 
 
@@ -73,3 +75,5 @@
     </div>
   </nav>
 </div>
+
+<script src="{% static 'js/theme-checker.js' %}"></script>

server/apps/main/templates/main/what_autism_is.html

@@ -38,7 +38,7 @@ <h5 class="heading-blue" id="about-autspaces"><em></em>About Autism</h5>
         <p>
           <div class="row">
             <div class="col">
-              <a class="btn btn-outline-dark float-end"
+              <a class="btn btn-outline-primary float-end"
                 href="https://www.autistica.org.uk/what-is-autism/what-is-autism"
                 target="_blank" rel="noopener noreferrer" >
                 Find Out More from Autistica
@@ -61,7 +61,7 @@ <h5 class="heading-blue" id="platform-usage"><em></em>About Sensory Processing</
         <p>
           <div class="row">
             <div class="col">
-              <a class="btn btn-outline-dark view-btn float-end"
+              <a class="btn btn-outline-primary view-btn float-end"
                 href="https://www.autism.org.uk/advice-and-guidance/topics/sensory-differences/sensory-differences/all-audiences"
                 target="_blank" rel="noopener noreferrer">
                 Find Out More from the National Autistic Society

static/css/main.css

@@ -146,7 +146,8 @@ body {
    line-height: 1.5;
    font-weight: bold;
    text-align: center;
-   color: #fff;
+   /* color: #fff; */
+   color: var(--bs-tertiary-bg);
    text-decoration: none;
  }
  .usage-box a:hover {
@@ -181,7 +182,7 @@ body {
  #value {
    padding: 4% 5%;
    background: #309FDC;
-   color: #fff;
+   color: var(--bs-body-bg);
  }
  .value-text {
    line-height: 2;
@@ -284,7 +285,7 @@ body {
  /*Platform Information*/
 
  #platform_info {
-   background: #FFFFFF;
+   background: var(--bs-body-bg);
    padding: 4% 5%;
    color: #1BB5AF;
  }
@@ -319,7 +320,7 @@ body {
  #platform_usage {
    background: #FAC145;
    padding: 4% 5%;
-   color: #ffffff;
+   color: var(--bs-body-bg);
  }
 
  .platform-title  {
@@ -359,9 +360,21 @@ body {
  }
 
  .cta-header, .card-text {
-   color: #000;
+  /* color: var(--bs-primary-text-emphasis) */
+  color: var(--bs-body-color);
  }
 
+ @include color-mode(dark) {
+  .card-text{
+  color: #fff;
+  }
+}
+
+ .cta-header, .card-text-dark {
+  color: #fff;
+ }
+
+
  /*Responsive Design*/
  @media (max-width: 992px) {
 
@@ -507,11 +520,11 @@ body {
 }
 
 .story-card-text {
-  color: #000000;
   line-height: 2;
   padding: 0 2%;
 }
 
+
 .story-text {
   padding: 2% 11% 3%;
     text-align: cetner;

static/images/submit-experience_grey.svg

@@ -0,0 +1,29 @@
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    // Check if the user has set a theme before
+    let storedTheme = localStorage.getItem('theme');
+
+    if (storedTheme !== null) {
+        document.body.setAttribute('data-bs-theme', storedTheme);
+        footer.setAttribute('data-bs-theme', storedTheme);
+    } else {
+        // Get the system theme
+        let systemTheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        document.body.setAttribute('data-bs-theme', systemTheme);
+        footer.setAttribute('data-bs-theme', systemTheme);
+    }
+});
+
+
+document.getElementById('theme-toggle').addEventListener('click', function() {
+    let currentTheme = document.body.getAttribute('data-bs-theme');
+    if (currentTheme === 'dark') {
+        document.body.setAttribute('data-bs-theme', 'light');
+        footer.setAttribute('data-bs-theme', 'light');
+        localStorage.setItem('theme', 'light');
+    } else {
+        document.body.setAttribute('data-bs-theme', 'dark');
+        footer.setAttribute('data-bs-theme', 'dark');
+        localStorage.setItem('theme', 'dark');
+    }
+});