fiddle with dark mode colours
Diff
chartered-frontend/src/dark.sass | 19 +++++++++++++++----
chartered-frontend/src/pages/Dashboard.tsx | 2 +-
2 files changed, 15 insertions(+), 6 deletions(-)
@@ -1,17 +1,19 @@
@import "../node_modules/bootstrap/scss/functions"
@import "../node_modules/bootstrap/scss/variables"
@import "../node_modules/bootstrap/scss/mixins"
@import "../node_modules/bootstrap/scss/_navbar"
$dark-bg-color: hsl(213, 44%, 10%)
html, body
@media(prefers-color-scheme: dark)
background: hsl(213, 44%, 7%) !important
background: $dark-bg-color !important
.dark
$primary: hsl(212, 70%, 30%)
$secondary: hsl(213, 44%, 7%)
$primary: hsl(212, 70%, 49%)
$secondary: $dark-bg-color
$dark: hsl(0, 0%, 0%)
$card-border-color: hsl(212, 25%, 12%)
$card-border-color: hsl(212, 25%, 22%)
$light: rgba(255, 255, 255, 0.55)
$link-color: $primary
@@ -34,7 +36,14 @@
color: $body-color !important
a.btn
color: white
color: $link-color
.btn-outline-light
border-color: $link-color
&:hover
color: $body-color
background-color: $link-color
table
border-color: $card-border-color !important
@@ -160,7 +160,7 @@
className="text-decoration-none"
>
<div className="card border-0 mb-2 shadow-sm">
<div className="card-body text-black d-flex flex-row">
<div className="card-body d-flex flex-row">
<div className="flex-grow-1 align-self-center">
<h6 className="text-primary my-0">
<span className="text-muted">{organisation}/</span>