tmp commit (i dont have time)

scripts.js

@@ -6,7 +6,6 @@ $(document).ready(function() {
         // Changement aléatoire de la couleur
         $("header").css("background-color", color[col_rd]);
         $("section.container a").css("background-color", color[col_rd]);
-        // $("hr").css("border-color", color[col_rd]);
         $("section.container a").hover(function(){
                 $(this).css("background-color", hexToRgbA(color[col_rd], 0.8));
             }, function(){

styles.css

@@ -8,13 +8,42 @@
 }
 
 :root {
-    --accent-color: #444;
+    --accent-color: #444444;
+    --text-color: #333333;
+    --background-color: #ededed;
+    --border-color: #e4e4e4;
+    --light-border-color: #eeeeee;
+    --color1: #EF476F;
+    --color2: #F2951D;
+    --color3: #8E91D1;
+    --color4: #6D9C42;
+    --color5: #2A6EF7;
+    --color6: #D5D872;
 }
 
-.clear { clear: both; }
+@media (prefers-color-scheme: dark) {
+    :root {
+        --text-color: #ffffff;
+        --background-color: #222222;
+        --border-color: #555555;
+        --light-border-color: #444444;
+        --color1: #ef6989;
+        --color2: #f2a541;
+        --color3: #a4a6dd;
+        --color4: #8ab761;
+        --color5: #3f7bf4;
+        --color6: #e2e587;
+    }
+
+    a { color: #ccc; }
+    a:hover { color: #999; }
+    a:active { color: #bbb; }
+
+    ul.files-list li div { background: #EEEEEE; color: #222222; }
+}
 
 html, body {
-    background-color: #ededed;
+    background-color: var(--background-color);
     color: #333333;
     font-family: 'Nunito', sans-serif;
     display: flex;
@@ -26,12 +55,10 @@ body > * {
     flex-shrink: 0;
 }
 
-hr { border: 0; border-bottom: 1px dotted #DDDDDD; margin: 10px 0px; }
-
 div.container {
     margin: 0;
     box-shadow: 0 0 25px 0px rgba(0,0,0,0.15);
-    background-color: #ffffff;
+    background-color: var(--text-color);
     width: 100%;
     position: relative;
 }
@@ -139,7 +166,6 @@ header div.nickname { font-size: 42px; margin-top: 30px; font-weight: bold; }
 header div.description { font-size: 14px; margin-top: -5px; }
 
 @media only screen and (min-width: 1220px) {
-    hr { margin: 15px 0; }
     div.container { margin: 75px auto 0 !important; }
     .container .row { line-height: normal; margin: 10px; }
     section.container a, .container h3 { font-size: 16px; height: 46px; line-height: 46px; }
@@ -172,7 +198,7 @@ section.content {
     background-color: #eee;
 }
 
-section.content a { color: var(--accent-color); }
+section.content a { color: var(--text-color); }
 section.content a:hover { color: var(--accent-color); opacity: 0.5; }
 
 section.cours a {
@@ -224,7 +250,7 @@ html.dark button.theme_toggle:hover { color: orange; border-color: orange; }
 ul.files-list {
     position: relative;
     left: 170px;
-    border-left: solid 4px #e4e4e4;
+    border-left: solid 4px var(--border-color);
     padding: 0 0 0 25px;
     width: calc(100% - 170px);
 }
@@ -234,7 +260,7 @@ ul.files-list li {
     margin: 0 0 12px 0;
     font-weight: bold;
     padding: 0 0 12px 0;
-    border-bottom: 1px dashed #EEEEEE;
+    border-bottom: 1px dashed var(--light-border-color);
 }
 
 ul.files-list li:last-child { border-bottom: none; margin: 0; }
@@ -247,7 +273,7 @@ ul.files-list li::after {
     box-shadow: 0 0 0 6px;
     content: "•";
     vertical-align: middle;
-    color: #ffffff;
+    color: var(--text-color);
     border-radius: 3px;
     width: 15px;
     height: 15px;
@@ -256,12 +282,12 @@ ul.files-list li::after {
     text-align: center;
 }
 
-ul.files-list li.color1::after { background: #EF476F; }
-ul.files-list li.color2::after { background: #F2951D; }
-ul.files-list li.color3::after { background: #8E91D1; }
-ul.files-list li.color4::after { background: #6D9C42; }
-ul.files-list li.color5::after { background: #2A6EF7; }
-ul.files-list li.color6::after { background: #D5D872; }
+ul.files-list li.color1::after { background: var(--color1); }
+ul.files-list li.color2::after { background: var(--color2); }
+ul.files-list li.color3::after { background: var(--color3); }
+ul.files-list li.color4::after { background: var(--color4); }
+ul.files-list li.color5::after { background: var(--color5); }
+ul.files-list li.color6::after { background: var(--color6); }
 
 ul.files-list li div {
     position: absolute;
@@ -280,37 +306,3 @@ ul.files-list li div {
     color: #EEEEEE;
     padding: 0 10px;
 }
-
-/* Turn off the lights ... */
-
-html.dark, html.dark body {
-    background-color: #222222;
-    color: #ffffff;
-}
-
-html.dark a { color: #ccc; }
-html.dark a:hover { color: #999; }
-html.dark a:active { color: #bbb; }
-
-html.dark div.container { background-color: #333333; }
-
-html.dark div.section { border-bottom-color: #444444; }
-html.dark div.section h2 { color: #ee6770; }
-
-html.dark hr { border-bottom-color: #444444; }
-html.dark section.container a { color: #FFFFFF; }
-
-html.dark ul.files-list { border-left-color: #555555; }
-html.dark ul.files-list li { border-bottom-color: #444444; }
-html.dark ul.files-list li::after { color: #333333; }
-html.dark ul.files-list li div { background: #EEEEEE; color: #222222; }
-
-html.dark ul.files-list li.color1::after { background: #ef6989; }
-html.dark ul.files-list li.color2::after { background: #f2a541; }
-html.dark ul.files-list li.color3::after { background: #a4a6dd; }
-html.dark ul.files-list li.color4::after { background: #8ab761; }
-html.dark ul.files-list li.color5::after { background: #3f7bf4; }
-html.dark ul.files-list li.color6::after { background: #e2e587; }
-
-html.dark section.header_links a { color: #FFFFFF !important; }
-html.dark section.content { background: #444444; color: #FFFFFF !important; }