diff --git a/src/assets/base.css b/src/assets/base.css index 6d8db1c..6e4dee0 100644 --- a/src/assets/base.css +++ b/src/assets/base.css @@ -12,18 +12,18 @@ /* semantic color variables for this project */ :root { - --color-background: var(--color-black); - --color-text: var(--color-white); + --color-background: var(--color-white); + --color-text: var(--color-black); --color-highlight: var(--color-green); --header-size: var(--header-size-small); } -/* @media (prefers-color-scheme: dark) { +@media (prefers-color-scheme: dark) { :root { --color-background: var(--color-black); --color-text: var(--color-white); } -} */ +} @media (min-width: 1024px) { :root { diff --git a/src/components/Score.vue b/src/components/Score.vue index 65c9cb6..700e756 100644 --- a/src/components/Score.vue +++ b/src/components/Score.vue @@ -188,7 +188,7 @@ function nextQuestion() { justify-content: center align-items: center height: 100% - color: var(--color-white) + color: var(--color-text) flex-direction: column p @@ -196,7 +196,7 @@ function nextQuestion() { text-align: center margin-bottom: 1rem a - color: var(--color-white) + color: var(--color-text) .questions position: fixed top: var(--header-size) diff --git a/src/components/ScoreHeader.vue b/src/components/ScoreHeader.vue index 034bb77..895320f 100644 --- a/src/components/ScoreHeader.vue +++ b/src/components/ScoreHeader.vue @@ -24,7 +24,7 @@ header { width: 100%; z-index: 1; top: 0; - border-bottom: 1px solid var(--color-white); + border-bottom: 1px solid var(--color-text); display: flex; align-items: center; align-content: center; @@ -39,14 +39,14 @@ a { align-items: center; text-align: center; align-content: center; - border-right: 1px solid var(--color-white); + border-right: 1px solid var(--color-text); text-decoration: none; } p { margin: 0 auto; font-size: 2rem; - color: var(--color-white); + color: var(--color-text); } h1 { diff --git a/src/components/ScoresList.vue b/src/components/ScoresList.vue index 7c23d53..4a35ab6 100644 --- a/src/components/ScoresList.vue +++ b/src/components/ScoresList.vue @@ -44,7 +44,7 @@ header display: flex justify-content: center align-items: center - border-bottom: 2px solid var(--color-white) + border-bottom: 2px solid var(--color-text) background: var(--color-green) h1 @@ -88,7 +88,6 @@ ul background-repeat: no-repeat background-size: contain - // border: 2px solid var(--color-white) border-radius: 10px li @@ -97,7 +96,7 @@ ul background: rgba(0, 0, 0, .5) border-radius: 10px position: absolute - border: 2px solid var(--color-white) + border: 2px solid var(--color-text) &#score_1 display: flex @@ -114,7 +113,7 @@ ul right: 6% a - color: var(--color-white) + color: var(--color-text) display: block width: 100% height: 100%