ae/notatest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: full dark/light theme support

Browse Source
This commit is contained in:
ae 2025-04-17 17:14:04 +03:00
parent 90ef589197
commit eeed3dc5d5
Signed by: ae
GPG Key ID: 995EFD5C1B532B3E
1 changed files with 71 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
web/src/app.css
View File

@ -3,12 +3,12 @@
:root {
--light-background: #f5f5f5;
--light-foreground: #e0e0e0;
--light-accent: #1e2400;
--light-accent: #303052;
--light-text: rgb(34, 40, 49);
--dark-background: #181818;
--dark-foreground: #222222;
--dark-accent: #e0e2c2;
--dark-accent: #bebff7;
--dark-text: rgb(238, 238, 238);
}
@ -164,16 +164,25 @@
@apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
}
/* Sidebar specific classes */
/* Sidebar */
.sidebar {
@apply fixed flex h-full w-64 flex-col overflow-hidden bg-[var(--light-foreground)] transition-all duration-300;
}
.dark .sidebar {
@apply bg-[var(--dark-foreground)];
}
.sidebar-header,
.sidebar-footer {
@apply border-[var(--light-text)]/20 p-4;
}
.dark .sidebar-header,
.dark .sidebar-footer {
@apply border-[var(--dark-text)]/20;
}
.sidebar-header {
@apply border-b;
}
@ -186,32 +195,60 @@
@apply cursor-pointer p-3 transition-colors hover:bg-[var(--light-background)];
}
.dark .sidebar-item {
@apply hover:bg-[var(--dark-background)];
}
.sidebar-item-active {
@apply bg-[var(--light-background)];
}
.dark .sidebar-item-active {
@apply bg-[var(--dark-background)];
}
.sidebar-item-text {
@apply text-xs text-[var(--light-text)]/60;
}
.dark .sidebar-item-text {
@apply text-[var(--dark-text)]/60;
}
.sidebar-divider {
@apply divide-y divide-[var(--light-text)]/20;
}
/* Note editor specific classes */
.dark .sidebar-divider {
@apply divide-[var(--dark-text)]/20;
}
/* Note editor */
.note-title-input {
@apply w-full border-b border-[var(--light-text)]/20 bg-transparent pb-2 text-2xl font-bold focus:border-[var(--light-accent)];
}
.dark .note-title-input {
@apply border-[var(--dark-text)]/20 focus:border-[var(--dark-accent)];
}
.note-char-count {
@apply mt-1 text-xs text-[var(--light-text)]/60;
}
.dark .note-char-count {
@apply text-[var(--dark-text)]/60;
}
.note-textarea {
@apply h-full min-h-[300px] w-full resize-none bg-[var(--light-background)] p-4 font-mono;
}
/* Settings modal specific classes */
.dark .note-textarea {
@apply bg-[var(--dark-background)];
}
/* Settings modal */
.modal-backdrop {
/* @apply bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black; */
@apply fixed inset-0 z-50 flex items-center justify-center bg-black;
@ -221,25 +258,49 @@
@apply mx-4 max-h-[90vh] w-full max-w-md overflow-y-auto rounded-lg bg-[var(--light-background)] shadow-lg;
}
.dark .modal-content {
@apply bg-[var(--dark-background)];
}
.modal-section {
@apply border-b border-[var(--light-text)]/20 p-4;
}
.modal-close-button {
@apply text-[var(--light-text)]/60 hover:text-[var(--light-text)];
.dark .modal-section {
@apply border-[var(--dark-text)]/20;
}
/* Loading spinner specific classes */
.modal-close-button {
@apply text-[var(--light-background)]/60 hover:text-[var(--light-background)];
}
.dark .modal-close-button {
@apply text-[var(--dark-background)]/60 hover:text-[var(--dark-background)];
}
/* Loading spinner */
.spinner-dot {
@apply bg-[var(--light-accent)];
}
/* Main layout classes */
.dark .spinner-dot {
@apply bg-[var(--dark-accent)];
}
/* Main layout */
.main-header {
@apply flex items-center justify-between bg-[var(--light-foreground)] p-4 shadow-sm;
}
.dark .main-header {
@apply flex items-center justify-between bg-[var(--dark-foreground)] p-4 shadow-sm;
}
.main-content {
@apply flex-1 overflow-auto p-6;
@apply flex-1 overflow-auto bg-[var(--light-background)] p-6;
}
.dark .main-content {
@apply bg-[var(--dark-background)];
}
}