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 @@ Powered By Infomaniak.com

+

+ + (Ceci est le thème sombre !) + +