Why Our Dark Preview Kept Its Light Borders
A dark gallery column inherited light borders until aliases and portal containers respected its scope, with separate token and rendered checks
Reviewed by Dmytro Nasyrov on October 22, 2026.
Our design-system gallery put a dark column inside a light page. The dark background appeared, but the borders stayed light. Switching the whole application to dark mode did not reproduce the same failure because the defect depended on where the theme boundary sat.
This happened while we were replacing the frontend design system of a professional learning platform in aesthetic medicine. We wanted the gallery to show both themes together, including open overlays. That arrangement exposed a mismatch between the source tokens, component aliases and the CSS rules consuming them.
The value was resolved above the theme boundary
We kept the design tool's color names in a source layer: canvas, surface, primary text and border tokens. A second layer mapped those names onto the variables our shared components already used. For example, the component border alias pointed to the source border token. This let existing components adopt the new palette without individually replacing every class. Although the relationship looked correct in the stylesheet, an alias resolved on the root could retain the root's light value when inherited by a nested dark element; its declaration scope was the problem. A dark source token farther down the DOM did not repair a value already inherited from above it.
In the recorded build, the base border rule read the generated color variable. That variable had resolved at the root. The gallery's dark column therefore inherited a light border even though the source palette for the column was dark. Inspecting the declarations alone hid the difference between a reference and its resolved value.
We made the alias layer a theme boundary
The correction had two parts. We declared the component aliases in both the root and the dark scope. Then the base rules consumed those aliases directly: the border rule used var(--border), and the body used the background and foreground aliases.
That preserved the component contract while moving resolution to a scope that could actually change. We did not replace the palette with hard-coded dark colors at each failing border. Such a patch would have repaired the gallery sample while leaving other consumers free to repeat the same mistake.
| Layer | Question we checked |
|---|---|
| Source token | Does this name have the intended value in each theme? |
| Component alias | Is this relationship declared inside both theme scopes? |
| Consuming rule | Which variable supplies the rendered border or surface? |
| DOM location | Is the element actually beneath the intended theme boundary? |
An overlay could escape the corrected column
A dialog opened from the dark column introduced a second boundary. Its trigger belonged to the column, but its portal content could be placed elsewhere in the DOM. The dark class around the trigger could not style a DOM descendant that was physically outside that subtree. We gave the dialog, sheet and dropdown content an explicit portal container. The gallery supplied a container inside the owning column. This kept each open overlay beneath the same theme boundary as its trigger.
React context and CSS inheritance answer different questions here. React's portal reference explains that a portal changes physical DOM placement while remaining in its React parent tree. Our bug concerned that physical placement. Passing the right context did not make the overlay inherit the dark column's CSS.
The regression needed both structural and rendered checks
Our token tests checked alias declarations and the base rules that consumed them. Gallery tests checked that overlays opened inside their respective columns. A browser scenario checked that the dark and light column backgrounds differed. Each test covered a separate part of the original failure. A token test can reject a missing dark declaration without opening a browser. It cannot establish that a menu was portalled under the intended element. Conversely, a screenshot can show the right colors while leaving an accidental duplicate declaration unexplained. We kept those checks complementary.
The gallery also retained a light page around the dark island. Making the whole document dark would have changed the reproduction. Our test fixture had to preserve the placement that caused the defect, rather than merely display the desired color somewhere.
What this case establishes
The implementation record documents the light-border finding, the alias correction and the portal-container change. The later redesign merge reports its automated suites and visual checks at desktop and phone widths. Those are historical checks from that implementation, not a new cross-browser audit conducted for this article.
We do not infer accessibility compliance from a functioning dark island. Contrast, keyboard behavior and focus still need their own checks. Nor do we treat the generated CSS observed in this build as a permanent rule for every framework version.
For this defect, the useful debugging artifact was the boundary map above. It directed inspection from a palette value to its declaration scope, consuming rule and final DOM location. The border changed only after those four views agreed.
FAQ
Quick answers to common questions about custom software development, pricing, process and technology.
Type to filter questions and answers. Use Topic to narrow the list.
Showing all 14
No matches
Try a different keyword, change the topic or clear filters
-
How long have you been in business?
Pharos Production has been in business since 2013, with over 13 years of experience in custom software development. During this time, we have delivered over 110 applications for 200+ clients across 28 industries, including FinTech, healthcare, crypto and e-commerce. We are rated 5/5 on Clutch based on 107 verified reviews (2026).
-
What services do you provide?
Pharos Production provides six core service categories: AI Development (LLM applications, AI agents, machine learning and computer vision), Blockchain and Web3 (smart contracts, DeFi, tokenization on Ethereum, Solana, TON and other chains), FinTech Development (payment platforms, digital banking, KYC and AML integration), Software Development (mobile apps, web platforms, database design, UI/UX), Security and QA (code audits, penetration testing, smart contract audits, manual and automated testing) and Consulting (architecture design, MVP validation, startup consulting).
-
Where is Pharos Production located?
Pharos Production is headquartered in Las Vegas, Nevada, USA (5348 Vegas Dr, Las Vegas, NV 89108), with an engineering office in Kyiv, Ukraine (44-B Eugene Konovalets Str. Suite 201, Kyiv 01133). We work with clients worldwide and provide remote collaboration across all time zones. Visit our contact page for directions and scheduling options.
-
How big is your team?
Pharos Production has a team of 90+ engineers, including software developers, blockchain specialists, QA engineers, DevOps experts, UI/UX designers, project managers and solution architects. Our founder, Dr. Dmytro Nasyrov, holds a PhD in Artificial Intelligence and leads the technical direction of all projects.
-
What types of customers do you serve?
We serve a wide range of clients, from startups and product companies to mid-sized enterprises and large institutions. Our clients include crypto exchanges, FinTech providers (like Pleenk), healthcare organizations, sportsbook operators (like Pro Gambling), e-commerce platforms and SaaS companies. Pharos Production has worked with 200+ clients across 28 industries since 2013, adapting engagement models to match each client's stage, whether it is MVP validation for a startup or enterprise-scale development for an established business.
-
How is a custom software development company different from an agency?
A custom software development company like Pharos Production assigns one dedicated engineering team that owns your product across multiple release cycles, instead of handing it off once a contract ends. Agencies more often rotate staff between clients and optimize for fast delivery over long-term product ownership.
Pharos Production keeps the same team on your codebase through 2-week sprints, so there is no re-onboarding cost each time you request a new feature.
-
How much does custom software development cost?
Custom software development costs vary based on project scope and complexity. At Pharos Production, typical project ranges are: MVP development ($10,000-$25,000), suitable for startups validating a product idea; full-fledged production ($25,000-$50,000), for established businesses scaling a proven concept; and full-cycle development ($50,000-$80,000+), for complex enterprise-grade systems. These ranges include architecture design, development, QA testing and deployment. Hourly rates range from $50 to $99 depending on role and seniority. Final pricing depends on technology stack, number of integrations and engagement model (staff augmentation, dedicated team or project outsourcing).
-
How long does it take to develop a custom software application?
Development timelines depend on scope and complexity. At Pharos Production, a typical MVP takes 2-4 months, a production-ready application takes 4-8 months and a complex enterprise system can take 8-12+ months. We use an agile methodology with 2-week sprints, delivering working increments after each sprint. Every sprint includes a retrospective, progress report and planning session for the next iteration. This approach ensures transparency and allows businesses to launch faster by prioritizing high-impact features first. Get a timeline estimate for your project.
-
What industries does Pharos Production serve?
Pharos Production serves 28 industries: FinTech, MiCA Compliance, Banking, Insurance, Crypto, Healthcare, Fitness, E-Commerce, Food & Restaurant, On-Demand, Manufacturing, Automotive, Energy, Oil & Gas, Supply Chain, Construction, Real Estate, Gaming, Streaming, Media, Telecom, Education, Aviation, Travel, Logistics, Marketing, Agriculture and Recommender Systems. Our deepest expertise is in FinTech, blockchain and healthcare, where we have delivered compliance-ready platforms (HIPAA, PCI DSS, GDPR) and high-load systems handling thousands of concurrent users. For the latest industry insights, read our guides on FinTech trends in 2026 and the Web3 technology stack.
-
Why hire a software development company instead of building in-house?
Hiring a software development company offers faster time-to-market, lower upfront costs and access to specialized expertise without long-term employment commitments. According to Deloitte's 2024 Global Outsourcing Survey, 57% of companies outsource software development to access skills they cannot hire internally.
Factor In-house team Software development company Time to assemble 3-6 months (recruiting + onboarding) 1-2 weeks Upfront cost High (salaries, benefits, equipment) Lower (project-based pricing) Specialized expertise Limited to who you can hire locally Access to 90+ engineers across blockchain, AI, FinTech Scalability Slow (each new hire takes months) Fast (scale up or down per sprint) Long-term commitment Full-time employment contracts Flexible engagement models Risk High if key engineers leave Company ensures continuity and knowledge transfer For businesses that need blockchain, AI or high-load architecture expertise, outsourcing to a specialized firm like Pharos Production reduces risk and accelerates delivery.
-
What projects does Pharos Production not take on?
Pharos Production focuses on mid-to-large custom software projects with budgets starting at $10,000. We do not take on template-based websites, WordPress theme customization or short-term contracts under one month. We also do not provide non-technical staffing (marketing, sales or design-only roles). Our strongest fit is blockchain, FinTech and healthcare projects where security, compliance and high-load architecture are critical. For smaller projects or MVPs under $10,000, we recommend exploring freelance platforms or no-code tools as a more cost-effective starting point.
-
Why does Pharos Production use agile methodology?
We use agile with 2-week sprints because it reduces the risk of building features that miss the mark. Each sprint ends with a working demo, a retrospective and a plan for the next iteration.
This means clients see progress every 14 days and can adjust priorities based on real results, not assumptions. We chose this approach after years of experience showing that rigid, fixed-scope contracts lead to scope creep, missed deadlines and products that do not match market needs by launch day.
-
When should you NOT hire a custom software development company?
Custom development is not the right choice in every situation. You should not hire a custom software company if: your problem is fully solved by an existing SaaS product (e.g. Shopify for e-commerce, Salesforce for CRM); your budget is under $10,000 and timeline is under 4 weeks; you need a simple landing page or marketing website (WordPress or Webflow is faster and cheaper); or you are still validating the idea and have not spoken to potential users yet.
In these cases, off-the-shelf tools or no-code platforms offer better ROI. Custom development makes sense when you need unique workflows, regulatory compliance, high-load architecture or competitive differentiation that packaged software cannot provide.
-
What kind of projects has Pharos Production delivered?
Here are three anonymized examples from our recent delivery history:
FinTech startup - payment platform (MVP)
Scope: mobile app + backend API with bank-grade encryption. Team: 4 engineers, 1 QA. Timeline: 10 weeks. Budget: $38,000. Result: launched on schedule, processed $2M+ in transactions within the first quarter.Healthcare provider - patient portal (Full product)
Scope: HIPAA-aligned web platform with EHR integration, appointment scheduling and telemedicine. Team: 6 engineers, 1 DevOps, 2 QA. Timeline: 6 months. Budget: $120,000. Result: 15,000+ active patients, zero compliance violations in two annual audits.Crypto exchange - trading engine (Complex)
Scope: high-load matching engine handling 50,000+ orders per second, multi-chain wallet infrastructure on Ethereum and Solana. Team: 8 engineers, 2 QA, 1 security auditor. Timeline: 11 months. Budget: $340,000. Result: 99.97% uptime, passed three independent security audits.See more projects: NoMoreBets, Pulse, Sagas, Gambit Stream and Pleenk. For the full portfolio, visit our case studies. Learn more about the technology behind these projects in our guide to stablecoins and crypto infrastructure.
Stas Rysin is the Lead Frontend Developer at Pharos Production. His work covers the design system, reader interfaces and administration workflows of a professional learning platform for aesthetic medicine.
