mirror of
https://github.com/filegator/filegator.git
synced 2025-08-09 04:46:43 +02:00
Add dark theme (#499)
This commit is contained in:
131
frontend/App.vue
131
frontend/App.vue
@@ -90,5 +90,136 @@ html, body, #wrapper, #inner, .container {
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark Theme */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* Dark theme primary colors */
|
||||
--color-primary-a0: #34b891;
|
||||
--color-primary-a20: #6ec8a8;
|
||||
--color-primary-transparent: #34b89123;
|
||||
|
||||
/* Dark theme surface colors */
|
||||
--color-surface-a0: #121212;
|
||||
--color-surface-a10: #282828;
|
||||
--color-surface-a20: #3f3f3f;
|
||||
--color-surface-a30: #575757;
|
||||
--color-surface-a50: #8b8b8b;
|
||||
|
||||
--color-text: #fff;
|
||||
}
|
||||
|
||||
html, body, .navbar {
|
||||
background-color: var(--color-surface-a0);
|
||||
}
|
||||
|
||||
.navbar-item,
|
||||
.label,
|
||||
.table,
|
||||
.table thead th,
|
||||
.modal-card-title,
|
||||
.modal-card-body,
|
||||
.button:focus,
|
||||
.dropdown-item,
|
||||
.checkbox:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.box, .table, .modal-card-head, .modal-card-foot {
|
||||
background-color: var(--color-surface-a10);
|
||||
}
|
||||
|
||||
.table.is-hoverable tbody tr:not(.is-selected):hover {
|
||||
background-color: var(--color-primary-transparent);;
|
||||
}
|
||||
|
||||
.file-row a, .node-tree > a, strong {
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
|
||||
a.navbar-item:hover {
|
||||
background-color: var(--color-primary-transparent);;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.input {
|
||||
background-color: var(--color-surface-a20);
|
||||
color: var(--color-text);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.input:hover {
|
||||
border-color: var(--color-primary-a20);
|
||||
}
|
||||
|
||||
.table td, .table th {
|
||||
border-bottom: 1px solid var(--color-surface-a0);
|
||||
}
|
||||
|
||||
.is-current-sort {
|
||||
border-bottom: 1px solid var(--color-primary-a0) !important;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-card-body {
|
||||
background-color: var(--color-surface-a20);
|
||||
}
|
||||
|
||||
.modal-card-head {
|
||||
border-bottom: 1px solid var(--color-surface-a0);
|
||||
}
|
||||
|
||||
.modal-card-foot {
|
||||
border-top: 1px solid var(--color-surface-a0);
|
||||
}
|
||||
|
||||
.modal input {
|
||||
background-color: var(--color-surface-a30);
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.button {
|
||||
background-color: var(--color-primary-transparent);
|
||||
border-color: var(--color-primary-a0);
|
||||
color: var(--color-text)
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: var(--color-primary-a0);
|
||||
border-color: var(--color-primary-a0);
|
||||
color: var(--color-text)
|
||||
}
|
||||
|
||||
.button:active {
|
||||
color: var(--color-primary-a0) !important;
|
||||
}
|
||||
|
||||
/* Dropdown */
|
||||
.dropdown-content {
|
||||
background-color: var(--color-surface-a20);
|
||||
}
|
||||
|
||||
a.dropdown-item:hover {
|
||||
background-color: var(--color-primary-transparent);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--color-primary-a20);
|
||||
}
|
||||
|
||||
#bottom-info {
|
||||
color: var(--color-surface-a50);
|
||||
}
|
||||
|
||||
.select select {
|
||||
background-color: var(--color-surface-a20);
|
||||
border-color: var(--color-surface-a20);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.select select:hover, .select:not(.is-multiple):not(.is-loading):hover::after {
|
||||
border-color: var(--color-primary-a0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
Reference in New Issue
Block a user