From c740bfdbd0631e10aaefab022859dbae1be1cb79 Mon Sep 17 00:00:00 2001 From: Yuri Sulyma Date: Mon, 2 Feb 2026 12:31:38 +0100 Subject: [PATCH 1/5] initial css changes --- src/App.vue | 15 +++++++++++---- src/components/SpecimenBar.vue | 2 +- src/components/SpecimenCard.vue | 2 +- src/components/SwitcherModal.vue | 2 +- src/components/Tab.vue | 2 +- src/views/minor/NavBar.vue | 2 +- 6 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/App.vue b/src/App.vue index 2f8239a6..301bd83f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -76,11 +76,12 @@ /* Colors */ --ns-color-primary: #809fff; + --ns-color-surface: light-dark(#ffffff, #282733); --ns-color-white: #ffffff; - --ns-color-pale: #e5e5e5; - --ns-color-light: #b5b5b5; - --ns-color-grey: #636363; - --ns-color-black: #2f2f2f; + --ns-color-pale: light-dark(#e5e5e5, #4d4b63); + --ns-color-light: light-dark(#b5b5b5, red); + --ns-color-grey: light-dark(#636363, #838383); + --ns-color-black: light-dark(#2f2f2f, #605e7a); /* Bolditude */ --ns-font-weight-medium: 500; @@ -113,6 +114,12 @@ */ } + /* dark mode */ + :root { + background-color: var(--ns-color-surface); + color-scheme: light dark; + } + /* Display font */ @font-face { font-family: 'Infinity'; diff --git a/src/components/SpecimenBar.vue b/src/components/SpecimenBar.vue index 76472815..7d5ffd1e 100644 --- a/src/components/SpecimenBar.vue +++ b/src/components/SpecimenBar.vue @@ -315,7 +315,7 @@ visibility: hidden; width: max-content; max-width: 240px; - background-color: var(--ns-color-white); + background-color: var(--ns-color-surface); color: var(--ns-color-black); text-align: left; border: 1px solid var(--ns-color-black); diff --git a/src/components/SpecimenCard.vue b/src/components/SpecimenCard.vue index 032d386a..ee3ca8d7 100644 --- a/src/components/SpecimenCard.vue +++ b/src/components/SpecimenCard.vue @@ -130,7 +130,7 @@ margin-left: 8px; margin-right: 8px; margin-bottom: 8px; - color: #6c757d; + color: var(--ns-color-grey); } .delete-button { user-select: none; diff --git a/src/components/SwitcherModal.vue b/src/components/SwitcherModal.vue index 9cc0cb1c..7eef574b 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-surface); display: flex; flex-direction: column; } diff --git a/src/components/Tab.vue b/src/components/Tab.vue index fa69ab0b..0434a75d 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-surface); width: 100%; height: calc(100% - 16px); overflow-y: scroll; diff --git a/src/views/minor/NavBar.vue b/src/views/minor/NavBar.vue index f942315e..f1b31180 100644 --- a/src/views/minor/NavBar.vue +++ b/src/views/minor/NavBar.vue @@ -169,7 +169,7 @@ right: 0; width: auto; z-index: 10000; - background-color: var(--ns-color-white); + background-color: var(--ns-color-surface); opacity: 1; margin-top: 0.3ex; padding-bottom: 0.5ex; From ca851d3daa2e65636e55ac5e4ba4345d00993bcb Mon Sep 17 00:00:00 2001 From: Yuri Sulyma Date: Mon, 2 Feb 2026 12:38:39 +0100 Subject: [PATCH 2/5] convert svg --- src/assets/img/logo.svg | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) 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 @@ - - + + From 7659b35eb548ad9fde2547f6602180cc7800ff3b Mon Sep 17 00:00:00 2001 From: Yuri Sulyma Date: Mon, 2 Feb 2026 18:56:36 +0100 Subject: [PATCH 3/5] dark mode support --- src/App.vue | 7 ++++--- src/components/OEISbar.vue | 4 ++-- src/components/ParamEditor.vue | 4 ++-- src/components/ParamField.vue | 6 +++--- src/components/SpecimenBar.vue | 6 +++--- src/components/SpecimenCard.vue | 6 +++--- src/components/SpecimenTitle.vue | 2 +- src/components/SpecimensGallery.vue | 6 +++--- src/components/SwitcherModal.vue | 6 +++--- src/components/Tab.vue | 2 +- src/views/minor/NavBar.vue | 10 +++++----- 11 files changed, 30 insertions(+), 29 deletions(-) diff --git a/src/App.vue b/src/App.vue index 301bd83f..56aaaf09 100644 --- a/src/App.vue +++ b/src/App.vue @@ -76,10 +76,11 @@ /* Colors */ --ns-color-primary: #809fff; - --ns-color-surface: light-dark(#ffffff, #282733); + --ns-color-bg: light-dark(#ffffff, #282733); + --ns-color-fg: light-dark(#2f2f2f, #ffffff); --ns-color-white: #ffffff; --ns-color-pale: light-dark(#e5e5e5, #4d4b63); - --ns-color-light: light-dark(#b5b5b5, red); + --ns-color-light: #b5b5b5; --ns-color-grey: light-dark(#636363, #838383); --ns-color-black: light-dark(#2f2f2f, #605e7a); @@ -116,7 +117,7 @@ /* dark mode */ :root { - background-color: var(--ns-color-surface); + background-color: var(--ns-color-bg); color-scheme: light dark; } 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 7d5ffd1e..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-surface); - 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 ee3ca8d7..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 { @@ -137,7 +137,7 @@ 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 7eef574b..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-surface); + 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 0434a75d..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-surface); + 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 f1b31180..b7bcaaf4 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; @@ -169,7 +169,7 @@ right: 0; width: auto; z-index: 10000; - background-color: var(--ns-color-surface); + background-color: var(--ns-color-bg); opacity: 1; margin-top: 0.3ex; padding-bottom: 0.5ex; @@ -186,7 +186,7 @@ } .nav-link { - color: var(--ns-color-black); + color: var(--ns-color-fg); padding-top: 0ex; padding-bottom: 0ex; } @@ -212,7 +212,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; From 951ee5dccc5929056931307369f2b0168752a4e3 Mon Sep 17 00:00:00 2001 From: Yuri Sulyma Date: Mon, 2 Feb 2026 19:11:17 +0100 Subject: [PATCH 4/5] lint --- src/App.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.vue b/src/App.vue index 56aaaf09..d3a26060 100644 --- a/src/App.vue +++ b/src/App.vue @@ -117,8 +117,8 @@ /* dark mode */ :root { - background-color: var(--ns-color-bg); - color-scheme: light dark; + background-color: var(--ns-color-bg); + color-scheme: light dark; } /* Display font */ From 7fff90fe803cbca08ed3e1da4c38b5dd451b85d1 Mon Sep 17 00:00:00 2001 From: Yuri Sulyma Date: Mon, 2 Feb 2026 23:38:34 +0100 Subject: [PATCH 5/5] use media query for better compatibility --- src/App.vue | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/App.vue b/src/App.vue index d3a26060..d779b94f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -76,13 +76,23 @@ /* Colors */ --ns-color-primary: #809fff; - --ns-color-bg: light-dark(#ffffff, #282733); - --ns-color-fg: light-dark(#2f2f2f, #ffffff); --ns-color-white: #ffffff; - --ns-color-pale: light-dark(#e5e5e5, #4d4b63); --ns-color-light: #b5b5b5; - --ns-color-grey: light-dark(#636363, #838383); - --ns-color-black: light-dark(#2f2f2f, #605e7a); + + /* 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;