Mise en place Bulma dans une application React

src/_sass/dark-theme.scss

@@ -0,0 +1,67 @@
+/**
+    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;
+    }
+
+    p {
+        color: white;
+    }
+
+    #photoProfil {
+        background-color: darken(#5c9ead, 35%);
+    }
+
+    #photosAndButtons .card {
+        box-shadow: unset;
+    }
+
+}

src/_sass/icon.scss

@@ -0,0 +1,39 @@
+.icon .fab {
+    font-family: "icomoon";
+    content: attr(data-icon);
+    speak: none;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    font-style: normal;
+}
+
+.icon-github-alt:before {
+    content: "\e903";
+}
+
+.icon-linke-square:before {
+    content: "\e902";
+}
+
+.icon-envelope-open:before {
+    content: "\e901";
+}
+
+.icon-twit:before {
+    content: "\e904";
+}
+
+.icon-teleg:before {
+    content: "\e900";
+}
+
+.icon-file-pdf-o:before {
+    content: "\e905";
+}
+
+.icon-print:before {
+    content: "\e906";
+}

src/_sass/main.scss

@@ -0,0 +1,118 @@
+@charset "utf-8";
+
+/**
+    Thème
+**/
+$deep-koamaru:#2b4162;
+$myrtle-green:#326273;
+$cadet-blue:#5c9ead;
+$neon-carrot:#fa9f42;
+$white:#ffffff;
+
+/**
+    Variables Bulma
+**/
+$primary:$cadet-blue;
+$primary-invert:#fff;
+$info:$myrtle-green;
+$info-invert:#fff;
+$footer-color:$deep-koamaru;
+$link:$neon-carrot;
+$link-hover:"";
+
+html {
+    background-color: $primary;
+}
+
+body {
+    overflow-x: hidden;
+}
+
+.dark-theme-only {
+    display: none;
+}
+
+@import "../../node_modules/bulma/bulma";
+@import "icon";
+
+#idCard {
+
+    .hero-body {
+        padding-bottom: 2rem;
+        padding-top: 2rem;
+    }
+
+    // permet de re-aligner les tags avec les subtitles
+    .tags {
+        margin-top: -1.25rem;
+    }
+}
+
+// retire les barres de scroll des panneaux experience/education
+#experiences .media-content {
+    overflow: hidden;
+}
+
+footer {
+    background-color: $footer-color !important;
+    color: #fff;
+}
+
+footer strong {
+    color: #fff;
+}
+
+.media-content {
+    margin-top: -6px;
+}
+
+// Pour devices iOS qui ont un notch (si c'est pas un device avec un notch, it's no-tch your problem)
+div.hero-body {
+    margin-left: env(safe-area-inset-left);
+    margin-right: env(safe-area-inset-right);
+}
+
+section#contact .button {
+    min-width: 155px;
+}
+
+@media screen and (max-width: 768px) {
+    .button.is-fullw-mobile {
+        display: flex;
+        width: 100%;
+    }
+}
+
+.displayOnlyOnPrint {
+    display: none;
+}
+
+#buttonsUnderPhoto a {
+    padding-left: 16px;
+    padding-bottom: 0;
+}
+
+#photosAndButtons .media-content p+p {
+    margin-top: -16px;
+}
+
+.tile p.title {
+    font-size: 25px;
+}
+
+// 
+footer small {
+    color: $white;
+}
+
+// Photo de Profil
+#photoProfil {
+    background-color: lightgray;
+}
+
+#mailWhenNoJavascript{
+    text-align: left;
+    font-size: 20px;
+}
+
+@import "dark-theme";