preliminary dark mode support
Diff
chartered-frontend/src/dark.sass | 96 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
chartered-frontend/src/index.sass | 10 +++++++---
chartered-frontend/src/index.tsx | 9 +++++++++
chartered-frontend/src/pages/Dashboard.tsx | 6 +++---
chartered-frontend/src/pages/Loading.tsx | 2 +-
chartered-frontend/src/pages/Login.tsx | 2 +-
chartered-frontend/src/pages/Search.tsx | 6 +++---
chartered-frontend/src/pages/User.tsx | 2 +-
chartered-frontend/src/pages/crate/CrateView.tsx | 6 +++---
chartered-frontend/src/pages/crate/OrganisationView.tsx | 4 ++--
chartered-frontend/src/pages/organisations/CreateOrganisation.tsx | 2 +-
chartered-frontend/src/pages/organisations/ListOrganisations.tsx | 2 +-
chartered-frontend/src/pages/ssh-keys/AddSshKeys.tsx | 2 +-
chartered-frontend/src/pages/ssh-keys/ListSshKeys.tsx | 2 +-
14 files changed, 130 insertions(+), 21 deletions(-)
@@ -1,0 +1,96 @@
@import "../node_modules/bootstrap/scss/functions"
@import "../node_modules/bootstrap/scss/variables"
@import "../node_modules/bootstrap/scss/mixins"
@import "../node_modules/bootstrap/scss/_navbar"
html, body
@media(prefers-color-scheme: dark)
background: hsl(213, 44%, 7%) !important
.dark
$primary: hsl(212, 70%, 30%)
$secondary: hsl(213, 44%, 7%)
$dark: hsl(0, 0%, 0%)
$card-border-color: hsl(212, 25%, 12%)
$light: rgba(255, 255, 255, 0.55)
$link-color: $primary
$body-color: $light
$body-bg: $secondary
$theme-colors: ("primary": $primary, "secondary": $secondary, "danger": $danger, "info": $indigo, "dark": $dark, "light": $light)
@each $color, $value in $theme-colors
--#{$variable-prefix}#{$color}: #{$value}
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value")
@each $color, $value in $theme-colors-rgb
--#{$variable-prefix}#{$color}-rgb: #{$value}
a
color: $link-color
table td
color: $body-color !important
a.btn
color: white
table
border-color: $card-border-color !important
.nav-pills .nav-item .nav-link.active
background: $card-border-color !important
.list-group-item
background: transparent !important
color: rgba(255, 255, 255, 0.55) !important
.card
background: $body-bg !important
border: 1px solid $card-border-color !important
color: rgba(255, 255, 255, 0.55) !important
.card-header
border-bottom: 1px solid $card-border-color !important
.list-group
border-top: none
.card
background: $card-border-color !important
pre > pre
text-shadow: rgba(0, 0, 0, .2) 0 1px !important
background: $card-border-color !important
code
text-shadow: rgba(0, 0, 0, .2) 0 1px !important
code
background: $card-border-color !important
.form-control
background: transparent !important
border-color: $card-border-color !important
.input-group
border-color: $card-border-color
.input-group-text
background: $body-bg !important
color: white
border-color: $card-border-color
.form-control
background: $secondary !important
.navbar
background: $card-border-color !important
@extend .navbar-dark
.navbar-brand
color: $body-color !important
--#{$variable-prefix}body-color: #{$body-color}
--#{$variable-prefix}body-bg: #{$body-bg}
@@ -1,4 +1,11 @@
@import "../node_modules/bootstrap/scss/functions"
@import "../node_modules/bootstrap/scss/variables"
@import "../node_modules/bootstrap/scss/mixins"
@import "../node_modules/bootstrap/scss/root"
$primary: #0d6efd
$body-bg: $primary
$body-color: white
$font-family-monospace: "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
$font-size-base: 0.875rem
$enable-cssgrid: true
@@ -9,9 +16,6 @@
html
background: white
body
background: $primary
code
background: #f5f2f0
@@ -1,3 +1,4 @@
import "./dark.sass";
import "./index.sass";
import "./overscrollColourFixer.ts";
@@ -24,6 +25,14 @@
import CreateOrganisation from "./pages/organisations/CreateOrganisation";
import User from "./pages/User";
import Search from "./pages/Search";
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.querySelector("body")?.classList.add("dark");
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
document.querySelector("body")?.classList.toggle("dark", e.matches);
});
function App() {
return (
@@ -64,7 +64,7 @@
});
return (
<div className="text-white">
<div>
<Nav />
<div className="container mt-4 pb-4">
@@ -163,10 +163,10 @@
<div className="card-body text-black d-flex flex-row">
<div className="flex-grow-1 align-self-center">
<h6 className="text-primary my-0">
<span className="text-secondary">{organisation}/</span>
<span className="text-muted">{organisation}/</span>
{name}
</h6>
<small className="text-secondary">{children}</small>
<small className="text-muted">{children}</small>
</div>
<ChevronRight size={16} className="align-self-center" />
@@ -10,7 +10,7 @@
export default function LoadingPage() {
return (
<div className="min-vh-100 bg-primary d-flex justify-content-center align-items-center">
<div className="min-vh-100 d-flex justify-content-center align-items-center">
<div className="spinner-border text-light" role="status">
<span className="visually-hidden">Loading...</span>
</div>
@@ -69,7 +69,7 @@
};
return (
<div className="bg-primary p-4 text-white min-vh-100 d-flex justify-content-center align-items-center">
<div className="p-4 min-vh-100 d-flex justify-content-center align-items-center">
<div>
<h1>chartered ✈️</h1>
<h6>a private, authenticated cargo registry</h6>
@@ -19,7 +19,7 @@
: "";
return (
<div className="text-white">
<div>
<Nav />
<div className="container mt-4 pb-4">
@@ -175,13 +175,13 @@
className="text-decoration-none"
>
<h4 className="text-primary d-inline px-2 m-0">
<span className="text-secondary">
<span className="text-muted">
{crate.organisation}
</span>
/{crate.name}
</h4>
</Link>
<h6 className="text-secondary m-0 mt-1">{crate.version}</h6>
<h6 className="text-muted m-0 mt-1">{crate.version}</h6>
</div>
<p className="m-0">{crate.description}</p>
@@ -43,7 +43,7 @@
const ready = !!user;
return (
<div className="text-white">
<div>
<Nav />
<div className="container mt-4 pb-4">
@@ -103,7 +103,7 @@
crateInfo.homepage || crateInfo.documentation || crateInfo.repository;
return (
<div className="text-white">
<div>
<Nav />
<div className="container mt-4 pb-4">
@@ -121,13 +121,13 @@
<h1 className="text-primary d-inline px-2">
<Link
to={`/crates/${organisation}`}
className="text-secondary text-decoration-none"
className="text-muted text-decoration-none"
>
{organisation}/
</Link>
{crate}
</h1>
<h2 className="text-secondary m-0">{crateVersion?.vers}</h2>
<h2 className="text-muted m-0">{crateVersion?.vers}</h2>
</div>
<p className="m-0">{crateInfo.description}</p>
@@ -67,7 +67,7 @@
const ready = !!organisationDetails;
return (
<div className="text-white">
<div>
<Nav />
<div className="container mt-4 pb-4">
@@ -201,7 +201,7 @@
<td className="align-middle">
<div>
<Link to={`/crates/${organisation}/${v.name}`}>
<span className="text-secondary">{organisation}/</span>
<span className="text-muted">{organisation}/</span>
{v.name}
</Link>
</div>
@@ -51,7 +51,7 @@
};
return (
<div className="text-white">
<div>
<Nav />
<div className="container mt-4 pb-4">
@@ -33,7 +33,7 @@
}
return (
<div className="text-white">
<div>
<Nav />
<div className="container mt-4 pb-4">
@@ -47,7 +47,7 @@
};
return (
<div className="text-white">
<div>
<Nav />
<div className="container mt-4 pb-4">
@@ -82,7 +82,7 @@
dateMonthAgo.setMonth(dateMonthAgo.getMonth() - 1);
return (
<div className="text-white">
<div>
<Nav />
<div className="container mt-4 pb-4">