Back
Learn how to build an adaptive avatar that automatically adjusts its appearance based on system light/dark preferences using CSS variables and prefers-color-scheme.
<div class="avatar-container">
<div class="dark-mode-avatar">
<img src="..." alt="Profile photo" class="avatar-img">
<div class="avatar-name">Thomas Wright</div>
</div>
</div>
The image source URL should point to the user's profile picture, and the username in the div should be replaced with the actual user's name.
:root {
--avatar-light-border: #E2E8F0;
--avatar-light-shadow: rgba(0, 0, 0, 0.1);
--avatar-light-bg: #F8FAFC;
--avatar-light-text: #334155;
--avatar-dark-border: #334155;
--avatar-dark-shadow: rgba(0, 0, 0, 0.5);
--avatar-dark-bg: #1E293B;
--avatar-dark-text: #E2E8F0;
}
Next, we use the prefers-color-scheme media query to automatically detect the user's system preference and apply the appropriate theme:
@media (prefers-color-scheme: dark) {
:root {
--avatar-border: var(--avatar-dark-border);
--avatar-shadow: var(--avatar-dark-shadow);
--avatar-bg: var(--avatar-dark-bg);
--avatar-text: var(--avatar-dark-text);
}
}
@media (prefers-color-scheme: light) {
:root {
--avatar-border: var(--avatar-light-border);
--avatar-shadow: var(--avatar-light-shadow);
--avatar-bg: var(--avatar-light-bg);
--avatar-text: var(--avatar-light-text);
}
}
Then we style the container to center our avatar:
.avatar-container {
display: flex;
justify-content: center;
align-items: center;
}
Now we style the avatar wrapper with a background color and border that change based on the selected theme:
.dark-mode-avatar {
--avatar-size: 80px;
--avatar-padding: 15px;
display: flex;
flex-direction: column;
align-items: center;
padding: var(--avatar-padding);
background-color: var(--avatar-bg);
border-radius: 16px;
box-shadow: 0 4px 12px var(--avatar-shadow);
border: 1px solid var(--avatar-border);
transition: all 0.3s ease;
}
.dark-mode-avatar:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px var(--avatar-shadow);
}
For the image itself, we apply a circular shape with a themed border:
.avatar-img {
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--avatar-border);
transition: transform 0.3s ease;
}
.dark-mode-avatar:hover .avatar-img {
transform: scale(1.05);
}
Finally, we style the username with a color that adapts to the theme:
.avatar-name {
margin-top: 10px;
font-family: system-ui, -apple-system, sans-serif;
font-weight: 500;
font-size: 14px;
color: var(--avatar-text);
transition: color 0.3s ease;
}
This dark mode avatar offers several advantages:
- Automatic theme adaptation: The avatar automatically adjusts its appearance based on the user's system preferences.
- Reduced eye strain: In dark mode, the softer colors and reduced brightness are easier on the eyes in low-light environments.
- Contextual relevance: The avatar feels native to the user's chosen visual environment, whether light or dark.
- Enhanced user experience: The hover effects provide subtle but engaging feedback when interacted with.
- Improved accessibility: The adaptive design ensures good contrast in both light and dark environments.
- Card-like presentation: The rectangular container with rounded corners provides context and separation from the surrounding interface.
This avatar design is perfect for applications that offer both light and dark modes, such as productivity tools, social platforms, and content management systems that prioritize user comfort and accessibility.
<div class="avatar-container">
<div class="dark-mode-avatar">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&q=80" alt="Profile photo" class="avatar-img">
<div class="avatar-name">Thomas Wright</div>
</div>
</div>
<style>
:root {
--avatar-light-border: #E2E8F0;
--avatar-light-shadow: rgba(0, 0, 0, 0.1);
--avatar-light-bg: #F8FAFC;
--avatar-light-text: #334155;
--avatar-dark-border: #334155;
--avatar-dark-shadow: rgba(0, 0, 0, 0.5);
--avatar-dark-bg: #1E293B;
--avatar-dark-text: #E2E8F0;
}
@media (prefers-color-scheme: dark) {
:root {
--avatar-border: var(--avatar-dark-border);
--avatar-shadow: var(--avatar-dark-shadow);
--avatar-bg: var(--avatar-dark-bg);
--avatar-text: var(--avatar-dark-text);
}
}
@media (prefers-color-scheme: light) {
:root {
--avatar-border: var(--avatar-light-border);
--avatar-shadow: var(--avatar-light-shadow);
--avatar-bg: var(--avatar-light-bg);
--avatar-text: var(--avatar-light-text);
}
}
.avatar-container {
display: flex;
justify-content: center;
align-items: center;
}
.dark-mode-avatar {
--avatar-size: 80px;
--avatar-padding: 15px;
display: flex;
flex-direction: column;
align-items: center;
padding: var(--avatar-padding);
background-color: var(--avatar-bg);
border-radius: 16px;
box-shadow: 0 4px 12px var(--avatar-shadow);
border: 1px solid var(--avatar-border);
transition: all 0.3s ease;
}
.dark-mode-avatar:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px var(--avatar-shadow);
}
.avatar-img {
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--avatar-border);
transition: transform 0.3s ease;
}
.dark-mode-avatar:hover .avatar-img {
transform: scale(1.05);
}
.avatar-name {
margin-top: 10px;
font-family: system-ui, -apple-system, sans-serif;
font-weight: 500;
font-size: 14px;
color: var(--avatar-text);
transition: color 0.3s ease;
}
</style>
Thank you for reading this article.
Comments