DEV Community: c3phalik

Fix Razorpay Iframe White Background in Dark Mode

c3phalik — Fri, 30 Jan 2026 21:34:22 +0000

Problem

When embedding Razorpay Checkout on a page with dark mode enabled, the iframe renders with an opaque white background instead of the expected semi-transparent backdrop. This creates a jarring visual experience where the modal appears as a white box against a dark-themed page.

Root Cause

This is a browser behavior, not a Razorpay bug.

When the embedding page defines a color-scheme (for example, dark), browsers attempt to apply a matching background to embedded iframes. Because Razorpay Checkout does not natively support dark mode, the browser forces an opaque light background on the iframe content.

Solution

Explicitly set color-scheme: light; on the iframe. This tells the browser that the iframe should always be rendered using a light color scheme, overriding the parent page’s dark-mode inference.

CSS Fix (Recommended)

Add the following rule to your stylesheet:

/* Prevent the browser from forcing a dark-mode background on iframe content */
iframe {
  color-scheme: light;
}

Alternative: Inline Style

You can also apply this directly to the iframe element:

<iframe
  src="your-razorpay-url"
  style="color-scheme: light;"
></iframe>

Targeted Selector (Optional)

If you want to scope the fix only to Razorpay iframes:

iframe[src*="razorpay"] {
  color-scheme: light;
}

Why This Works

The color-scheme CSS property controls how browsers render built-in UI and default backgrounds for an element. By setting color-scheme: light; on the iframe:

The browser stops inheriting the dark color scheme from the parent page
The iframe renders using its intended light-mode styles
The semi-transparent backdrop displays correctly

Razorpay-Specific Notes

For the Razorpay Affordability Widget, dark mode can be enabled via official configuration options
For standard Razorpay Checkout, this CSS rule is the recommended workaround
This fix affects only visual rendering and does not impact checkout functionality

References

How to monitor Claude code token usage?

c3phalik — Tue, 12 Aug 2025 05:56:58 +0000

Monitor Your Claude API Token Usage with CCUsage

If you're leveraging the Claude API for your coding projects, keeping track of your token consumption is crucial to managing costs and staying within limits.

Well, there's a handy tool designed to help you monitor your usage effectively: CCUsage. This tool provides a straightforward way to check your Claude API token usage and associated costs.

Getting Started with CCUsage

To use CCUsage, you’ll need to have Node.js installed, as the tool runs via npx. Here are the key commands to get started:

npx ccusage@latest

Check Token Usage by Time Period
Run the following command to view your token usage for a specific timeframe:

npx ccusage@latest opts [daily | weekly | monthly]

This command allows you to analyze your usage daily, weekly, or monthly, helping you understand your consumption patterns and costs.

Live Monitoring with Automatic Token Limit Detection
For real-time insights, CCUsage offers a live monitoring feature that automatically detects your token limits based on your usage history:

npx ccusage@latest blocks --live

If you're using Claude code with the API (I don't know why would anyone do that), this tool will help you a great deal.

And if you use CC via the monthly plans, it's really cool to check how much you have saved using the subscription.

n8n + Google Cloud Storage: The resource you are requesting could not be found (Request failed with status code 404)

c3phalik — Sat, 19 Jul 2025 14:24:16 +0000

n8n version: 1.94.1

Solving 404 Errors in n8n when Using Google Cloud Storage

When working with Google Cloud Storage in n8n, you might encounter 404 errors when trying to retrieve an object from a bucket, even when you are sure the file exists.

This is often caused by special characters in the file path, such as slashes (/), spaces, or other non-alphanumeric characters that can be misinterpreted by the Google Cloud Storage API.

Fortunately, the solution is simple: URL encoding.

URL encoding transforms special characters into a format that the API can correctly interpret, ensuring that your object path is handled properly.

Let's fix the issue and retrieve the object successfully using n8n with Google Cloud Storage.

The Problem

In a typical scenario, you might encounter a 404 error when trying to fetch an object from a bucket in Google Cloud Storage:

The resource you are requesting could not be found.

This error often occurs when there are special characters in the file path (like slashes, colons, or spaces) that Google Cloud Storage fails to correctly interpret.

For example, an object path such as:

folder_name/file.ext

is sometimes misread by the Google Cloud Storage API due to the / character. If it's not properly encoded, it leads to the file not being found, resulting in a 404 error.
The Solution: URL Encoding

To resolve this issue, we can apply URL encoding to the objectName in n8n. URL encoding converts special characters into a format that is safe for URLs. For instance:

Slash (/) becomes %2F

Space ( ) becomes %20

Colon (:) becomes %3A

By encoding the file path, we can avoid the misinterpretation of these characters, ensuring the API can fetch the correct file.

How to Apply URL Encoding in n8n:

In n8n, you can easily use URL encoding in the Expression Editor to encode your objectName. Here’s how you can implement it:

File Name Without URL Encoding (Will throw an error - 404):

You might start with a simple expression like this:

Object Name = "{{ $json.file_name }}"

This returns the file path directly, which may contain characters that Google Cloud Storage cannot interpret, such as the slash (/).

File Name With URL Encoding (Solution):

To encode the file path, you can use the .urlEncode() function:

{{ $json.file_name.urlEncode() }}

For example, if your objectName is:

folder_name/file.ext

It will be encoded to:

folder_name0%2Ffile.ext

This ensures that Google Cloud Storage correctly interprets the object path, and the 404 error will be resolved.