Now CSS provides a cleaner solution with the light-dark() function.

What is light-dark()?

The light-dark() function allows you to define two values directly inside a CSS property.

The first value is used when the page is in light mode.

The second value is used when the page is in dark mode.

color: light-dark(#000, #fff);

In this example, the text becomes black in light mode and white in dark mode.

Instead of writing separate styles for each theme, everything can be defined in a single line.

Why Was It Introduced?

Before light-dark(), developers commonly used media queries.

.card {
  background: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  .card {
    background: #1a1a1a;
    color: white;
  }
}

While this works, it becomes difficult to maintain when a project grows. Every component may need its own dark mode overrides.

With light-dark(), the same styles can be written more compactly.

.card {
  background: light-dark(white, #1a1a1a);
  color: light-dark(black, white);
}

The result is easier to read and maintain.

Setting Up light-dark()

For the function to work correctly, the browser needs to know that your page supports both color schemes.

:root {
  color-scheme: light dark;
}

Without this declaration, the browser may not switch values as expected.

A complete example looks like this:

:root {
  color-scheme: light dark;
}

body {
  background: light-dark(#ffffff, #121212);
  color: light-dark(#222222, #f5f5f5);
}

The browser automatically chooses the appropriate value based on the active theme.

Using CSS Variables Together

The real power appears when light-dark() is combined with custom properties.

:root {
  color-scheme: light dark;

  --surface: light-dark(#ffffff, #1e1e1e);
  --text: light-dark(#222222, #f5f5f5);
  --border: light-dark(#dcdcdc, #444444);
}

Then components can simply use the variables.

.card {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

This creates a clean design system with minimal duplication.

Real World Example

Imagine a button that should adapt to the current theme.

.button {
  background: light-dark(#2563eb, #3b82f6);
  color: light-dark(white, white);
  border: 1px solid light-dark(#1d4ed8, #60a5fa);
}

The button automatically adjusts without additional theme specific styles.

Browser Support

The light-dark() function is supported in modern browsers including recent versions of Chrome, Edge, Safari, and Firefox.

If your audience uses up to date browsers, it is generally safe to use. For applications that must support older browsers, consider testing carefully or providing fallbacks.

Advantages of light-dark()

Less Code

Theme specific values can be defined directly where they are used.

Better Readability

Developers can immediately see both light and dark values in one place.

Easier Maintenance

No need to hunt through multiple media queries when updating colors.

Works Well With Design Systems

It integrates naturally with CSS variables and token based styling approaches.

Things to Keep in Mind

The function is designed primarily for values that change between light and dark themes. It should not replace all uses of media queries.

For example, if an entire layout changes based on screen size or theme, traditional media queries may still be the better choice.

Also remember that light-dark() depends on the color-scheme property being configured correctly.

Final Thoughts

The light-dark() function is one of those CSS features that feels surprisingly simple once you start using it. It reduces boilerplate, keeps theme related logic close to the styles that use it, and makes dark mode support much easier to maintain.

As browser support continues to improve, light-dark() is likely to become a standard part of modern CSS workflows. If you are building applications that support both light and dark themes, it is definitely worth adding to your toolkit.

How It Works (Quick Recap)

1. A Cloudflare Worker fetches the courier’s tracking API (JSON).

2. It compares the latest response with the last one stored in KV.

3. If there’s a change, it posts a webhook to IFTTT (which sends me a push/email).

4. A scheduler (cron) runs the Worker every 30 minutes.

Final Worker Script (with secrets + timeout + readable timeline)

export default {
  async fetch(request, env, ctx) {
    // respond immediately to avoid cron timeouts
    ctx.waitUntil(handleTracking(env));
    return new Response(JSON.stringify({ status: "Queued" }), {
      headers: { "Content-Type": "application/json" },
    });
  },
};

async function handleTracking(env) {
  const API_URL = env.TRACKING_API_URL; // store in wrangler.toml/env
  const IFTTT_WEBHOOK_URL = env.IFTTT_WEBHOOK_URL; // stored as a secret

  try {
    // fetch with an explicit timeout
    const controller = new AbortController();
    const timer = setTimeout(() => controller.abort(), 15000);

    const response = await fetch(API_URL, { signal: controller.signal });
    clearTimeout(timer);

    if (!response.ok) throw new Error(`API error: ${response.status}`);
    const current = await response.json();

    // read previous snapshot
    const previousRaw = await env.TRACKING_CACHE.get("previous_response");
    const previous = previousRaw ? JSON.parse(previousRaw) : null;

    // format timeline into readable text (limit to latest 5 entries to keep push short)
    const timeline = Array.isArray(current.timeline) ? current.timeline : [];
    const latest = timeline.slice(-5);
    const timelineText = latest
      .map(
        (item, i) =>
          `${i + 1}. [${item.date_time}] ${item.message} at ${item.location} (Status: ${item.status})`
      )
      .join("\n");

    // only notify if changed (or if nothing stored yet)
    const changed = !previous || JSON.stringify(previous) !== JSON.stringify(current);
    if (changed) {
      await fetch(IFTTT_WEBHOOK_URL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ update: timelineText }),
      });
      console.log("Change detected → IFTTT notified");
    }

    // persist latest snapshot
    await env.TRACKING_CACHE.put("previous_response", JSON.stringify(current));
  } catch (err) {
    console.error("handleTracking error:", err);
  }
}

Step-by-Step Setup Guide

1) Prerequisites

• A Cloudflare account (Workers + KV enabled on the free tier)

• Node.js + npm installed locally

• An IFTTT account with the Webhooks service enabled

• A courier tracking API URL (replace with yours)

2) Initialize the Worker Project

# install wrangler globally (or use npx wrangler)
npm i -g wrangler

# create a new worker
wrangler init tracking-notifier
cd tracking-notifier

3) Create a KV Namespace

Wrangler v3 syntax uses spaces, not colons.

wrangler kv namespace create TRACKING_CACHE

Copy the returned id. If you use environments (dev/prod), also create a preview namespace:

wrangler kv namespace create TRACKING_CACHE --preview

Then add to wrangler.toml:

name = "tracking-notifier"
main = "src/index.js"
compatibility_date = "2024-01-01"

kv_namespaces = [
  { binding = "TRACKING_CACHE", id = "YOUR_NAMESPACE_ID" }
]

# Optional: built-in Cloudflare cron (every 30 minutes)
triggers = { crons = ["*/30 * * * *"] }

[vars]
TRACKING_API_URL = "https://<>.lk:3001/api/tracking/<number>"

If you prefer environment sections:

[env.production]
kv_namespaces = [
  { binding = "TRACKING_CACHE", id = "PROD_NAMESPACE_ID" }
]

[env.preview]
kv_namespaces = [
  { binding = "TRACKING_CACHE", id = "PREVIEW_NAMESPACE_ID" }
]

4) Store Secrets (Don’t hardcode your IFTTT key)

Create the IFTTT webhook URL like:

https://maker.ifttt.com/trigger/ship/json/with/key/<REPLACE_WITH_YOUR_KEY>

Save it as a Worker secret:

wrangler secret put IFTTT_WEBHOOK_URL
# paste your full webhook URL when prompted

Now the code can read env.IFTTT_WEBHOOK_URL.

5) Wire Up IFTTT

1. In IFTTT, create a new Applet.

2. If This → choose Webhooks, event name: ship.

3. Then That → choose Notifications (or Email/Telegram/Slack).

4. In the message body, include {{update}} to display the timeline text.

5. Go to the Webhooks Documentation page in IFTTT to confirm your key and test.

Manual test (optional):

curl -X POST "$IFTTT_WEBHOOK_URL" \
  -H "Content-Type: application/json" \
  -d '{"update":"IFTTT test from curl"}'

6) Add the Worker Code

• Place the JavaScript from “Final Worker Script” into src/index.js.

• Make sure the imports/structure match your wrangler.toml (the main field).

7) Test Locally & Deploy

Local dev (uses a local preview KV binding):

wrangler dev

Open the local URL shown in the terminal to trigger the fetch once.

Deploy:

wrangler deploy

Tail logs (great for debugging):

wrangler tail

8) Schedule It

Option A — Cloudflare Cron Triggers (recommended)

• We already added:

    triggers = { crons = ["*/30 * * * *"] }
  

• After deploy, Cloudflare runs your Worker every 30 minutes automatically.

Option B — External Cron (cron-job.org)

• Create a cron job that hits your Worker URL every 30 minutes.

• Use method GET (or POST) and a timeout ≥ 10–15 seconds.

• Since our Worker responds immediately and does the work in the background (ctx.waitUntil), cron timeouts are unlikely.

9) Troubleshooting Tips

• IFTTT not firing? Ensure you send {"update":"...text..."} in the body and your event name matches (/trigger/ship/...).

• cron-job.org timeout? We respond immediately and process in the background; verify you deployed that ctx.waitUntil version.

• Large notifications truncated? Limit timeline to the last few entries (as in the sample).

• KV not updating? Check your kv_namespaces binding name matches your code (TRACKING_CACHE).

• API errors or slow courier API? Increase the timeout slightly or add retry logic.

Result

Now I get a neat push/email every time the local courier posts an update, even though they don’t offer native notifications. The stack is free, reliable, and easy to adapt for any other API you want to watch.

Happy automating! 🚀📦

Scalable Vector Graphics (SVG) is an Extensible Markup Language (XML)-based vector image format for two-dimensional graphics with support for interactivity and animation. [ from Wikipedia ]

Every image created has two types. They are Raster images and Vector images. A raster image is created using pixels, and a combination of these pixels makes a single image. Vector images use a different method which uses paths and shapes to create an image. Because of that, Vector images can be enlarged without affecting the quality of the images. But in Raster images, the quality of the image can decrease when the image is enlarged. It takes a blur-like effect when enhancing. The reason for this is when the image size is increased, pixel size also increases.

We can view vector images as code. Because, when a Vector image is created using any software, it transforms any given shape that we insert into an XML code and store it.

You can get a clear idea of the differences between Raster and Vector images from below.

Raster image

Vector image

How do SVG Animations work?

As I mentioned before, SVG is created by combining paths and shapes. We can change these paths and shapes as we like and create animations. The advantage of creating animations like this is that there will be no quality loss.

How to create SVG Animations

I will separate this topic into two sections. The software which we can use to create SVGs and the software needed to create SVG Animations.

To create SVGs, software like Illustrator, and Inkscape can be used.

And to create SVG Animations, you can use specialized software such as SVG Gator.

Even without any software, we can create either SVGs or SVG animations. In the next part, I will discuss it further.

SVG Animation VS GIF Animations ( comparison )

SVG animation can be displayed without any quality loss, but, since Gif animations fall under the Raster category which uses pixels, it has a lower quality when displayed.

SVG animation can even be changed dynamically through code at runtime, but we cannot do that for a Gif animation.

SVG Animation Example

This is an Example SVG animation that I created for the codepen challenge called “insects”, in this example I have animated SVG paths and shapes to work together and create a beautiful scene.

In the next article (part2), I will discuss SVG animations in both ways ( manual way and software based way ).

Thank you for reading 🙂 .

We all know what a traditional single color web icon font is, but a duotone font is a completely different type of font that has two contrasting colors instead of one color. Fontawesome recently introduced their duotone icon font check it out here for full details about duotone icon fonts

The main technique behind duotone icons

For instance, A + B = AB . So the main technique to create this is to layer two Unicode characters on top of each other using CSS.

Let's start creating our first duotone icon font

I found a perfect duotone design on Dribbble to start making our font.

The very first step

The first step is to convert some selected icons from the icons in the Dribbble shot to vector format using illustrator.

Second step (Glyphs app)

From now on, all things should be done through the Glyphs app. Open the Glyphs app and remove all digits, numbers and special characters.

After removing the digits and numbers, we need to create a new glyph.

Next, copy one of the icons designed by Illustrator and paste it into the glyph.

Now we need to duplicate our Glyph

This part should be done very carefully. We need to carefully separate the two parts that we want to show in two tones.

After removing the unwanted tone, it should look like this.

Private Use Areas (PUA)

A private use area is a freely available Unicode range that is not assigned. We can use this for personal use. Read more about this here.

You can know about Unicode range of Private Areas from here

The private use areas range is from U+E000 to U+F8FF

Unicode assigning

Since the range of Private Use Areas starts at E000, we assign E000 Unicode to our first glyph.

And for the second glyph, let's assign Unicode E001. 👇

If you added more icons, assign the Unicodes accordingly.

Now let's export the font

Add a proper family name to the font first to export.

then let's export the font. Make sure to add a check mark to the WOFF and WOFF2.

The third step ( implementation)

Now we are ready to implement our icon font After exporting the font, we can see three files like this

• WOFF

• WOFF2

• TTF

Let's open these three files with vs code to implement the icon. Then two files should be created as index.html and main.css .

We need to add the exported font to the CSS file we can use css @font-face

After adding the font files, we need to add our font family to the icon class.

This is another important step. Now we need to use the Unicode used when creating the font. What we're going to do in this step is layer our separated icon pieces on top of each other. For that, we are going to use absolute positioning.

Here we use CSS variables to assign the colors and opacity is used to achieve the duotone effect. Full CSS source code 👇

 @font-face {
     font-family: "duotone";
     src: url("duotone-Regular.ttf") format("truetype"), url("duotone-Regular.woff") format("woff");
     font-weight: normal;
     font-style: normal;
     font-display: block;
}
 [class^="icon-"], [class*=" icon-"] {
     font-family: "duotone" !important;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}
/* Calender */
 .icon-calender {
     color: var(--primary);
}
 .icon-calender::before {
     content: "\E000";
     opacity: 0.4;
     color: var(--secondary);
     position: absolute;
}
 .icon-calender::after {
     content: "\E001";
}
/* Note */
 .icon-note {
     color: var(--primary);
}
 .icon-note::before {
     content: "\E002";
     opacity: 0.4;
     color: var(--secondary);
     position: absolute;
}
 .icon-note::after {
     content: "\E003";
}

now let's move on to the html part We can define our icon font like any other icon font, but we can apply the desired color with an inline style, so we can easily achieve the duotone effect.

Full HTML source code 👇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Duotone icon-font</title>
    <link rel="stylesheet" href="icon.css">
</head>
<body>
    <i class="icon-calender" style="--primary: #17A171"></i>
    <i class="icon-note" style="--primary: #17A171"></i>
</body>
</html>

This is the Final preview of our duotone icon font

Summary

In this article, we have created our own duotone icon font using Glyphs App and CSS. We use Illustrator to vectorize the icons, and then use the Glyphs App to generate those icons into a font. By using CSS, we easily achieve the duotone effect.

you can find the full source code from here

Thank you for reading 🙂 !