blog/content/2022-10-13_scrollbar-colors.rst
2022-10-16 23:02:04 -04:00

45 lines
1.0 KiB
ReStructuredText

Scrollbar Colors
################
:date: 2022-10-13 12:07
:author: tyrel
:category: Website
:tags: css
:slug: scrollbar-colors
:status: published
Was talking to someone about CSS Nostalgia and "back in my day" when scrollbar colors came up.
.. code:: css
/* For Chromium based browsers */
::-webkit-scrollbar {
background: #2A365F;
}
::-webkit-scrollbar-thumb {
background: #514763;
}
/* For Firefox */
html {
scrollbar-color: #514763 #2A365F;
}
Firefox and Chrome have different selectors, so in order to support the majority of browsers, you need both.
.. figure:: {static}/images/2022-10-13-chrome_scrollbar.png
:alt: Safari with a blue/purple scrollbar
:width: 940px
:height: 688px
Safari with a blue/purple scrollbar
.. figure:: {static}/images/2022-10-13_safari_scrollbar.png
:alt: Chrome with a blue/purple scrollbar
Chrome with a blue/purple scrollbar
.. figure:: {static}/images/2022-10-13_firefox_scrollbar.png
:alt: Firefox with a blue/purple scrollbar
Firefox with a blue/purple scrollbar