[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"course-tree":6,"blog-categories":646,"topic:dark-mode-prefers-color-scheme-light-dark":670},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,334],{"id":9,"name":10,"slug":11,"icon":5,"icon_url":5,"short_description":12,"meta_title":13,"meta_description":14,"og_image":15,"locale":16,"subcategories":17},1,"HTML","html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[18,46,82,106,182,216,230,258,282,298],{"id":9,"name":19,"slug":20,"order_index":9,"topics":21},"HTML Fundamentals & Setup","html-fundamentals-setup",[22,27,30,34,38,42],{"id":23,"title":24,"slug":25,"order_index":9,"cornerstone":26,"reading_time_minutes":23},2,"HTML Editors & Environment Setup","html-editors-and-environment-setup",false,{"id":9,"title":28,"slug":29,"order_index":9,"cornerstone":26,"reading_time_minutes":9},"HTML Introduction & History","html-introduction-and-history",{"id":31,"title":32,"slug":33,"order_index":31,"cornerstone":26,"reading_time_minutes":23},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":35,"title":36,"slug":37,"order_index":35,"cornerstone":26,"reading_time_minutes":23},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":39,"title":40,"slug":41,"order_index":39,"cornerstone":26,"reading_time_minutes":23},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":43,"title":44,"slug":45,"order_index":43,"cornerstone":26,"reading_time_minutes":23},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":23,"name":47,"slug":48,"order_index":23,"topics":49},"Text & Content Basics","text-content-basics",[50,54,58,62,66,70,74,78],{"id":51,"title":52,"slug":53,"order_index":51,"cornerstone":26,"reading_time_minutes":23},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":55,"title":56,"slug":57,"order_index":55,"cornerstone":26,"reading_time_minutes":23},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":59,"title":60,"slug":61,"order_index":59,"cornerstone":26,"reading_time_minutes":9},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":63,"title":64,"slug":65,"order_index":63,"cornerstone":26,"reading_time_minutes":23},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":67,"title":68,"slug":69,"order_index":67,"cornerstone":26,"reading_time_minutes":23},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":71,"title":72,"slug":73,"order_index":71,"cornerstone":26,"reading_time_minutes":23},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":75,"title":76,"slug":77,"order_index":75,"cornerstone":26,"reading_time_minutes":23},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":79,"title":80,"slug":81,"order_index":79,"cornerstone":26,"reading_time_minutes":23},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":31,"name":83,"slug":84,"order_index":31,"topics":85},"Links, Media & Navigation","links-media-navigation",[86,90,94,98,102],{"id":87,"title":88,"slug":89,"order_index":87,"cornerstone":26,"reading_time_minutes":23},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":91,"title":92,"slug":93,"order_index":91,"cornerstone":26,"reading_time_minutes":23},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":95,"title":96,"slug":97,"order_index":95,"cornerstone":26,"reading_time_minutes":9},17,"HTML Favicon Setup","html-favicon-setup",{"id":99,"title":100,"slug":101,"order_index":99,"cornerstone":26,"reading_time_minutes":23},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":103,"title":104,"slug":105,"order_index":103,"cornerstone":26,"reading_time_minutes":23},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":35,"name":107,"slug":108,"order_index":35,"topics":109},"Structuring Content","structuring-content",[110,115,120,125,130,134,138,142,146,150,154,158,162,166,170,174,178],{"id":111,"title":112,"slug":113,"order_index":114,"cornerstone":26,"reading_time_minutes":23},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":116,"title":117,"slug":118,"order_index":119,"cornerstone":26,"reading_time_minutes":23},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":121,"title":122,"slug":123,"order_index":124,"cornerstone":26,"reading_time_minutes":23},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":126,"title":127,"slug":128,"order_index":129,"cornerstone":26,"reading_time_minutes":9},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":131,"title":132,"slug":133,"order_index":111,"cornerstone":26,"reading_time_minutes":23},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":135,"title":136,"slug":137,"order_index":116,"cornerstone":26,"reading_time_minutes":9},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":139,"title":140,"slug":141,"order_index":121,"cornerstone":26,"reading_time_minutes":23},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":143,"title":144,"slug":145,"order_index":126,"cornerstone":26,"reading_time_minutes":23},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":147,"title":148,"slug":149,"order_index":131,"cornerstone":26,"reading_time_minutes":23},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":151,"title":152,"slug":153,"order_index":135,"cornerstone":26,"reading_time_minutes":31},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":155,"title":156,"slug":157,"order_index":139,"cornerstone":26,"reading_time_minutes":23},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":159,"title":160,"slug":161,"order_index":143,"cornerstone":26,"reading_time_minutes":23},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":163,"title":164,"slug":165,"order_index":147,"cornerstone":26,"reading_time_minutes":9},77,"HTML Symbols","html-symbols",{"id":167,"title":168,"slug":169,"order_index":167,"cornerstone":26,"reading_time_minutes":9},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":171,"title":172,"slug":173,"order_index":171,"cornerstone":26,"reading_time_minutes":23},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":175,"title":176,"slug":177,"order_index":175,"cornerstone":26,"reading_time_minutes":9},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":179,"title":180,"slug":181,"order_index":179,"cornerstone":26,"reading_time_minutes":9},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":51,"name":183,"slug":184,"order_index":39,"topics":185},"Forms & User Input","forms-user-input",[186,191,196,201,206,211],{"id":187,"title":188,"slug":189,"order_index":190,"cornerstone":26,"reading_time_minutes":23},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":192,"title":193,"slug":194,"order_index":195,"cornerstone":26,"reading_time_minutes":9},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":197,"title":198,"slug":199,"order_index":200,"cornerstone":26,"reading_time_minutes":9},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":202,"title":203,"slug":204,"order_index":205,"cornerstone":26,"reading_time_minutes":23},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":207,"title":208,"slug":209,"order_index":210,"cornerstone":26,"reading_time_minutes":23},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":212,"title":213,"slug":214,"order_index":215,"cornerstone":26,"reading_time_minutes":23},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":55,"name":217,"slug":218,"order_index":43,"topics":219},"Graphics & Visuals","graphics-visuals",[220,225],{"id":221,"title":222,"slug":223,"order_index":224,"cornerstone":26,"reading_time_minutes":31},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":226,"title":227,"slug":228,"order_index":229,"cornerstone":26,"reading_time_minutes":31},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":59,"name":231,"slug":232,"order_index":51,"topics":233},"Multimedia","multimedia",[234,239,244,249,254],{"id":235,"title":236,"slug":237,"order_index":238,"cornerstone":26,"reading_time_minutes":23},57,"HTML Media Overview","html-media-overview",45,{"id":240,"title":241,"slug":242,"order_index":243,"cornerstone":26,"reading_time_minutes":23},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":245,"title":246,"slug":247,"order_index":248,"cornerstone":26,"reading_time_minutes":23},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":250,"title":251,"slug":252,"order_index":253,"cornerstone":26,"reading_time_minutes":23},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":255,"title":256,"slug":257,"order_index":187,"cornerstone":26,"reading_time_minutes":23},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":63,"name":259,"slug":260,"order_index":55,"topics":261},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[262,266,270,274,278],{"id":263,"title":264,"slug":265,"order_index":192,"cornerstone":26,"reading_time_minutes":23},62,"HTML Geolocation API","html-geolocation-api",{"id":267,"title":268,"slug":269,"order_index":197,"cornerstone":26,"reading_time_minutes":23},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":271,"title":272,"slug":273,"order_index":202,"cornerstone":26,"reading_time_minutes":23},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":275,"title":276,"slug":277,"order_index":207,"cornerstone":26,"reading_time_minutes":23},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":279,"title":280,"slug":281,"order_index":212,"cornerstone":26,"reading_time_minutes":23},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":67,"name":283,"slug":284,"order_index":59,"topics":285},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[286,290,294],{"id":287,"title":288,"slug":289,"order_index":221,"cornerstone":26,"reading_time_minutes":23},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":291,"title":292,"slug":293,"order_index":226,"cornerstone":26,"reading_time_minutes":23},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":295,"title":296,"slug":297,"order_index":235,"cornerstone":26,"reading_time_minutes":23},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":71,"name":299,"slug":300,"order_index":63,"topics":301},"Reference & Practice","reference-practice",[302,306,310,314,318,322,326,330],{"id":303,"title":304,"slug":305,"order_index":9,"cornerstone":26,"reading_time_minutes":23},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":307,"title":308,"slug":309,"order_index":23,"cornerstone":26,"reading_time_minutes":23},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":311,"title":312,"slug":313,"order_index":31,"cornerstone":26,"reading_time_minutes":23},72,"HTML Events Reference","html-events-reference",{"id":315,"title":316,"slug":317,"order_index":35,"cornerstone":26,"reading_time_minutes":23},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":319,"title":320,"slug":321,"order_index":39,"cornerstone":26,"reading_time_minutes":23},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":323,"title":324,"slug":325,"order_index":43,"cornerstone":26,"reading_time_minutes":23},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":327,"title":328,"slug":329,"order_index":51,"cornerstone":26,"reading_time_minutes":31},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":331,"title":332,"slug":333,"order_index":55,"cornerstone":26,"reading_time_minutes":9},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":23,"name":335,"slug":336,"icon":5,"icon_url":5,"short_description":337,"meta_title":338,"meta_description":339,"og_image":5,"locale":16,"subcategories":340},"CSS","css","Master CSS from basics to advanced. Learn styling, layouts, Flexbox, Grid, and responsive design with practical examples.","CSS Course - Learn CSS from Scratch to Advanced","Learn CSS (Cascading Style Sheets) step by step. Master selectors, layouts, Flexbox, Grid, animations, and responsive web design with hands-on examples.",[341,370,394,430,462,494,526,558,586,614],{"id":129,"name":342,"slug":343,"order_index":344,"topics":345},"UI Components","ui-components",0,[346,350,354,358,362,366],{"id":347,"title":348,"slug":349,"order_index":255,"cornerstone":26,"reading_time_minutes":43},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":351,"title":352,"slug":353,"order_index":263,"cornerstone":26,"reading_time_minutes":43},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":355,"title":356,"slug":357,"order_index":267,"cornerstone":26,"reading_time_minutes":51},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":359,"title":360,"slug":361,"order_index":271,"cornerstone":26,"reading_time_minutes":43},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":363,"title":364,"slug":365,"order_index":275,"cornerstone":26,"reading_time_minutes":43},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":367,"title":368,"slug":369,"order_index":279,"cornerstone":26,"reading_time_minutes":43},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":75,"name":371,"slug":372,"order_index":344,"topics":373},"CSS Fundamentals & Setup","css-fundamentals-setup",[374,378,382,386,390],{"id":375,"title":376,"slug":377,"order_index":9,"cornerstone":26,"reading_time_minutes":35},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":379,"title":380,"slug":381,"order_index":23,"cornerstone":26,"reading_time_minutes":35},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":383,"title":384,"slug":385,"order_index":31,"cornerstone":26,"reading_time_minutes":31},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":387,"title":388,"slug":389,"order_index":35,"cornerstone":26,"reading_time_minutes":31},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":391,"title":392,"slug":393,"order_index":39,"cornerstone":26,"reading_time_minutes":39},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":79,"name":395,"slug":396,"order_index":344,"topics":397},"Selectors & the Cascade","selectors-the-cascade",[398,402,406,410,414,418,422,426],{"id":399,"title":400,"slug":401,"order_index":43,"cornerstone":26,"reading_time_minutes":35},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":403,"title":404,"slug":405,"order_index":51,"cornerstone":26,"reading_time_minutes":35},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":407,"title":408,"slug":409,"order_index":55,"cornerstone":26,"reading_time_minutes":35},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":411,"title":412,"slug":413,"order_index":59,"cornerstone":26,"reading_time_minutes":43},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":415,"title":416,"slug":417,"order_index":63,"cornerstone":26,"reading_time_minutes":39},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":419,"title":420,"slug":421,"order_index":67,"cornerstone":26,"reading_time_minutes":39},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":423,"title":424,"slug":425,"order_index":71,"cornerstone":26,"reading_time_minutes":35},93,"CSS Specificity Explained","css-specificity-explained",{"id":427,"title":428,"slug":429,"order_index":75,"cornerstone":26,"reading_time_minutes":39},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":87,"name":431,"slug":432,"order_index":344,"topics":433},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[434,438,442,446,450,454,458],{"id":435,"title":436,"slug":437,"order_index":79,"cornerstone":26,"reading_time_minutes":39},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":439,"title":440,"slug":441,"order_index":87,"cornerstone":26,"reading_time_minutes":35},96,"CSS Backgrounds","css-backgrounds",{"id":443,"title":444,"slug":445,"order_index":91,"cornerstone":26,"reading_time_minutes":39},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":447,"title":448,"slug":449,"order_index":95,"cornerstone":26,"reading_time_minutes":39},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":451,"title":452,"slug":453,"order_index":99,"cornerstone":26,"reading_time_minutes":43},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":455,"title":456,"slug":457,"order_index":103,"cornerstone":26,"reading_time_minutes":39},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":459,"title":460,"slug":461,"order_index":114,"cornerstone":26,"reading_time_minutes":43},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":91,"name":463,"slug":464,"order_index":344,"topics":465},"Box Model & Spacing","box-model-spacing",[466,470,474,478,482,486,490],{"id":467,"title":468,"slug":469,"order_index":119,"cornerstone":26,"reading_time_minutes":51},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":471,"title":472,"slug":473,"order_index":124,"cornerstone":26,"reading_time_minutes":51},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":475,"title":476,"slug":477,"order_index":129,"cornerstone":26,"reading_time_minutes":43},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":479,"title":480,"slug":481,"order_index":111,"cornerstone":26,"reading_time_minutes":59},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":483,"title":484,"slug":485,"order_index":116,"cornerstone":26,"reading_time_minutes":39},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":487,"title":488,"slug":489,"order_index":121,"cornerstone":26,"reading_time_minutes":51},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":491,"title":492,"slug":493,"order_index":126,"cornerstone":26,"reading_time_minutes":51},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":95,"name":495,"slug":496,"order_index":344,"topics":497},"Typography & Text","typography-text",[498,502,506,510,514,518,522],{"id":499,"title":500,"slug":501,"order_index":131,"cornerstone":26,"reading_time_minutes":51},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":503,"title":504,"slug":505,"order_index":135,"cornerstone":26,"reading_time_minutes":51},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":507,"title":508,"slug":509,"order_index":139,"cornerstone":26,"reading_time_minutes":51},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":511,"title":512,"slug":513,"order_index":143,"cornerstone":26,"reading_time_minutes":51},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":515,"title":516,"slug":517,"order_index":147,"cornerstone":26,"reading_time_minutes":55},113,"Styling Links","styling-links-css",{"id":519,"title":520,"slug":521,"order_index":167,"cornerstone":26,"reading_time_minutes":51},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":523,"title":524,"slug":525,"order_index":171,"cornerstone":26,"reading_time_minutes":63},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":99,"name":527,"slug":528,"order_index":344,"topics":529},"Display, Position & Layout Basics","display-position-layout-basics",[530,534,538,542,546,550,554],{"id":531,"title":532,"slug":533,"order_index":175,"cornerstone":26,"reading_time_minutes":51},116,"Display & Inline-block","display-and-inline-block",{"id":535,"title":536,"slug":537,"order_index":179,"cornerstone":26,"reading_time_minutes":43},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":539,"title":540,"slug":541,"order_index":190,"cornerstone":26,"reading_time_minutes":43},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":543,"title":544,"slug":545,"order_index":195,"cornerstone":26,"reading_time_minutes":39},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":547,"title":548,"slug":549,"order_index":200,"cornerstone":26,"reading_time_minutes":43},120,"Centering Techniques","centering-techniques",{"id":551,"title":552,"slug":553,"order_index":205,"cornerstone":26,"reading_time_minutes":51},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":555,"title":556,"slug":557,"order_index":210,"cornerstone":26,"reading_time_minutes":55},122,"Website Layout Basics","website-layout-basics",{"id":114,"name":559,"slug":560,"order_index":344,"topics":561},"The Modern CSS Toolkit","the-modern-css-toolkit",[562,566,570,574,578,582],{"id":563,"title":564,"slug":565,"order_index":215,"cornerstone":26,"reading_time_minutes":55},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":567,"title":568,"slug":569,"order_index":224,"cornerstone":26,"reading_time_minutes":55},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":571,"title":572,"slug":573,"order_index":229,"cornerstone":26,"reading_time_minutes":51},131,"Native CSS Nesting","native-css-nesting",{"id":575,"title":576,"slug":577,"order_index":238,"cornerstone":26,"reading_time_minutes":51},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":579,"title":580,"slug":581,"order_index":243,"cornerstone":26,"reading_time_minutes":59},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":583,"title":584,"slug":585,"order_index":248,"cornerstone":26,"reading_time_minutes":55},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":119,"name":587,"slug":588,"order_index":344,"topics":589},"Responsive Design","responsive-design",[590,594,598,602,606,610],{"id":591,"title":592,"slug":593,"order_index":253,"cornerstone":26,"reading_time_minutes":59},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":595,"title":596,"slug":597,"order_index":187,"cornerstone":26,"reading_time_minutes":55},136,"Media Queries","media-queries",{"id":599,"title":600,"slug":601,"order_index":192,"cornerstone":26,"reading_time_minutes":55},137,"Responsive Images & Video","responsive-images-and-video",{"id":603,"title":604,"slug":605,"order_index":197,"cornerstone":26,"reading_time_minutes":59},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":607,"title":608,"slug":609,"order_index":202,"cornerstone":26,"reading_time_minutes":59},139,"Container Queries","container-queries",{"id":611,"title":612,"slug":613,"order_index":207,"cornerstone":26,"reading_time_minutes":71},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":124,"name":615,"slug":616,"order_index":344,"topics":617},"Transitions & Animation","transitions-animation",[618,622,626,630,634,638,642],{"id":619,"title":620,"slug":621,"order_index":212,"cornerstone":26,"reading_time_minutes":39},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":623,"title":624,"slug":625,"order_index":221,"cornerstone":26,"reading_time_minutes":35},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":627,"title":628,"slug":629,"order_index":226,"cornerstone":26,"reading_time_minutes":39},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":631,"title":632,"slug":633,"order_index":235,"cornerstone":26,"reading_time_minutes":39},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":635,"title":636,"slug":637,"order_index":240,"cornerstone":26,"reading_time_minutes":39},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":639,"title":640,"slug":641,"order_index":245,"cornerstone":26,"reading_time_minutes":39},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":643,"title":644,"slug":645,"order_index":250,"cornerstone":26,"reading_time_minutes":43},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance",{"data":647},[648,651,655,660,665],{"name":335,"slug":336,"description":649,"post_count":23,"subcategories":650},"Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":10,"slug":652,"description":653,"post_count":23,"subcategories":654},"html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":656,"slug":657,"description":658,"post_count":9,"subcategories":659},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",[],{"name":661,"slug":662,"description":663,"post_count":9,"subcategories":664},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":666,"slug":667,"description":668,"post_count":9,"subcategories":669},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":671},{"id":579,"title":580,"slug":581,"content":672,"course":673,"subcategory":674,"author":675,"reading_time_minutes":59,"cornerstone":26,"schema_type":681,"faq_json":5,"video_url":5,"canonical_url":682,"meta_title":683,"meta_description":684,"og_image":5,"toc_json":685,"code_examples":742,"quiz":5,"exercises":766,"published_at":5,"updated_at":781,"prev":782,"next":783},"\u003Ch2 id=\"css-dark-mode-prefers-color-scheme-and-light-dark\">CSS Dark Mode: prefers-color-scheme and light-dark()\u003C\u002Fh2>\u003Cp>\u003Cstrong>Focus keyword: CSS dark mode.\u003C\u002Fstrong> Dark mode is now an expected feature. Many users set their operating system to dark, and they expect your website to follow. In this lesson you will learn the prefers-color-scheme media query, the color-scheme property, the light-dark() function, how to build a manual theme toggle with three states, how to avoid the flash of the wrong theme, and how to design a dark palette that is readable and accessible.\u003C\u002Fp>\u003Ch3 id=\"trending-keywords-covered-in-this-lesson\">Trending keywords covered in this lesson\u003C\u002Fh3>\u003Cp>CSS dark mode, prefers-color-scheme, light-dark() function, color-scheme property, meta color-scheme, dark mode toggle, dark mode localStorage, flash of incorrect theme, theme-color meta tag, dark mode CSS variables, data-theme attribute, system light dark theme, dark mode images, dark mode contrast, WCAG contrast ratio, color-mix, accent-color, prefers-contrast, forced-colors, prefers-reduced-motion, dark mode design tips.\u003C\u002Fp>\u003Ch2 id=\"1-how-dark-mode-works\">1. How Dark Mode Works\u003C\u002Fh2>\u003Cp>The operating system or browser exposes the user's preference. CSS reads it with a media query, and the browser can also adapt built-in controls such as form fields and scrollbars. A good implementation has three parts: a default that follows the system, optional manual override by the user, and a palette designed for both themes.\u003C\u002Fp>\u003Ch2 id=\"2-the-prefers-color-scheme-media-query\">2. The prefers-color-scheme Media Query\u003C\u002Fh2>\u003Cp>\u003Ccode>@media (prefers-color-scheme: dark) { ... }\u003C\u002Fcode> matches when the user prefers a dark theme. The other value is \u003Ccode>light\u003C\u002Fcode>. The recommended pattern is to define your colors as CSS variables on \u003Ccode>:root\u003C\u002Fcode> for light and redefine the same variables inside the dark media query. Components then use the variables and need no dark-specific rules.\u003C\u002Fp>\u003Ch2 id=\"3-the-color-scheme-property-and-meta-tag\">3. The color-scheme Property and Meta Tag\u003C\u002Fh2>\u003Cp>The property \u003Ccode>color-scheme: light dark\u003C\u002Fcode> on \u003Ccode>:root\u003C\u002Fcode> tells the browser that your page supports both schemes. The browser then switches default colors for the canvas, text, form controls, scrollbars and the focus ring. You can also add the HTML tag \u003Ccode><meta name='color-scheme' content='light dark'>\u003C\u002Fcode> in the head so the very first paint has the right background and avoids a white flash. Use \u003Ccode>color-scheme: only light\u003C\u002Fcode> only when you truly do not want the browser to adapt.\u003C\u002Fp>\u003Ch2 id=\"4-the-light-dark-function\">4. The light-dark() Function\u003C\u002Fh2>\u003Cp>\u003Ccode>light-dark(lightValue, darkValue)\u003C\u002Fcode> returns the first color in a light scheme and the second in a dark scheme. Example: \u003Ccode>background: light-dark(#ffffff, #12141a);\u003C\u002Fcode>. Important rules:\u003C\u002Fp>\u003Cul>\u003Cli>It only works when \u003Ccode>color-scheme\u003C\u002Fcode> is set, for example \u003Ccode>:root { color-scheme: light dark; }\u003C\u002Fcode>. Without it the function always returns the light value.\u003C\u002Fli>\u003Cli>It accepts colors, so it is great for background, color, border-color and similar properties.\u003C\u002Fli>\u003Cli>It removes the need for a separate media query block for simple palettes.\u003C\u002Fli>\u003Cli>It follows the \u003Ccode>color-scheme\u003C\u002Fcode> of the element, so you can force a section to dark with \u003Ccode>color-scheme: dark\u003C\u002Fcode> and the colors inside switch automatically.\u003C\u002Fli>\u003Cli>It is supported by modern browsers. Add a media query based fallback if you need older ones.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"5-manual-toggle-with-three-states\">5. Manual Toggle with Three States\u003C\u002Fh2>\u003Cp>Some users want a site setting that differs from their system. Offer three choices: \u003Cstrong>System\u003C\u002Fstrong>, \u003Cstrong>Light\u003C\u002Fstrong> and \u003Cstrong>Dark\u003C\u002Fstrong>. With light-dark() the CSS is short: keep \u003Ccode>:root { color-scheme: light dark; }\u003C\u002Fcode> for System, then add \u003Ccode>:root[data-theme='light'] { color-scheme: light; }\u003C\u002Fcode> and \u003Ccode>:root[data-theme='dark'] { color-scheme: dark; }\u003C\u002Fcode>. All colors written with light-dark() follow the forced scheme. If you use variables and media queries instead, repeat the dark variables inside the media query for System and inside the data-theme selector for the manual choice.\u003C\u002Fp>\u003Ch2 id=\"6-saving-the-choice-and-avoiding-the-flash\">6. Saving the Choice and Avoiding the Flash\u003C\u002Fh2>\u003Cp>Save the user choice with \u003Ccode>localStorage\u003C\u002Fcode>. To avoid a flash of the wrong theme, read the saved value in a small \u003Cstrong>inline script in the head\u003C\u002Fstrong>, before the CSS is painted, and set the \u003Ccode>data-theme\u003C\u002Fcode> attribute on the html element immediately. Wrap storage calls in try and catch because storage can be blocked. Also listen for changes of the system setting with \u003Ccode>matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...)\u003C\u002Fcode> when the user is in System mode.\u003C\u002Fp>\u003Ch2 id=\"7-designing-a-good-dark-palette\">7. Designing a Good Dark Palette\u003C\u002Fh2>\u003Cul>\u003Cli>Avoid pure black \u003Ccode>#000\u003C\u002Fcode> with pure white text. Use a very dark gray such as \u003Ccode>#12141a\u003C\u002Fcode> and an off-white such as \u003Ccode>#e8eaf0\u003C\u002Fcode> to reduce glare.\u003C\u002Fli>\u003Cli>Use elevation by lightness: higher surfaces such as cards and menus are slightly lighter than the page background, because shadows are hard to see on dark colors.\u003C\u002Fli>\u003Cli>Lower the saturation of bright colors and use lighter tints of your brand color for links and buttons.\u003C\u002Fli>\u003Cli>Do not just invert colors. Design each theme and check it.\u003C\u002Fli>\u003Cli>Keep semantic meaning: error stays red, success stays green, but adjust the tone for contrast.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"8-contrast-and-accessibility\">8. Contrast and Accessibility\u003C\u002Fh2>\u003Cul>\u003Cli>WCAG requires a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text and UI components, in both themes.\u003C\u002Fli>\u003Cli>Test focus rings, borders, disabled states and placeholder text in dark mode.\u003C\u002Fli>\u003Cli>Respect \u003Ccode>prefers-contrast: more\u003C\u002Fcode> and \u003Ccode>forced-colors: active\u003C\u002Fcode> with stronger borders and system colors.\u003C\u002Fli>\u003Cli>Respect \u003Ccode>prefers-reduced-motion\u003C\u002Fcode> if you animate the theme change.\u003C\u002Fli>\u003Cli>Do not rely on color only to show state.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"9-images-svg-and-media\">9. Images, SVG and Media\u003C\u002Fh2>\u003Cul>\u003Cli>Use the \u003Ccode>picture\u003C\u002Fcode> element with \u003Ccode><source media='(prefers-color-scheme: dark)'>\u003C\u002Fcode> to load a different image for each theme, such as a logo with light text.\u003C\u002Fli>\u003Cli>Soften bright photos in dark mode with \u003Ccode>filter: brightness(.85)\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>For inline SVG icons use \u003Ccode>fill: currentColor\u003C\u002Fcode> so they follow the text color.\u003C\u002Fli>\u003Cli>Transparent PNGs with dark text may become unreadable, so test them on both backgrounds.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"10-other-useful-details\">10. Other Useful Details\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ccode><meta name='theme-color'>\u003C\u002Fcode> accepts a \u003Ccode>media\u003C\u002Fcode> attribute, so the browser toolbar color can match each theme.\u003C\u002Fli>\u003Cli>\u003Ccode>accent-color\u003C\u002Fcode> colors native checkboxes, radios and range inputs, and with \u003Ccode>light-dark()\u003C\u002Fcode> it works in both themes.\u003C\u002Fli>\u003Cli>\u003Ccode>color-mix(in srgb, var(--primary) 20%, var(--bg))\u003C\u002Fcode> creates consistent tints and hover colors from your variables.\u003C\u002Fli>\u003Cli>Use \u003Ccode>transition: background-color .2s, color .2s\u003C\u002Fcode> for a smooth switch, and disable it for reduced motion.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"11-common-mistakes\">11. Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Using light-dark() without setting color-scheme.\u003C\u002Fli>\u003Cli>Hard coding colors in components instead of variables or light-dark().\u003C\u002Fli>\u003Cli>Forgetting form controls, scrollbars and the page canvas, which stay light without color-scheme.\u003C\u002Fli>\u003Cli>Loading the theme in a script at the end of the page and causing a flash.\u003C\u002Fli>\u003Cli>Using pure black and pure white and creating eye strain.\u003C\u002Fli>\u003Cli>Testing only one theme for contrast.\u003C\u002Fli>\u003Cli>Ignoring images and logos that do not work on a dark background.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cp>Set color-scheme to light dark, define colors with variables or light-dark(), follow the system by default and offer a saved manual override, set the theme early in the head to avoid a flash, design the dark palette with softer contrast and lighter elevation, and always check accessibility in both themes.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root {\n    color-scheme: light dark;\n    --bg: #ffffff; --text: #1b1b1f; --card: #f1f5f9; --primary: #0b5fff;\n  }\n  @media (prefers-color-scheme: dark) {\n    :root { --bg: #12141a; --text: #e8eaf0; --card: #1e222b; --primary: #6ea8ff; }\n  }\n  body { margin: 0; padding: 20px; font: 18px system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }\n  .card { background: var(--card); padding: 16px; border-radius: 12px; max-width: 360px; }\n  a { color: var(--primary); }\n<\u002Fstyle>\n<div class='card'><h3>Follows the system<\u002Fh3><p>Change your OS theme and this card updates.<\u002Fp><a href='#'>A themed link<\u002Fa><\u002Fdiv>\n<p><input type='text' placeholder='Native input adapts'> <input type='checkbox' checked><\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root { color-scheme: light dark; }\n  body {\n    margin: 0; padding: 20px; font: 18px system-ui, sans-serif; min-height: 100vh;\n    background: light-dark(#ffffff, #12141a);\n    color: light-dark(#1b1b1f, #e8eaf0);\n  }\n  .card {\n    padding: 16px; border-radius: 12px; max-width: 360px;\n    background: light-dark(#f1f5f9, #1e222b);\n    border: 1px solid light-dark(#d0d7de, #2f3542);\n  }\n  a { color: light-dark(#0b5fff, #8ab4ff); }\n  .forced-dark { color-scheme: dark; margin-top: 12px; background: light-dark(#fff, #0b0d12); color: light-dark(#111, #fff); padding: 12px; border-radius: 12px; max-width: 360px; }\n<\u002Fstyle>\n<div class='card'>light-dark() picks the color by scheme. <a href='#'>Link<\u002Fa><\u002Fdiv>\n<div class='forced-dark'>This box forces color-scheme: dark<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root { color-scheme: light dark; }\n  :root[data-theme='light'] { color-scheme: light; }\n  :root[data-theme='dark'] { color-scheme: dark; }\n  body { margin: 0; padding: 20px; font: 18px system-ui, sans-serif; min-height: 100vh; background: light-dark(#fff, #12141a); color: light-dark(#1b1b1f, #e8eaf0); transition: background-color .2s, color .2s; }\n  .bar { display: flex; gap: 8px; margin-bottom: 16px; }\n  button { padding: 8px 14px; border-radius: 8px; border: 1px solid light-dark(#b8c0cc, #3b4252); background: light-dark(#f1f5f9, #1e222b); color: inherit; cursor: pointer; }\n  button[aria-pressed='true'] { outline: 3px solid light-dark(#0b5fff, #8ab4ff); }\n  @media (prefers-reduced-motion: reduce) { body { transition: none; } }\n<\u002Fstyle>\n<div class='bar'>\n  <button data-mode='system'>System<\u002Fbutton>\n  <button data-mode='light'>Light<\u002Fbutton>\n  <button data-mode='dark'>Dark<\u002Fbutton>\n<\u002Fdiv>\n<p>Current mode: <strong id='label'>system<\u002Fstrong><\u002Fp>\n<script>\n  var root = document.documentElement;\n  var label = document.getElementById('label');\n  var buttons = document.querySelectorAll('button');\n  function apply(mode) {\n    if (mode === 'system') { root.removeAttribute('data-theme'); } else { root.setAttribute('data-theme', mode); }\n    label.textContent = mode;\n    buttons.forEach(function (b) { b.setAttribute('aria-pressed', b.dataset.mode === mode); });\n    try { localStorage.setItem('theme', mode); } catch (e) {}\n  }\n  var saved = 'system';\n  try { saved = localStorage.getItem('theme') || 'system'; } catch (e) {}\n  apply(saved);\n  buttons.forEach(function (b) { b.addEventListener('click', function () { apply(b.dataset.mode); }); });\n<\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><!-- Put this small script in the <head>, before the CSS, to avoid a flash -->\n<script>\n  (function () {\n    try {\n      var saved = localStorage.getItem('theme');\n      if (saved === 'light' || saved === 'dark') {\n        document.documentElement.setAttribute('data-theme', saved);\n      }\n    } catch (e) {}\n  })();\n<\u002Fscript>\n<meta name='color-scheme' content='light dark'>\n<meta name='theme-color' content='#ffffff' media='(prefers-color-scheme: light)'>\n<meta name='theme-color' content='#12141a' media='(prefers-color-scheme: dark)'>\n<style>\n  :root { color-scheme: light dark; }\n  :root[data-theme='light'] { color-scheme: light; }\n  :root[data-theme='dark'] { color-scheme: dark; }\n  body { font: 18px system-ui, sans-serif; padding: 16px; background: light-dark(#fff, #12141a); color: light-dark(#1b1b1f, #e8eaf0); }\n<\u002Fstyle>\n<p>The saved theme is applied before the first paint, so there is no flash.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root { color-scheme: light dark; }\n  body { margin: 0; padding: 20px; font: 18px system-ui, sans-serif; background: light-dark(#eef2f7, #0f1117); color: light-dark(#1b1b1f, #e8eaf0); }\n  .surface-1 { background: light-dark(#ffffff, #171a22); padding: 16px; border-radius: 12px; max-width: 420px; }\n  .surface-2 { background: light-dark(#f4f7fb, #1f232d); padding: 12px; border-radius: 10px; margin-top: 10px; }\n  .btn { --primary: light-dark(#0b5fff, #8ab4ff); background: var(--primary); color: light-dark(#fff, #0b1020); border: 0; padding: 8px 14px; border-radius: 8px; }\n  .tint { background: color-mix(in srgb, var(--primary, #0b5fff) 18%, transparent); padding: 10px; border-radius: 8px; margin-top: 10px; }\n  .photo { display: block; width: 100%; height: 80px; border-radius: 8px; margin-top: 10px; background: linear-gradient(135deg, #ffd166, #ef476f); }\n  @media (prefers-color-scheme: dark) { .photo { filter: brightness(.85); } }\n  input[type=checkbox], input[type=range] { accent-color: light-dark(#0b5fff, #8ab4ff); }\n<\u002Fstyle>\n<div class='surface-1'>Surface 1 (page card)\n  <div class='surface-2'>Surface 2 is lighter in dark mode: elevation by lightness<\u002Fdiv>\n  <div class='tint'>color-mix() tint<\u002Fdiv>\n  <div class='photo'><\u002Fdiv>\n  <p><button class='btn'>Button<\u002Fbutton> <input type='checkbox' checked> <input type='range'><\u002Fp>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  picture img { width: 240px; height: 80px; border: 1px solid #888; border-radius: 8px; display: block; }\n<\u002Fstyle>\n<p>A different logo file per theme with the picture element:<\u002Fp>\n<picture>\n  <source media='(prefers-color-scheme: dark)' srcset=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='240' height='80'%3E%3Crect width='240' height='80' fill='%2312141a'\u002F%3E%3Ctext x='120' y='48' font-size='28' text-anchor='middle' fill='white' font-family='sans-serif'%3EDark logo%3C\u002Ftext%3E%3C\u002Fsvg%3E\">\n  <img alt='Brand logo' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='240' height='80'%3E%3Crect width='240' height='80' fill='white'\u002F%3E%3Ctext x='120' y='48' font-size='28' text-anchor='middle' fill='black' font-family='sans-serif'%3ELight logo%3C\u002Ftext%3E%3C\u002Fsvg%3E\">\n<\u002Fpicture>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>var query = window.matchMedia('(prefers-color-scheme: dark)');\n\nfunction describe() {\n  return query.matches ? 'The system prefers dark.' : 'The system prefers light.';\n}\n\nconsole.log(describe());\n\nquery.addEventListener('change', function () {\n  console.log('System theme changed. ' + describe());\n});\n\nconsole.log('Contrast targets: 4.5:1 for normal text, 3:1 for large text and UI parts.');\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":335,"slug":336},{"name":559,"slug":560},{"slug":676,"display_name":677,"job_title":5,"short_bio":5,"expertise_tags":678,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":679,"posts":680},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fdark-mode-prefers-color-scheme-light-dark","CSS Dark Mode: prefers-color-scheme, light-dark() and Toggle","Build CSS dark mode with prefers-color-scheme, the color-scheme property, light-dark(), CSS variables and a user toggle saved in localStorage, plus accessibility tips.",[686,694,698,702,706,710,714,718,722,726,730,734,738],{"id":687,"text":688,"level":23,"children":689},"css-dark-mode-prefers-color-scheme-and-light-dark","CSS Dark Mode: prefers-color-scheme and light-dark()",[690],{"id":691,"text":692,"level":31,"children":693},"trending-keywords-covered-in-this-lesson","Trending keywords covered in this lesson",[],{"id":695,"text":696,"level":23,"children":697},"1-how-dark-mode-works","1. How Dark Mode Works",[],{"id":699,"text":700,"level":23,"children":701},"2-the-prefers-color-scheme-media-query","2. The prefers-color-scheme Media Query",[],{"id":703,"text":704,"level":23,"children":705},"3-the-color-scheme-property-and-meta-tag","3. The color-scheme Property and Meta Tag",[],{"id":707,"text":708,"level":23,"children":709},"4-the-light-dark-function","4. The light-dark() Function",[],{"id":711,"text":712,"level":23,"children":713},"5-manual-toggle-with-three-states","5. Manual Toggle with Three States",[],{"id":715,"text":716,"level":23,"children":717},"6-saving-the-choice-and-avoiding-the-flash","6. Saving the Choice and Avoiding the Flash",[],{"id":719,"text":720,"level":23,"children":721},"7-designing-a-good-dark-palette","7. Designing a Good Dark Palette",[],{"id":723,"text":724,"level":23,"children":725},"8-contrast-and-accessibility","8. Contrast and Accessibility",[],{"id":727,"text":728,"level":23,"children":729},"9-images-svg-and-media","9. Images, SVG and Media",[],{"id":731,"text":732,"level":23,"children":733},"10-other-useful-details","10. Other Useful Details",[],{"id":735,"text":736,"level":23,"children":737},"11-common-mistakes","11. Common Mistakes",[],{"id":739,"text":740,"level":23,"children":741},"key-takeaways","Key Takeaways",[],[743,747,750,753,756,759,762],{"id":744,"language":652,"code":745,"is_editable":746},516,"\u003Cstyle>\n  :root {\n    color-scheme: light dark;\n    --bg: #ffffff; --text: #1b1b1f; --card: #f1f5f9; --primary: #0b5fff;\n  }\n  @media (prefers-color-scheme: dark) {\n    :root { --bg: #12141a; --text: #e8eaf0; --card: #1e222b; --primary: #6ea8ff; }\n  }\n  body { margin: 0; padding: 20px; font: 18px system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }\n  .card { background: var(--card); padding: 16px; border-radius: 12px; max-width: 360px; }\n  a { color: var(--primary); }\n\u003C\u002Fstyle>\n\u003Cdiv class='card'>\u003Ch3>Follows the system\u003C\u002Fh3>\u003Cp>Change your OS theme and this card updates.\u003C\u002Fp>\u003Ca href='#'>A themed link\u003C\u002Fa>\u003C\u002Fdiv>\n\u003Cp>\u003Cinput type='text' placeholder='Native input adapts'> \u003Cinput type='checkbox' checked>\u003C\u002Fp>",true,{"id":748,"language":652,"code":749,"is_editable":746},517,"\u003Cstyle>\n  :root { color-scheme: light dark; }\n  body {\n    margin: 0; padding: 20px; font: 18px system-ui, sans-serif; min-height: 100vh;\n    background: light-dark(#ffffff, #12141a);\n    color: light-dark(#1b1b1f, #e8eaf0);\n  }\n  .card {\n    padding: 16px; border-radius: 12px; max-width: 360px;\n    background: light-dark(#f1f5f9, #1e222b);\n    border: 1px solid light-dark(#d0d7de, #2f3542);\n  }\n  a { color: light-dark(#0b5fff, #8ab4ff); }\n  .forced-dark { color-scheme: dark; margin-top: 12px; background: light-dark(#fff, #0b0d12); color: light-dark(#111, #fff); padding: 12px; border-radius: 12px; max-width: 360px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='card'>light-dark() picks the color by scheme. \u003Ca href='#'>Link\u003C\u002Fa>\u003C\u002Fdiv>\n\u003Cdiv class='forced-dark'>This box forces color-scheme: dark\u003C\u002Fdiv>",{"id":751,"language":652,"code":752,"is_editable":746},518,"\u003Cstyle>\n  :root { color-scheme: light dark; }\n  :root[data-theme='light'] { color-scheme: light; }\n  :root[data-theme='dark'] { color-scheme: dark; }\n  body { margin: 0; padding: 20px; font: 18px system-ui, sans-serif; min-height: 100vh; background: light-dark(#fff, #12141a); color: light-dark(#1b1b1f, #e8eaf0); transition: background-color .2s, color .2s; }\n  .bar { display: flex; gap: 8px; margin-bottom: 16px; }\n  button { padding: 8px 14px; border-radius: 8px; border: 1px solid light-dark(#b8c0cc, #3b4252); background: light-dark(#f1f5f9, #1e222b); color: inherit; cursor: pointer; }\n  button[aria-pressed='true'] { outline: 3px solid light-dark(#0b5fff, #8ab4ff); }\n  @media (prefers-reduced-motion: reduce) { body { transition: none; } }\n\u003C\u002Fstyle>\n\u003Cdiv class='bar'>\n  \u003Cbutton data-mode='system'>System\u003C\u002Fbutton>\n  \u003Cbutton data-mode='light'>Light\u003C\u002Fbutton>\n  \u003Cbutton data-mode='dark'>Dark\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n\u003Cp>Current mode: \u003Cstrong id='label'>system\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cscript>\n  var root = document.documentElement;\n  var label = document.getElementById('label');\n  var buttons = document.querySelectorAll('button');\n  function apply(mode) {\n    if (mode === 'system') { root.removeAttribute('data-theme'); } else { root.setAttribute('data-theme', mode); }\n    label.textContent = mode;\n    buttons.forEach(function (b) { b.setAttribute('aria-pressed', b.dataset.mode === mode); });\n    try { localStorage.setItem('theme', mode); } catch (e) {}\n  }\n  var saved = 'system';\n  try { saved = localStorage.getItem('theme') || 'system'; } catch (e) {}\n  apply(saved);\n  buttons.forEach(function (b) { b.addEventListener('click', function () { apply(b.dataset.mode); }); });\n\u003C\u002Fscript>",{"id":754,"language":652,"code":755,"is_editable":746},519,"\u003C!-- Put this small script in the \u003Chead>, before the CSS, to avoid a flash -->\n\u003Cscript>\n  (function () {\n    try {\n      var saved = localStorage.getItem('theme');\n      if (saved === 'light' || saved === 'dark') {\n        document.documentElement.setAttribute('data-theme', saved);\n      }\n    } catch (e) {}\n  })();\n\u003C\u002Fscript>\n\u003Cmeta name='color-scheme' content='light dark'>\n\u003Cmeta name='theme-color' content='#ffffff' media='(prefers-color-scheme: light)'>\n\u003Cmeta name='theme-color' content='#12141a' media='(prefers-color-scheme: dark)'>\n\u003Cstyle>\n  :root { color-scheme: light dark; }\n  :root[data-theme='light'] { color-scheme: light; }\n  :root[data-theme='dark'] { color-scheme: dark; }\n  body { font: 18px system-ui, sans-serif; padding: 16px; background: light-dark(#fff, #12141a); color: light-dark(#1b1b1f, #e8eaf0); }\n\u003C\u002Fstyle>\n\u003Cp>The saved theme is applied before the first paint, so there is no flash.\u003C\u002Fp>",{"id":757,"language":652,"code":758,"is_editable":746},520,"\u003Cstyle>\n  :root { color-scheme: light dark; }\n  body { margin: 0; padding: 20px; font: 18px system-ui, sans-serif; background: light-dark(#eef2f7, #0f1117); color: light-dark(#1b1b1f, #e8eaf0); }\n  .surface-1 { background: light-dark(#ffffff, #171a22); padding: 16px; border-radius: 12px; max-width: 420px; }\n  .surface-2 { background: light-dark(#f4f7fb, #1f232d); padding: 12px; border-radius: 10px; margin-top: 10px; }\n  .btn { --primary: light-dark(#0b5fff, #8ab4ff); background: var(--primary); color: light-dark(#fff, #0b1020); border: 0; padding: 8px 14px; border-radius: 8px; }\n  .tint { background: color-mix(in srgb, var(--primary, #0b5fff) 18%, transparent); padding: 10px; border-radius: 8px; margin-top: 10px; }\n  .photo { display: block; width: 100%; height: 80px; border-radius: 8px; margin-top: 10px; background: linear-gradient(135deg, #ffd166, #ef476f); }\n  @media (prefers-color-scheme: dark) { .photo { filter: brightness(.85); } }\n  input[type=checkbox], input[type=range] { accent-color: light-dark(#0b5fff, #8ab4ff); }\n\u003C\u002Fstyle>\n\u003Cdiv class='surface-1'>Surface 1 (page card)\n  \u003Cdiv class='surface-2'>Surface 2 is lighter in dark mode: elevation by lightness\u003C\u002Fdiv>\n  \u003Cdiv class='tint'>color-mix() tint\u003C\u002Fdiv>\n  \u003Cdiv class='photo'>\u003C\u002Fdiv>\n  \u003Cp>\u003Cbutton class='btn'>Button\u003C\u002Fbutton> \u003Cinput type='checkbox' checked> \u003Cinput type='range'>\u003C\u002Fp>\n\u003C\u002Fdiv>",{"id":760,"language":652,"code":761,"is_editable":746},521,"\u003Cstyle>\n  body { font: 18px system-ui, sans-serif; padding: 16px; }\n  picture img { width: 240px; height: 80px; border: 1px solid #888; border-radius: 8px; display: block; }\n\u003C\u002Fstyle>\n\u003Cp>A different logo file per theme with the picture element:\u003C\u002Fp>\n\u003Cpicture>\n  \u003Csource media='(prefers-color-scheme: dark)' srcset=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='240' height='80'%3E%3Crect width='240' height='80' fill='%2312141a'\u002F%3E%3Ctext x='120' y='48' font-size='28' text-anchor='middle' fill='white' font-family='sans-serif'%3EDark logo%3C\u002Ftext%3E%3C\u002Fsvg%3E\">\n  \u003Cimg alt='Brand logo' src=\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='240' height='80'%3E%3Crect width='240' height='80' fill='white'\u002F%3E%3Ctext x='120' y='48' font-size='28' text-anchor='middle' fill='black' font-family='sans-serif'%3ELight logo%3C\u002Ftext%3E%3C\u002Fsvg%3E\">\n\u003C\u002Fpicture>",{"id":763,"language":764,"code":765,"is_editable":746},522,"javascript","var query = window.matchMedia('(prefers-color-scheme: dark)');\n\nfunction describe() {\n  return query.matches ? 'The system prefers dark.' : 'The system prefers light.';\n}\n\nconsole.log(describe());\n\nquery.addEventListener('change', function () {\n  console.log('System theme changed. ' + describe());\n});\n\nconsole.log('Contrast targets: 4.5:1 for normal text, 3:1 for large text and UI parts.');",[767,774],{"id":768,"title":769,"slug":770,"prompt":771,"starter_code":772,"expected_output":773,"language":652,"order_index":9},189,"Convert a Palette to light-dark()","convert-palette-to-light-dark","Set color-scheme: light dark on :root and rewrite the background, text and card colors with light-dark(). Use a dark gray such as #12141a for the dark background, not pure black.","\u003Cstyle>\n  body { font-family: system-ui, sans-serif; background: #ffffff; color: #1b1b1f; padding: 16px; }\n  .card { background: #f1f5f9; border: 1px solid #d0d7de; padding: 16px; border-radius: 12px; max-width: 340px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='card'>Make me support dark mode.\u003C\u002Fdiv>","The :root has color-scheme: light dark and body and card colors use light-dark(lightValue, darkValue)",{"id":775,"title":776,"slug":777,"prompt":778,"starter_code":779,"expected_output":780,"language":652,"order_index":23},190,"Build a System, Light and Dark Toggle","build-system-light-dark-toggle","Add three buttons (System, Light, Dark). System removes the data-theme attribute. Light and Dark set data-theme on the html element. Use color-scheme in CSS so light-dark() follows the choice, and save the selection in localStorage inside a try and catch block.","\u003Cstyle>\n  :root { color-scheme: light dark; }\n  body { font-family: system-ui, sans-serif; padding: 16px; background: light-dark(#fff, #12141a); color: light-dark(#1b1b1f, #e8eaf0); }\n\u003C\u002Fstyle>\n\u003Cbutton>System\u003C\u002Fbutton> \u003Cbutton>Light\u003C\u002Fbutton> \u003Cbutton>Dark\u003C\u002Fbutton>\n\u003Cp>Toggle the theme.\u003C\u002Fp>","CSS rules for :root[data-theme='light'] and :root[data-theme='dark'] that set color-scheme, plus a script that sets or removes data-theme and stores the mode","2026-09-30T18:26:43+00:00",{"id":575,"slug":577,"title":576},{"id":583,"slug":585,"title":584}]