usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2024-12-01 23:02:22 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: dark mode support for explore page (#584)

Browse Source 
* feat: dark mode support for auth page

* chore: update

* feat: dark mode support for explore page (#583)

* fix: avoid white text

* fix: import order
This commit is contained in:
Stephen Zhou 2022-11-26 12:19:00 +08:00 committed by GitHub
parent 90c85103c3
commit 6e5537d131
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/less/explore.less
View File

@ -1,5 +1,5 @@
.page-wrapper.explore { .page-wrapper.explore {
@apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden; @apply relative top-0 w-full h-screen overflow-y-auto overflow-x-hidden dark:bg-zinc-900;
background-color: #f6f5f4; background-color: #f6f5f4;
> .page-container { > .page-container {
@ -16,13 +16,13 @@
} }
> .title-text { > .title-text {
@apply text-xl sm:text-3xl font-mono text-gray-700; @apply text-xl sm:text-3xl font-mono text-gray-700 dark:text-gray-300;
} }
} }
> .action-button-container { > .action-button-container {
> .btn { > .btn {
@apply block text-gray-600 font-mono text-base py-1 border px-3 leading-8 rounded-xl hover:opacity-80 hover:underline; @apply block text-gray-600 dark:text-gray-300 font-mono text-base py-1 border px-3 leading-8 rounded-xl hover:opacity-80 hover:underline;
> .icon { > .icon {
@apply text-lg; @apply text-lg;
@ -35,7 +35,7 @@
@apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 sm:pr-6; @apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 sm:pr-6;
> .memo-container { > .memo-container {
@apply flex flex-col justify-start items-start w-full p-4 mt-2 bg-white rounded-lg border border-white hover:border-gray-200; @apply flex flex-col justify-start items-start w-full p-4 mt-2 bg-white dark:bg-zinc-800 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700;
> .memo-header { > .memo-header {
@apply mb-2 w-full flex flex-row justify-start items-center text-sm text-gray-400; @apply mb-2 w-full flex flex-row justify-start items-center text-sm text-gray-400;
@ -46,7 +46,7 @@
} }
> .memo-content { > .memo-content {
@apply cursor-default; @apply cursor-default dark:text-zinc-50;
> * { > * {
@apply cursor-default; @apply cursor-default;

3
web/src/pages/Explore.tsx
View File

@ -9,6 +9,7 @@ import useLoading from "../hooks/useLoading";
import toastHelper from "../components/Toast"; import toastHelper from "../components/Toast";
import MemoContent from "../components/MemoContent"; import MemoContent from "../components/MemoContent";
import MemoResources from "../components/MemoResources"; import MemoResources from "../components/MemoResources";
import useApperance from "../hooks/useApperance";
import "../less/explore.less"; import "../less/explore.less";
interface State { interface State {
@ -16,6 +17,8 @@ interface State {
} }
const Explore = () => { const Explore = () => {
useApperance();
const { t, i18n } = useTranslation(); const { t, i18n } = useTranslation();
const user = useAppSelector((state) => state.user.user); const user = useAppSelector((state) => state.user.user);
const location = useAppSelector((state) => state.location); const location = useAppSelector((state) => state.location);