2024-10-20 06:56:00 +00:00
|
|
|
|
# Better Night mode for Pixelfed
|
2023-07-08 09:36:24 +00:00
|
|
|
|
|
2023-07-08 09:51:07 +00:00
|
|
|
|
Modification légère du CSS pour les couleurs pour l'interface de Pixelfed via Stylus.
|
|
|
|
|
|
|
|
|
|
## CSS
|
|
|
|
|
|
2023-07-09 09:51:38 +00:00
|
|
|
|
* Activer le dark mode manuellement dans l’interface de configuration pour l'UI.
|
|
|
|
|
* A mettre dans Stylus :
|
2023-07-08 09:51:07 +00:00
|
|
|
|
|
|
|
|
|
```css
|
2023-07-10 08:29:47 +00:00
|
|
|
|
/* Search */
|
|
|
|
|
.metro-nav .autocomplete-input {
|
|
|
|
|
background-color: var(--body-bg);
|
|
|
|
|
}
|
|
|
|
|
/* Dark mode */
|
2024-10-20 06:56:00 +00:00
|
|
|
|
:root {
|
2023-07-09 09:51:38 +00:00
|
|
|
|
--light: #000 !important;
|
|
|
|
|
--dark: #fff !important;
|
|
|
|
|
--body-bg: #12151a !important;
|
2024-10-20 06:56:00 +00:00
|
|
|
|
--body-color: #f7f8f8 !important;
|
2023-07-09 09:51:38 +00:00
|
|
|
|
--nav-bg: #1c1e22 !important;
|
2023-07-08 09:51:07 +00:00
|
|
|
|
--bg-light: #212124;
|
|
|
|
|
--light-gray: #212124;
|
2024-10-20 06:56:00 +00:00
|
|
|
|
--text-lighter: #b2b2b2;
|
2023-07-08 09:51:07 +00:00
|
|
|
|
--card-bg: #1c1e22;
|
|
|
|
|
--light-hover-bg: #212124;
|
|
|
|
|
--btn-light-border: #161618;
|
|
|
|
|
--input-border: #161618;
|
2024-10-20 06:56:00 +00:00
|
|
|
|
--comment-bg: #18181b;
|
|
|
|
|
--border-color: #1b1b1b;
|
2023-07-08 09:51:07 +00:00
|
|
|
|
--card-header-accent: #212124;
|
|
|
|
|
--dropdown-item-hover-bg: #000;
|
|
|
|
|
--dropdown-item-hover-color: #818181;
|
|
|
|
|
--dropdown-item-color: #64748b;
|
|
|
|
|
--dropdown-item-active-color: #b3b3b3;
|
2024-10-20 06:56:00 +00:00
|
|
|
|
--primary: #3285df;
|
|
|
|
|
--blue: #007bff;
|
2023-07-08 09:51:07 +00:00
|
|
|
|
}
|
2023-07-10 08:29:47 +00:00
|
|
|
|
|
|
|
|
|
/* Color for time */
|
2023-07-08 09:51:07 +00:00
|
|
|
|
.badge-light {
|
2024-10-20 06:56:00 +00:00
|
|
|
|
color: #fff;
|
2023-07-09 09:51:38 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.profile-sidebar-component .avatar {
|
|
|
|
|
border-radius: 100px;
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
width: 140px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidebar-component .user-card .avatar {
|
|
|
|
|
border-radius: 50px;
|
2023-07-08 09:51:07 +00:00
|
|
|
|
}
|
2023-07-09 09:51:38 +00:00
|
|
|
|
|
|
|
|
|
.sidebar-component .user-card .avatar-update-btn {
|
|
|
|
|
background: hsla(0, 5%, 28%, .55);
|
|
|
|
|
border: 1px solid #5656579c !important;
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Screenshot
|
|
|
|
|
|
2024-10-20 06:56:00 +00:00
|
|
|
|
![css screenshot](pixelfed-css.jpg)
|