Theme

Dark Mode Guide

CodideX Mobile includes frontend dark/light behavior using CSS variables and lightweight JavaScript toggles.

Open dark mode previewTest student dashboard

How It Works

PartLocation
Base variables/assets/css/mobile-variables.css
Dark mode styles/assets/css/mobile-dark.css
Theme behavior/assets/js/mobile-theme.js
Preview page/mobile-dark-mode-preview.html

Customize dark mode by adjusting theme variables, background colors, card surfaces, text colors, borders, and component states in the CSS files above.

Testing Dark Mode

  • Open the dark mode preview page.
  • Toggle between light and dark views.
  • Check dashboards, notification center, chat screens, forms, cards, and bottom navigation.
  • Confirm code blocks, badges, chips, and modal states remain readable.
Dark mode is frontend UI behavior only. It does not store user preferences in a backend account profile.