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

[Ready for Review] Implement dark theme option
alan-turing-institute · Feb 12, 2024 · c12031c · c12031c
2 parents 23352dd + 99909f6
commit c12031c
Show file tree

Hide file tree

Showing 6 changed files with 626 additions and 16 deletions.
diff --git a/server/apps/main/templates/main/help.html b/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">

diff --git a/server/apps/main/templates/main/partials/navigation.html b/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>
diff --git a/server/apps/main/templates/main/what_autism_is.html b/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

diff --git a/static/css/main.css b/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;

diff --git a/static/images/submit-experience_grey.svg b/static/images/submit-experience_grey.svg
diff --git a/static/js/theme-checker.js b/static/js/theme-checker.js
@@ -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');
+ }
+});