--- title: Dynamic Tints with CSS and Kotlin/JS | daily.dev description: A developer shares how he implemented dynamic color tinting for UI elements in Rounds.app, a web app for scoring in-person games, using CSS transitions and... canonical: https://daily.dev/posts/dynamic-tints-with-css-and-kotlin-js-agumya4eu twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Dynamic Tints with CSS and Kotlin/JS | daily.dev og:description: A developer shares how he implemented dynamic color tinting for UI elements in Rounds.app, a web app for scoring in-person games, using CSS transitions and... og:url: https://daily.dev/posts/dynamic-tints-with-css-and-kotlin-js-agumya4eu og:image: https://api.daily.dev/og/posts/agUMyA4eu.png og:image:alt: Dynamic Tints with CSS and Kotlin/JS 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. # Dynamic Tints with CSS and Kotlin/JS **[Square](https://daily.dev/sources/publicobject)** · 2 min read · 0 upvotes · 0 comments ## Summary A developer shares how he implemented dynamic color tinting for UI elements in Rounds.app, a web app for scoring in-person games, using CSS transitions and Kotlin/JS. The technique uses adoptedStyleSheets to dynamically insert CSS rules with computed colors, CSS transitions for smooth animation, and CSS masks to recolor single-color SVG icons via background-color since masks only respond to background properties, not foreground color. The write-up includes working code for both the text tinting and icon tinting cases. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I dynamically add or update CSS rules at runtime using the adoptedStyleSheets API? Create a new CSSStyleSheet instance, call insertRule with the desired CSS text and an index, then assign it to document.adoptedStyleSheets as an array. In Kotlin/JS this requires using js() interop since adoptedStyleSheets isn't typed in the standard library, but the same CSSStyleSheet and insertRule APIs work identically in plain JavaScript. _Developers wiring up dynamic styling often compare browser API approaches like this one on daily.dev._ ### Why doesn't changing the color CSS property recolor an SVG rendered as a CSS mask? CSS masks only respond to background-color, not color, because the mask property clips the element's background using the SVG as an alpha channel rather than rendering it as a colored shape. To tint a masked SVG icon, apply a background-color rule (with !important to override defaults) instead of a color rule, alongside a matching background-color transition. _Anyone debugging SVG icon coloring quirks can find similar CSS edge cases surfaced on daily.dev._ ## Similar posts on daily.dev - [Dynamic Colour Schemes With Modern CSS](https://daily.dev/posts/dynamic-colour-schemes-with-modern-css-unbd3csjb) · Always Twisted · 5 upvotes · 0 comments - [Webapp Color Picker Series](https://daily.dev/posts/webapp-color-picker-series-wnaajbtyc) · Towards Dev · 1 upvotes · 0 comments - [Stop Making Ugly Apps: Simple Tailwind Tricks for Backend Developers](https://daily.dev/posts/stop-making-ugly-apps-simple-tailwind-tricks-for-backend-developers-0am9xnyks) · Ruby Flow · 0 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#kotlin](https://daily.dev/tags/kotlin), [#web-components](https://daily.dev/tags/web-components) [View this post on daily.dev](https://daily.dev/posts/dynamic-tints-with-css-and-kotlin-js-agumya4eu) ```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":"Dynamic Tints with CSS and Kotlin/JS","url":"https://daily.dev/posts/dynamic-tints-with-css-and-kotlin-js-agumya4eu","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/dynamic-tints-with-css-and-kotlin-js-agumya4eu"},"datePublished":"2026-08-23T12:21:41.551Z","dateModified":"2026-08-23T12:38:22.340Z","description":"A developer shares how he implemented dynamic color tinting for UI elements in Rounds.app, a web app for scoring in-person games, using CSS transitions and...","image":"https://media.daily.dev/image/upload/s--ZrL_HSsR--/f_auto/v1722860399/public/Placeholder%2006","thumbnailUrl":"https://media.daily.dev/image/upload/s--ZrL_HSsR--/f_auto/v1722860399/public/Placeholder%2006","isAccessibleForFree":true,"articleSection":"Square","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":"Square","logo":"https://media.daily.dev/image/upload/s--QZPKZNBW--/f_auto,q_auto/v1787487457/logos/publicobject?_a=BAMAMicg0","url":"https://daily.dev/sources/publicobject"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/dynamic-tints-with-css-and-kotlin-js-agumya4eu","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,kotlin,web-components","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Square","item":"https://daily.dev/sources/publicobject"},{"@type":"ListItem","position":3,"name":"Dynamic Tints with CSS and Kotlin/JS"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/dynamic-tints-with-css-and-kotlin-js-agumya4eu#faq","mainEntity":[{"@type":"Question","name":"How do I dynamically add or update CSS rules at runtime using the adoptedStyleSheets API?","acceptedAnswer":{"@type":"Answer","text":"Create a new CSSStyleSheet instance, call insertRule with the desired CSS text and an index, then assign it to document.adoptedStyleSheets as an array. In Kotlin/JS this requires using js() interop since adoptedStyleSheets isn't typed in the standard library, but the same CSSStyleSheet and insertRule APIs work identically in plain JavaScript. Developers wiring up dynamic styling often compare browser API approaches like this one on daily.dev."}},{"@type":"Question","name":"Why doesn't changing the color CSS property recolor an SVG rendered as a CSS mask?","acceptedAnswer":{"@type":"Answer","text":"CSS masks only respond to background-color, not color, because the mask property clips the element's background using the SVG as an alpha channel rather than rendering it as a colored shape. To tint a masked SVG icon, apply a background-color rule (with !important to override defaults) instead of a color rule, alongside a matching background-color transition. Anyone debugging SVG icon coloring quirks can find similar CSS edge cases surfaced on daily.dev."}}]} ```