diff --git a/src/app.css b/src/app.css index 12424af..8989c3b 100644 --- a/src/app.css +++ b/src/app.css @@ -1,4 +1,5 @@ @import "omnibox-js/omnibox.css"; +@import "./omnibox.css"; @tailwind base; @tailwind components; @@ -45,6 +46,7 @@ h2, font-size: 20px; font-weight: 500; color: var(--primary-text-color); + @apply dark:text-[#f8fafc]; } .text { font-family: "Fira Sans", sans-serif; @@ -70,19 +72,23 @@ h2, } .crate-list-item:hover { background-color: #f5f3f1; + @apply dark:bg-darkHoverColor; } .crate-list-item .crate-attr { margin: 0 8px; font-size: 16px; + @apply dark:text-darkTextPrimary; } .crate-list-item .crate-desc { color: #565656; padding: 10px 0; font-size: 16px; + @apply dark:text-[#8d8d8d]; } .crate-list-item .crate-extra { color: #565656; font-size: 15px; + @apply dark:text-[#8d8d8d]; } .btn-remove { color: #dd4814; @@ -172,9 +178,11 @@ input:checked + .slider:before { } .btn-primary { background-color: #f9bb2daa; + @apply dark:bg-[#f9bb2d]; } .btn-primary:hover { background-color: #f9bb2d; + @apply dark:bg-[#f9bb2daa]; } .btn-secondary { background-color: #121212bb; @@ -267,4 +275,5 @@ h3 { .selected { background-color: var(--primary-color); + @apply dark:!text-black } diff --git a/src/app.html b/src/app.html index 07d43af..4e84dd8 100644 --- a/src/app.html +++ b/src/app.html @@ -32,6 +32,9 @@ /* Primary theme text color */ --primary-text-color: #121212; } + .dark { + background-color: #121213; + } %sveltekit.head% diff --git a/src/omnibox.css b/src/omnibox.css new file mode 100644 index 0000000..b70138a --- /dev/null +++ b/src/omnibox.css @@ -0,0 +1,171 @@ +.omn-container { + box-sizing: border-box; + display: flex; + z-index: 3; + position: relative; + background: #fff; + border: 1px solid #dfe1e5; + box-shadow: none; + margin: 0 auto; + width: 100%; + align-items: center; + border-radius: 14px; + padding: 4px 10px; + font-size: 15px; + + & + .omn-dropdown { + @apply dark:bg-black dark:text-darkTextPrimary; + & .omn-dim { + @apply dark:text-[#8d8d8d]; + } + & .omn-dropdown-item:hover { + @apply dark:bg-darkHoverColor; + } + & .omn-selected{ + @apply dark:bg-[#333333bf]; + } + & img { + @apply dark:invert; + } + & div:last-child { + & > div { + @apply dark:bg-darkBgPrimary; + } + & button { + @apply hover:dark:bg-[#c8541ac7]; + } + } + } +} +@media (min-width: 768px) { + .omn-container { + border-radius: 24px; + padding: 6px 12px; + font-size: 16px; + } +} +.omn-search-icon, +.omn-clear { + height: 22px; + line-height: 22px; + width: 22px; + margin-right: 5px; +} +.omn-clear { + display: none; + cursor: pointer; + margin-right: 10px; +} +.omn-input { + width: 100%; + border: transparent; + padding: 5px; + overflow-x: hidden; +} + +.omn-hint { + display: flex; + color: #2559c9; + white-space: nowrap; + text-wrap: nowrap; +} + +.omn-hint-gapline { + width: 1px; + height: 15px; + background: #9cb5eb; + margin: 0 5px; + align-self: center; +} + +.omn-filled { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28); + border-color: transparent; +} + +.omn-input:focus { + outline: none; +} + +.omn-dropdown { + position: absolute; + z-index: 999; + margin-top: -1px; + width: 100%; + display: flex; + flex-direction: column; + margin: 0; + padding: 0; + overflow: hidden; + background: #fff; + border-radius: 0 0 24px 24px; + box-shadow: 0 4px 6px rgba(32, 33, 36, 0.28); + border: 0; +} + +.omn-gapline { + border-top: 1px solid #e8eaed; + margin: 0 20px 0 14px; + padding-bottom: 4px; +} + +.omn-dropdown-item { + padding: 0.6rem 1rem; + display: flex; + font-size: 16px; +} + +.omn-dropdown-item a { + font-weight: normal; + text-decoration: none; + color: inherit; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +.omn-dropdown-item a:visited { + color: inherit; +} + +.omn-dropdown-item:hover { + cursor: pointer; +} + +.omn-dropdown-item img { + width: 18px; + height: 18px; + padding: 2px; + vertical-align: middle; +} + +.omn-dropdown-indicator { + display: none; + position: absolute; + box-sizing: border-box; + left: 0; + top: 0; + height: 100%; + border: 2px #3168cb solid; + border-radius: 0 10px 10px 0; +} + +.omn-selected .omn-dropdown-indicator { + display: block; +} + +.omn-selected, +.omn-dropdown-item:hover { + background-color: #f2f2f2; +} + +.omn-match { + font-weight: 600; +} + +.omn-dim { + font-weight: 300; + color: #474747; +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index a37b287..16bfa54 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -2,7 +2,9 @@ import { onMount } from "svelte"; import { storage, Statistics, CrateDocManager } from "querylib"; import "../app.css"; + import { themeStore } from "../store/index"; + let isDarkMode = false; let hiddenMenu = true; const menus = [ { @@ -23,6 +25,23 @@ }, ]; + function handleChangeThemeMode() { + if (isDarkMode) { + document.documentElement.classList.add("dark"); + localStorage.setItem("QUERY_RS_THEME", "dark"); + themeStore.update(() => "dark"); + } else { + document.documentElement.classList.remove("dark"); + localStorage.setItem("QUERY_RS_THEME", "light"); + themeStore.update(() => "light"); + } + } + + function changeThemeMethod() { + isDarkMode = !isDarkMode; + handleChangeThemeMode(); + } + onMount(async () => { let firstVisit = await storage.getItem("first-visit"); if (firstVisit === null) { @@ -48,25 +67,53 @@ await storage.setItem("first-visit", "false"); } }); + + onMount(() => { + if ( + localStorage.QUERY_RS_THEME === "dark" || + (!("QUERY_RS_THEME" in localStorage) && + window.matchMedia("(prefers-color-scheme: dark)").matches) + ) { + isDarkMode = true; + } else { + isDarkMode = false; + } + handleChangeThemeMode(); + }); -
+
logo @@ -103,21 +150,26 @@
logo
-
+
© 2024 Query.rs, built by - Folyd - with ❤️❤️, see about page to learn more. + Folyd + with ❤️❤️, see about page + to learn more.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index de1419f..ff047ac 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -61,9 +61,12 @@
-
+