FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement proper dark mode (#800)

Browse source 
* Implement proper dark mode

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Fix footer color in light mode

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

---------

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
Emruz Hossain 2023-09-30 05:04:48 +06:00 • committed by GitHub
parent 6dc9d1d33d
commit 5f0aebcf68
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 1136 additions and 353 deletions
Download patch file Download diff file Expand all files Collapse all files

83
assets/styles/variables.scss
View file

@ -13,33 +13,76 @@ $breakpoints: (
// Color are chosen from TailwindCSS color scheme
// https://tailwindcss.com/docs/customizing-colors
// accent-color
$accent-color: #0891b2; // cyan 600
$hover-over-accent-color: #06b6d4; // cyan 500
$text-over-accent-color: #e4e4e7; // zinc 200
// background-color
$bg-primary: #f8fafc; // slate 50
$bg-primary-inverse: #0f172a; // slate 900
$bg-secondary: #e2e8f0; // slate 200
$bg-card: #fff;
// text-color
$heading-color: #1e293b; // slate 800
$text-color: #334155; // slate 700
$inverse-text-color: #cbd5e1; // slate 300
$muted-text-color: #64748b; // slate 500
$inline-code-color: #dc2626; // red 600
$highlight-color: #fde68a; // amber 200
// transitions
$transition-duration: 0.3s;
$transition-type: ease-out;
// borders and shadows
$border-color: rgba($accent-color, 0.1);
$box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
// themes
$themes: (
'light': (
// cyan 600
'accent-color': #0891b2,
// cyan 500
'hover-over-accent-color': #06b6d4,
// zinc 200
'text-over-accent-color': #e4e4e7,
// slate 50
'bg-primary': #f8fafc,
// slate 900
'bg-primary-inverse': #0f172a,
// slate 200
'bg-secondary': #e2e8f0,
'bg-card': #fff,
// slate 800
'heading-color': #1e293b,
// slate 700
'text-color': #334155,
// slate 300
'inverse-text-color': #cbd5e1,
// slate 500
'muted-text-color': #64748b,
// red 600
'inline-code-color': #dc2626,
// amber 200
'highlight-color': #fde68a,
// slate 900
'footer-color': #0f172a,
),
'dark': (
// cyan 600
'accent-color': #0891b2,
// cyan 500
'hover-over-accent-color': #06b6d4,
// zinc 200
'text-over-accent-color': #e4e4e7,
// gray-800
'bg-primary': #1f2937,
// slate 900
'bg-primary-inverse': #0f172a,
// gray 900
'bg-secondary': #111827,
// slate 800
'bg-card': #1e293b,
// slate 100
'heading-color': #f1f5f9,
// slate 300
'text-color': #cbd5e1,
// slate 900
'inverse-text-color': #0f172a,
// slate 500
'muted-text-color': #64748b,
// red 600
'inline-code-color': #dc2626,
// amber 200
'highlight-color': #fde68a,
// slate 900
'footer-color': #0f172a,
),
);
$brand-colors: (
'facebook': #3b5998,
'twitter': #1da1f2,