# CSS

# Dark Light Mode

```
:root {
    --bg-color: #fafafa;
    --font-color-2: #515151;
    --font-color: #626262;
}

@media (prefers-color-scheme: dark){
  :root {
    --bg-color: #030814;
    --font-color-2: #a4a4a4;
    --font-color: #e0e0e0;
  }
}

body{
	background-color: var(--bg-color);
}
```

# CSS - Tricks

```CSS
& .breadcrumbs-container .breadcrumb span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
}
```

```CSS
.element::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.element {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
```

# CSS Grid

```CSS
.itemsContainer {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, 400px);
  justify-content: space-around;
}

@media (max-width: 500px) {
  .itemsContainer {
    grid-template-columns: none;
  }
}
```

[![2022-09-07-10_34_41.png](https://books.juannavas.dev/uploads/images/gallery/2022-09/scaled-840-/0MBhxks0vVCisFLq-2022-09-07-10_34_41.png)](https://books.juannavas.dev/uploads/images/gallery/2022-09/0MBhxks0vVCisFLq-2022-09-07-10_34_41.png)

[![2022-09-07-10_36_27.png](https://books.juannavas.dev/uploads/images/gallery/2022-09/scaled-840-/jZvNkB8rdRLHDg29-2022-09-07-10_36_27.png)](https://books.juannavas.dev/uploads/images/gallery/2022-09/jZvNkB8rdRLHDg29-2022-09-07-10_36_27.png)