diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss index 79cfd5e..98b8811 100644 --- a/assets/scss/_header.scss +++ b/assets/scss/_header.scss @@ -1,5 +1,5 @@ .header { - background: #fafafa; + background: $light-background-secondary; display: flex; align-items: center; justify-content: center; diff --git a/assets/scss/_logo.scss b/assets/scss/_logo.scss index 2491930..3669514 100644 --- a/assets/scss/_logo.scss +++ b/assets/scss/_logo.scss @@ -22,10 +22,13 @@ display: inline-block; width: 10px; height: 1rem; - background: $cursor-color; + background: $light-cursor-color; margin-left: 5px; border-radius: 1px; animation: cursor 1s infinite; + .dark-theme &{ + background: $dark-cursor-color; + } } @media (prefers-reduced-motion: reduce) { diff --git a/assets/scss/_menu.scss b/assets/scss/_menu.scss index ad754f9..047b421 100644 --- a/assets/scss/_menu.scss +++ b/assets/scss/_menu.scss @@ -1,5 +1,5 @@ .menu { - background: #fafafa; + background: $light-background-secondary; border-right: 1px solid; margin-right: 18px; z-index: 9999; diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 32d3908..07e836b 100644 --- a/assets/scss/_variables.scss +++ b/assets/scss/_variables.scss @@ -3,18 +3,17 @@ /* light theme color */ $light-background: #fff; $light-background-secondary: #eaeaea; -$light-color: #222; +$light-color: #494949; $light-color-secondary: #999; $light-border-color: #dcdcdc; - +$light-cursor-color: #a85656; /* dark theme colors */ $dark-background: #34363a; $dark-background-secondary: #404653; $dark-color: #d4d4d4; $dark-color-secondary: #a1a1a1; $dark-border-color: #4a4b50; - -$cursor-color: #c75f36; +$dark-cursor-color: #a85656; $media-size-phone: "(max-width: 684px)"; $media-size-tablet: "(max-width: 900px)";