mastermindzh/rickvanlieshout.com
1
0
Fork 0
mirror of https://github.com/mastermindzh/rickvanlieshout.com synced 2025-08-02 23:52:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

dark mode + .... some form of toggle :)

Browse Source
This commit is contained in:
Rick van Lieshout
2022-09-11 00:00:31 +02:00
parent c22687de6d
commit 31c106c58e
20 changed files with 291 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/assets/scss/_variables.scss
View File

@@ -1,14 +1,33 @@
@use "sass:math";
@use "sass:color";
$color-base: hsl(0, 0%, 13%);
$color-primary: hsl(220, 100%, 68%);
$color-secondary: hsl(220, 100%, 68%);
:root {
--bg-color: #fff;
--base: hsl(0, 0%, 13%);
--primary: hsl(220, 100%, 68%);
--secondary: hsl(220, 100%, 68%);
--gray: hsl(230, 23%, 23%);
--gray-border: hsl(230, 77%, 13%);
}
[data-theme="dark"] {
--bg-color: hsl(210, 3.7%, 10.6%);
--base: hsl(219, 14%, 71%);
--primary: hsl(220, 100%, 68%);
--secondary: hsl(220, 100%, 68%);
--gray-border: hsl(220, 10%, 40%);
--gray: hsl(0, 0%, 100%);
}
$color-bg: var(--bg-color);
$color-base: var(--base);
$color-primary: var(--primary);
$color-secondary: var(--secondary);
$color-white: hsl(0, 0%, 100%);
$color-gray: color.adjust($color-base, $lightness: 40%);
$color-gray-border: color.adjust($color-base, $lightness: 77%);
$color-gray-bg: color.adjust($color-base, $lightness: 79%);
$color-gray: color.adjust(hsl(0, 0%, 13%), $lightness: 30%);
$color-gray-border: var(--gray-border);
$color-gray-bg: var(--gray-border);
$typographic-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;

1
src/assets/scss/base/_generic.scss
View File

@@ -6,6 +6,7 @@ html {
}
body {
background-color: $color-bg;
color: $typographic-base-font-color;
font-family: $typographic-font-family;
font-size: $typographic-base-font-size;