From 9fae286c11f1a2e5950ffc06e51455f3189a89d8 Mon Sep 17 00:00:00 2001
From: Anthony Dumas
Date: Fri, 21 Jun 2019 00:48:23 +0200
Subject: [PATCH] Ajout du mode sombre !
---
_sass/dark-theme.scss | 53 +++++++++++++++++++++++++++++++++++++++++++
_sass/main.scss | 5 ++++
css/main.css | 36 +++++++++++++++++++++++++++++
index.html | 5 ++++
4 files changed, 99 insertions(+)
create mode 100644 _sass/dark-theme.scss
diff --git a/_sass/dark-theme.scss b/_sass/dark-theme.scss
new file mode 100644
index 0000000..e6bb117
--- /dev/null
+++ b/_sass/dark-theme.scss
@@ -0,0 +1,53 @@
+/**
+ Dark Theme
+**/
+@media (prefers-color-scheme: dark) {
+ .dark-theme-only{
+ display:inline;
+ }
+ .hero{
+ background-color:darken(#5c9ead,35%)!important;
+ color:#ffffff;
+ }
+
+ #photosAndButtons .card-content{
+ background-color:darken(#5c9ead,40%)!important;
+ }
+
+ p.title,
+ span.title{
+ color:#ffffff;
+ }
+
+ p.subtitle{
+ color:#ffffff;
+ }
+
+ .is-primary
+ {
+ background-color:darken(#5c9ead,40%)!important;
+ }
+ .tile.is-vertical{
+ background-color:unset;
+ }
+
+ .is-info{
+ background-color: darken(#5c9ead,41%)!important;
+ }
+
+ section.hero.is-primary.is-bold{
+ background-image: none;
+ background-color:darken(#5c9ead,30%)!important;
+ }
+
+ body footer{
+ background-color: darken(#5c9ead,42%)!important;
+ }
+
+ .button{
+ background-color: darken(#5c9ead,41%);
+ border-color:darken(#5c9ead,30%);
+ border-width: 4px;
+ color:white;
+ }
+}
\ No newline at end of file
diff --git a/_sass/main.scss b/_sass/main.scss
index e877b04..1174de5 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -54,8 +54,13 @@ body{
overflow-x: hidden;
}
+.dark-theme-only{
+ display:none;
+}
+
@import "../node_modules/bulma/bulma";
@import "icon";
+@import "dark-theme";
#idCard {
diff --git a/css/main.css b/css/main.css
index eab3b07..4132c29 100644
--- a/css/main.css
+++ b/css/main.css
@@ -31,6 +31,9 @@ html {
body {
overflow-x: hidden; }
+.dark-theme-only {
+ display: none; }
+
/*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */
@keyframes spinAround {
from {
@@ -6998,6 +7001,39 @@ label.panel-block {
.icon-print:before {
content: "\e906"; }
+/**
+ Dark Theme
+**/
+@media (prefers-color-scheme: dark) {
+ .dark-theme-only {
+ display: inline; }
+ .hero {
+ background-color: #1d343a !important;
+ color: #ffffff; }
+ #photosAndButtons .card-content {
+ background-color: #142529 !important; }
+ p.title,
+ span.title {
+ color: #ffffff; }
+ p.subtitle {
+ color: #ffffff; }
+ .is-primary {
+ background-color: #142529 !important; }
+ .tile.is-vertical {
+ background-color: unset; }
+ .is-info {
+ background-color: #132225 !important; }
+ section.hero.is-primary.is-bold {
+ background-image: none;
+ background-color: #25444b !important; }
+ body footer {
+ background-color: #111f22 !important; }
+ .button {
+ background-color: #132225;
+ border-color: #25444b;
+ border-width: 4px;
+ color: white; } }
+
#idCard .hero-body {
padding-bottom: 2rem;
padding-top: 2rem; }
diff --git a/index.html b/index.html
index c766f86..52187cc 100644
--- a/index.html
+++ b/index.html
@@ -295,6 +295,11 @@
+
+
+ (Ceci est le thème sombre !)
+
+