diff --git a/src/App.vue b/src/App.vue index 2f8239a6..d779b94f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -77,10 +77,22 @@ /* Colors */ --ns-color-primary: #809fff; --ns-color-white: #ffffff; - --ns-color-pale: #e5e5e5; --ns-color-light: #b5b5b5; - --ns-color-grey: #636363; + + /* colors with light/dark variants */ + --ns-color-bg: #ffffff; --ns-color-black: #2f2f2f; + --ns-color-fg: #2f2f2f; + --ns-color-grey: #636363; + --ns-color-pale: #e5e5e5; + + @media (prefers-color-scheme: dark) { + --ns-color-bg: #282733; + --ns-color-black: #605e7a; + --ns-color-fg: #ffffff; + --ns-color-grey: #838383; + --ns-color-pale: #4d4b63; + } /* Bolditude */ --ns-font-weight-medium: 500; @@ -113,6 +125,12 @@ */ } + /* dark mode */ + :root { + background-color: var(--ns-color-bg); + color-scheme: light dark; + } + /* Display font */ @font-face { font-family: 'Infinity'; diff --git a/src/assets/img/logo.svg b/src/assets/img/logo.svg index 87fd9efe..3c6fa86a 100644 --- a/src/assets/img/logo.svg +++ b/src/assets/img/logo.svg @@ -1,4 +1,5 @@ + @@ -13,6 +14,6 @@ - - + + diff --git a/src/components/OEISbar.vue b/src/components/OEISbar.vue index a6130063..89a7ded2 100644 --- a/src/components/OEISbar.vue +++ b/src/components/OEISbar.vue @@ -182,7 +182,7 @@ right: -8px; width: 200%; z-index: 3; - background: var(--ns-color-white); + background: var(--ns-color-bg); cursor: pointer; .mono { @@ -206,7 +206,7 @@ } } a:hover { - color: var(--ns-color-black); + color: var(--ns-color-fg); } } diff --git a/src/components/ParamEditor.vue b/src/components/ParamEditor.vue index b16dee12..000186ff 100644 --- a/src/components/ParamEditor.vue +++ b/src/components/ParamEditor.vue @@ -201,7 +201,7 @@ } } a:hover { - color: var(--ns-color-black); + color: var(--ns-color-fg); } } @@ -257,7 +257,7 @@ .error-box { border: 1px solid #ff2222; - background: var(--ns-color-white); + background: var(--ns-color-bg); padding: 2px 8px; } diff --git a/src/components/ParamField.vue b/src/components/ParamField.vue index d8330ba5..d20125d9 100644 --- a/src/components/ParamField.vue +++ b/src/components/ParamField.vue @@ -363,7 +363,7 @@ select { border: 1px solid var(--ns-color-black); - background-color: var(--ns-color-white); + background-color: var(--ns-color-bg); display: block; width: 100%; padding: 8px; @@ -433,8 +433,8 @@ .desc-tooltip-text { width: 240px; - background-color: var(--ns-color-white); - color: var(--ns-color-black); + background-color: var(--ns-color-bg); + color: var(--ns-color-fg); text-align: left; border: 1px solid var(--ns-color-black); padding: 8px; diff --git a/src/components/SpecimenBar.vue b/src/components/SpecimenBar.vue index 76472815..fcf8b761 100644 --- a/src/components/SpecimenBar.vue +++ b/src/components/SpecimenBar.vue @@ -257,7 +257,7 @@ user-select: none; &:hover { - color: var(--ns-color-black); + color: var(--ns-color-fg); } } } @@ -315,8 +315,8 @@ visibility: hidden; width: max-content; max-width: 240px; - background-color: var(--ns-color-white); - color: var(--ns-color-black); + background-color: var(--ns-color-bg); + color: var(--ns-color-fg); text-align: left; border: 1px solid var(--ns-color-black); padding: 8px; diff --git a/src/components/SpecimenCard.vue b/src/components/SpecimenCard.vue index 032d386a..b7331dc9 100644 --- a/src/components/SpecimenCard.vue +++ b/src/components/SpecimenCard.vue @@ -92,7 +92,7 @@ background-color: var(--ns-color-primary); } .fade-card { - background-color: var(--ns-color-white); + background-color: var(--ns-color-bg); transition: background-color 2s linear; } .card-title-box { @@ -121,7 +121,7 @@ } } a:hover { - color: var(--ns-color-black); + color: var(--ns-color-fg); } } .card-text { @@ -130,14 +130,14 @@ margin-left: 8px; margin-right: 8px; margin-bottom: 8px; - color: #6c757d; + color: var(--ns-color-grey); } .delete-button { user-select: none; margin-top: 1ex; color: var(--ns-color-grey); &:hover { - color: var(--ns-color-black); + color: var(--ns-color-fg); } } diff --git a/src/components/SpecimenTitle.vue b/src/components/SpecimenTitle.vue index 69c9a58c..388e9ebb 100644 --- a/src/components/SpecimenTitle.vue +++ b/src/components/SpecimenTitle.vue @@ -56,7 +56,7 @@ } } a:hover { - color: var(--ns-color-black); + color: var(--ns-color-fg); } } diff --git a/src/components/SpecimensGallery.vue b/src/components/SpecimensGallery.vue index 51b4f5ee..4d87b45b 100644 --- a/src/components/SpecimensGallery.vue +++ b/src/components/SpecimensGallery.vue @@ -121,7 +121,7 @@ cursor: pointer; } .unchosen:hover { - color: var(--ns-color-black); + color: var(--ns-color-fg); } #spec-wrap { overflow: auto; @@ -160,11 +160,11 @@ text-transform: capitalize; } td:last-child { - background-color: var(--ns-color-white); + background-color: var(--ns-color-bg); text-align: center; color: var(--ns-color-grey); &:hover { - color: var(--ns-color-black); + color: var(--ns-color-fg); } } diff --git a/src/components/SwitcherModal.vue b/src/components/SwitcherModal.vue index 9cc0cb1c..bf495d7f 100644 --- a/src/components/SwitcherModal.vue +++ b/src/components/SwitcherModal.vue @@ -312,7 +312,7 @@ click on the trash button on its preview card. max-width: 900px; width: 100%; height: 100%; - background-color: var(--ns-color-white); + background-color: var(--ns-color-bg); display: flex; flex-direction: column; } @@ -329,7 +329,7 @@ click on the trash button on its preview card. #bar { height: 48px; padding: 16px; - background-color: var(--ns-color-white); + background-color: var(--ns-color-bg); display: flex; justify-content: end; align-items: center; @@ -340,7 +340,7 @@ click on the trash button on its preview card. border: none; cursor: pointer; padding: 4px; - color: var(--ns-color-black); + color: var(--ns-color-fg); } } diff --git a/src/components/Tab.vue b/src/components/Tab.vue index fa69ab0b..c190aa9d 100644 --- a/src/components/Tab.vue +++ b/src/components/Tab.vue @@ -361,7 +361,7 @@ .content { position: absolute; top: 16px; - background-color: var(--ns-color-white); + background-color: var(--ns-color-bg); width: 100%; height: calc(100% - 16px); overflow-y: scroll; diff --git a/src/views/minor/NavBar.vue b/src/views/minor/NavBar.vue index 1da36c04..4f34b570 100644 --- a/src/views/minor/NavBar.vue +++ b/src/views/minor/NavBar.vue @@ -116,7 +116,7 @@ } .burger-menu { - color: var(--ns-color-black); + color: var(--ns-color-fg); display: flex; flex-direction: row; justify-content: space-between; @@ -133,7 +133,7 @@ display: none; flex-direction: column; margin-top: 8px; - color: var(--ns-color-black); + color: var(--ns-color-fg); &.open { display: flex; z-index: 1000; @@ -182,7 +182,7 @@ right: 0; width: auto; z-index: 10000; - background-color: var(--ns-color-white); + background-color: var(--ns-color-bg); opacity: 1; margin-top: var(--popup-offset); padding-bottom: 0.5ex; @@ -199,7 +199,7 @@ } .nav-link { - color: var(--ns-color-black); + color: var(--ns-color-fg); padding-top: 0ex; padding-bottom: 0ex; } @@ -225,7 +225,7 @@ .nav-link { font-family: var(--ns-font-display); font-size: var(--ns-size-display); - color: var(--ns-color-black); + color: var(--ns-color-fg); margin-top: 8px; padding-left: 0.5em; padding-right: 0.5em;