A profile screen is the account hub of a mobile app — a cover header with an avatar, follower stats, a settings list with toggles and navigation rows, and a log-out action. This snippet builds a complete, polished one inside a CSS phone frame, including working switches and a functional dark-mode toggle that restyles the whole screen, in HTML, CSS, and vanilla JavaScript with no dependency.

The cover-and-avatar header

The header is a gradient cover with a back button and an Edit button, and the avatar overlaps the bottom edge — positioned with bottom: -34px and a thick border ring so it punches through the seam, the universal profile-header pattern. A green presence dot sits on the avatar. The avatar and dot borders are theme-aware so they match the background in light and dark modes.

Pure-CSS toggle switches

The notification and dark-mode switches are real checkboxes styled into iOS-style toggles: the native input is visually hidden, and an adjacent <i> is the track whose ::after is the knob. The :checked + i sibling selector turns the track indigo and slides the knob with a transform — an accessible toggle (it's a real checkbox, keyboard-operable) with zero JavaScript for the visual state.

A dark mode that actually works

The dark-mode switch isn't decorative: toggling it adds a .dark class to the screen that restyles the background, cards, list, borders, avatar ring, and log-out button. It demonstrates a complete theming pass driven by one class, which is exactly how you'd wire a real in-app theme setting.

The settings list

Rows combine a colored icon tile, a label, and either a toggle or a chevron for navigation. Navigation rows give a tap highlight on click (a brief background flash), the standard touch feedback for list items. Stat counts sit in a divided card above, and a bordered log-out button in danger red anchors the bottom.

Reusing it

Swap the user data, stats, and rows for your own, and wire the navigation rows to your router and the toggles to real settings. Lift it out of the frame for a responsive web account page, or keep it framed beside a mobile login screen to present a full app flow.

Step by step

How to Use

1
Paste HTML, CSS, and JSA profile screen renders with a cover, avatar, and settings.
2
Toggle dark modeThe dark-mode switch restyles the entire screen.
3
Flip notificationsThe iOS-style switch animates its knob.
4
Tap a settings rowNavigation rows give a touch-highlight on tap.
5
Press EditThe Edit button toggles to Done.
6
Bind your dataSwap the user info, stats, and rows for your own.

Real-world uses

Common Use Cases

App account screens

Present settings inside a phone mockup.

Settings UIs

A mobile take on a settings panel.

Social profiles

Show stats like a user stats card.

Theme settings

Pair the switch with a color mode toggle.

Onboarding flows

Follow a mobile login screen into the profile.

Learning CSS toggles

A reference for checkbox switches and theming.

Got questions?

Frequently Asked Questions

Each is a real checkbox visually hidden next to an <i> element that acts as the track, with its ::after pseudo-element as the knob. The CSS :checked + i sibling selector turns the track on and slides the knob with a transform. Because it's a genuine checkbox, it's keyboard-accessible and needs no JavaScript for the visual on/off state.

Yes. Flipping it adds a dark class to the screen, and CSS rules under that class restyle the background, cards, list, borders, avatar ring, and log-out button. It's a complete theming pass driven by a single class — the same approach you'd use for a real in-app dark-mode setting.

The avatar is absolutely positioned with a negative bottom offset so it extends past the cover's edge, and a thick border ring in the page background color makes it appear to punch through the seam. The ring color is theme-aware so it blends with both light and dark backgrounds.

Yes. The phone frame is just a wrapper, and the profile content is independent. Lift it out for a responsive web account or settings page, wire the navigation rows to your router and the toggles to your settings store, and it works the same without the device frame.

Render the user info, stats, and settings rows from props or state. Bind the dark class to a theme value updated by the switch, and tie each toggle to a setting in state. Navigation rows call your router. The CSS switches work as-is since they're checkboxes. Tailwind styles the cover, cards, and list with utilities.

Loading…