--- title: A Console Refresh with Flexibility for Night and Day description: The Firebase team introduced a dark mode option and refreshed light theme for the Firebase Console, giving users independent control over console theme versus... canonical: https://daily.dev/posts/a-console-refresh-with-flexibility-for-night-and-day-jxibntkbl twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: A Console Refresh with Flexibility for Night and Day | daily.dev og:description: The Firebase team introduced a dark mode option and refreshed light theme for the Firebase Console, giving users independent control over console theme versus... og:url: https://daily.dev/posts/a-console-refresh-with-flexibility-for-night-and-day-jxibntkbl og:image: https://api.daily.dev/og/posts/JxIBNTKBL.png og:image:alt: A Console Refresh with Flexibility for Night and Day og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # A Console Refresh with Flexibility for Night and Day **[Firebase](https://daily.dev/sources/firebase-blog)** · 5 min read · 0 upvotes · 0 comments ## Summary The Firebase team introduced a dark mode option and refreshed light theme for the Firebase Console, giving users independent control over console theme versus documentation theme. The redesign unified three separate color-defining systems into a single design token system built on CSS variables and host-context selectors, avoided pure black/white in favor of brand navy and pale blues for accessibility, and added a three-way toggle (dark, light, device default) in the nav bar. New background cut illustrations inspired by the Firebase logo were also added across both themes. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How did Firebase implement dark mode theming using CSS variables? Firebase built a unified design token system using CSS custom properties combined with the :host-context() selector to change token values based on whether body.light-theme or body.dark-theme is applied. For example, --page-bg is set to light-grey under the light theme class and dark-navy under the dark theme class, then referenced via var(--page-bg) in component styles. _Developers tackling theming architecture can find implementation approaches like this through daily.dev._ ### What color choices does Firebase use for its dark mode instead of pure black and white? Firebase avoided pure black backgrounds and pure white text in its dark mode, instead using brand-friendly dark navy and pale blues. This choice was made to maintain high legibility and contrast while keeping the interface feeling relaxed and balanced, and it also reinforces the Firebase brand identity across both light and dark themes. _daily.dev surfaces design decisions like this for developers refining their own dark mode palettes._ ### Does the Firebase console let users set separate theme preferences for the console and its documentation? Yes, Firebase made console theme and documentation theme independent settings rather than a single unified toggle. This was based on user research showing many developers wanted a dark console but preferred reading documentation in light theme, so the console offers three options: dark, light, and device default, controllable from the nav bar. _Teams designing theme toggles for their own products can track patterns like this on daily.dev._ ## Similar posts on daily.dev - [I Thought Dark Mode Was Just a Toggle. It Turned Into a Full-System Refactor](https://daily.dev/posts/i-thought-dark-mode-was-just-a-toggle-it-turned-into-a-full-system-refactor-1beoqfpxg) · Code Like A Girl · 127 upvotes · 9 comments - [Introducing Dark Mode for Pulumi Cloud](https://daily.dev/posts/introducing-dark-mode-for-pulumi-cloud-2fphgorkq) · Pulumi · 0 upvotes · 0 comments - [Introducing: Dark mode for Flare](https://daily.dev/posts/introducing-dark-mode-for-flare-sasqq5naw) · FREEK.DEV · 12 upvotes · 0 comments - [Dark Mode Toggle : Frontend Coding Exercises](https://daily.dev/posts/dark-mode-toggle-frontend-coding-exercises-mapdzpbjg) · Kirupa · 4 upvotes · 0 comments - [Make Visual Studio look the way you want](https://daily.dev/posts/make-visual-studio-look-the-way-you-want-6glnkivrz) · Visual Studio Blog · 9 upvotes · 1 comments --- Tags: [#css](https://daily.dev/tags/css), [#accessibility](https://daily.dev/tags/accessibility), [#firebase](https://daily.dev/tags/firebase), [#design-systems](https://daily.dev/tags/design-systems) [View this post on daily.dev](https://daily.dev/posts/a-console-refresh-with-flexibility-for-night-and-day-jxibntkbl) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"A Console Refresh with Flexibility for Night and Day","url":"https://daily.dev/posts/a-console-refresh-with-flexibility-for-night-and-day-jxibntkbl","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/a-console-refresh-with-flexibility-for-night-and-day-jxibntkbl"},"datePublished":"2026-08-23T12:20:26.722Z","dateModified":"2026-08-23T12:30:04.861Z","description":"The Firebase team introduced a dark mode option and refreshed light theme for the Firebase Console, giving users independent control over console theme versus...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/7ed721de96163685d26ab7e314be3ebc?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/7ed721de96163685d26ab7e314be3ebc?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Firebase","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Firebase","logo":"https://media.daily.dev/image/upload/s--i395oqZH--/f_auto,q_auto/v1787487448/logos/firebase-blog?_a=BAMAMicg0","url":"https://daily.dev/sources/firebase-blog"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/a-console-refresh-with-flexibility-for-night-and-day-jxibntkbl","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,accessibility,firebase,design-systems","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Firebase","item":"https://daily.dev/sources/firebase-blog"},{"@type":"ListItem","position":3,"name":"A Console Refresh with Flexibility for Night and Day"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/a-console-refresh-with-flexibility-for-night-and-day-jxibntkbl#faq","mainEntity":[{"@type":"Question","name":"How did Firebase implement dark mode theming using CSS variables?","acceptedAnswer":{"@type":"Answer","text":"Firebase built a unified design token system using CSS custom properties combined with the :host-context() selector to change token values based on whether body.light-theme or body.dark-theme is applied. For example, --page-bg is set to light-grey under the light theme class and dark-navy under the dark theme class, then referenced via var(--page-bg) in component styles. Developers tackling theming architecture can find implementation approaches like this through daily.dev."}},{"@type":"Question","name":"What color choices does Firebase use for its dark mode instead of pure black and white?","acceptedAnswer":{"@type":"Answer","text":"Firebase avoided pure black backgrounds and pure white text in its dark mode, instead using brand-friendly dark navy and pale blues. This choice was made to maintain high legibility and contrast while keeping the interface feeling relaxed and balanced, and it also reinforces the Firebase brand identity across both light and dark themes. daily.dev surfaces design decisions like this for developers refining their own dark mode palettes."}},{"@type":"Question","name":"Does the Firebase console let users set separate theme preferences for the console and its documentation?","acceptedAnswer":{"@type":"Answer","text":"Yes, Firebase made console theme and documentation theme independent settings rather than a single unified toggle. This was based on user research showing many developers wanted a dark console but preferred reading documentation in light theme, so the console offers three options: dark, light, and device default, controllable from the nav bar. Teams designing theme toggles for their own products can track patterns like this on daily.dev."}}]} ```