Implement dark mode

inducer · Jul 26, 2024 · f0ca458 · f0ca458
1 parent c763fa7
commit f0ca458
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 68 deletions.
diff --git a/course/templates/course/grade-flow-page.html b/course/templates/course/grade-flow-page.html
@@ -15,7 +15,7 @@
       <div class="card mb-3" markdown="block">
         <div class="card-header">
           <h5 class="card-title dropdown-toggle">
-            <a class="text-decoration-none link-dark"
+            <a class="text-decoration-none link-secondary"
               data-bs-toggle="collapse" href="#grading-prompt" aria-expanded="false" aria-controls="grading-prompt">
                 {% trans "Prompt" %}
             </a>

diff --git a/course/templates/course/home.html b/course/templates/course/home.html
@@ -4,7 +4,7 @@
 {% block content %}
   {% block cover %}
 
-    <div class="card text-dark bg-light mb-4">
+    <div class="card mb-4">
       <div class="card-body">
         <h1>{% blocktrans with RELATE=relate_site_name %} Welcome to {{ RELATE }} {% endblocktrans %}</h1>
         <p>{% trans "RELATE is an Environment for Learning And TEaching" %}</p>

diff --git a/course/templates/course/prompt-code-question.html b/course/templates/course/prompt-code-question.html
@@ -5,7 +5,7 @@
   <div class="card mb-3" markdown="block">
     <div class="card-header">
       <h5 class="card-title dropdown-toggle">
-        <a class="text-decoration-none link-dark"
+        <a class="text-decoration-none link-secondary"
           data-bs-toggle="collapse" href="#grading-setup-code">
           {# Translators: "set-up" stands for set-up code for code question #}
           {% trans "Problem set-up code" %}
@@ -35,7 +35,7 @@ <h5 class="card-title dropdown-toggle">
   <div class="card mb-3" markdown="block">
     <div class="card-header">
       <h5 class="card-title dropdown-toggle">
-        <a class="text-decoration-none link-dark"
+        <a class="text-decoration-none link-secondary"
           data-bs-toggle="collapse" href="#grading-test-code" aria-expanded="false" aria-controls="starter-code">
           {% trans "Testing code" %}
         </a>
@@ -63,7 +63,7 @@ <h5 class="card-title dropdown-toggle">
   <div class="card mb-3" markdown="block">
     <div class="card-header">
       <h5 class="card-title dropdown-toggle">
-        <a class="text-decoration-none link-dark"
+        <a class="text-decoration-none link-secondary"
           data-bs-toggle="collapse" href="#starter-code" aria-expanded="false" aria-controls="starter-code">
           {# Translators: starter code for code question #}
           {% trans "Starter code" %}

diff --git a/doc/misc.rst b/doc/misc.rst
@@ -437,7 +437,7 @@ Version 2022.1
         <div class="card mb-3" markdown="block">
           <div class="card-header">
             <h5 class="card-title dropdown-toggle">
-              <a class="text-decoration-none link-dark"
+              <a class="text-decoration-none link-secondary"
                 data-bs-toggle="collapse" href="#starter-code" aria-expanded="false" aria-controls="starter-code">
                   Header
               </a>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,13 +6,13 @@
     "@fullcalendar/timegrid": "^5.10.1",
     "@popperjs/core": "^2.11.2",
     "blueimp-tmpl": "^3.11.0",
-    "bootstrap": "^5.1.3",
+    "bootstrap": "^5.3.1",
     "codemirror": "^5.58.2",
     "datatables-i18n": "github:dzhuang/datatables-i18n",
-    "datatables.net": "^1.11.4",
-    "datatables.net-bs5": "^1.11.4",
-    "datatables.net-fixedcolumns": "^4.0.2",
-    "datatables.net-fixedcolumns-bs5": "^4.0.2",
+    "datatables.net": "^1.13.5",
+    "datatables.net-bs5": "^1.13.5",
+    "datatables.net-fixedcolumns": "^4.3.0",
+    "datatables.net-fixedcolumns-bs5": "^4.3.0",
     "bootstrap-icons": "^1.8.1",
     "jquery": "^3.5.1",
     "jstree": "^3.3.5",

diff --git a/relate/static/css/base.scss b/relate/static/css/base.scss
@@ -1,3 +1,5 @@
+$color-mode-type: media-query;
+
 @import "node_modules/bootstrap/scss/bootstrap.scss";
 @import "node_modules/select2/dist/css/select2";
 

diff --git a/relate/static/css/style.scss b/relate/static/css/style.scss
@@ -1,3 +1,4 @@
+
 .well .start-well-title {
   margin-top:0;
 }
@@ -57,11 +58,6 @@ table.past-flow-session-table {
   border-bottom-color: #a94442;
 }
 
-code {
-  /* Bootstrap: Hot pink for code? Really? */
-  color: #333;
-}
-
 .relate-flow-page-toc {
   @extend .px-2;
 }
@@ -346,7 +342,7 @@ div.rendered_html div.highlight > pre {
   @extend .mx-2;
   @extend .dropdown;
   > a {
-    @extend .link-dark;
+    @extend .link-secondary;
     @extend .text-decoration-none;
     @extend .dropdown-toggle;
   }
@@ -358,8 +354,10 @@ div.rendered_html div.highlight > pre {
 
 .relate-well {
   @extend .card;
+  /*
   @extend .text-dark;
   @extend .bg-light;
+  */
   @extend .p-3;
   @extend .mb-3;
 }

diff --git a/relate/templates/base.html b/relate/templates/base.html
@@ -28,7 +28,7 @@
 
   <body>
     {% block fixed_navbar %}
-      <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4 border-bottom shadow-sm">
+      <nav class="navbar navbar-expand-lg secondary-color bg-secondary-subtle mb-4 border-bottom shadow-sm">
         <div class="container">
           <a class="navbar-brand"
              href="{% block brand_link %}{% url 'relate-home' %}{% endblock %}" >