# Night mode for Pixelfed

Modification légère du CSS pour les couleurs pour l'interface de Pixelfed via Stylus.


## CSS

* Activer le dark mode manuellement dans l’interface de configuration pour l'UI.
* A mettre dans Stylus :

```css
/* ===== Scrollbar CSS ===== */
  /* Firefox */
    * {
      scrollbar-width: thin;
      scrollbar-color: #171a1d #31363b;
    }
  
  /* Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
      width: 8px;
    }
  
    *::-webkit-scrollbar-track {
      background: #31363b;
    }
  
    *::-webkit-scrollbar-thumb {
      background-color: #171a1d;
      border-radius: 30px;
      border: 3px none #ffffff;
    }  

/* Search */
.metro-nav .autocomplete-input {
  background-color: var(--body-bg);
}
/* Dark mode */
.force-dark-mode {
  --light: #000 !important;
  --dark: #fff !important;
  --body-bg: #12151a !important;
  --body-color: #fafcff  !important;
  --nav-bg: #1c1e22  !important;
  --bg-light: #212124;
  --light-gray: #212124;
  --text-lighter: #818181;
  --card-bg: #1c1e22;
  --light-hover-bg: #212124;
  --btn-light-border: #161618;
  --input-border: #161618;
  --comment-bg: #212124;
  --border-color: #212124;
  --card-header-accent: #212124;
  --dropdown-item-hover-bg: #000;
  --dropdown-item-hover-color: #818181;
  --dropdown-item-color: #64748b;
  --dropdown-item-active-color: #b3b3b3;
  --primary: #567ebf;
  --blue: #567ebf;
}

/* Color for time */
.badge-light {
  color: #fff; 
}

.profile-sidebar-component .avatar {
  border-radius: 100px;
  margin-bottom: 1rem;
  width: 140px;
}

.sidebar-component .user-card .avatar {
  border-radius: 50px;
}

.sidebar-component .user-card .avatar-update-btn {
  background: hsla(0, 5%, 28%, .55);
  border: 1px solid #5656579c !important;
}
```

## Screenshot

![css screenshot](pixelfed-css.jpg)