[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"changelog-\u002Fchangelog\u002Fthank-you-page-css-variables":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"meta":10,"image":22,"head":26,"body":45,"_type":468,"_id":469,"_source":470,"_file":471,"_stem":472,"_extension":473},"\u002Fchangelog\u002Fthank-you-page-css-variables","changelog",false,"","Thank-You Page CSS Variables · Waitlister Changelog","Full color customization for thank-you pages using CSS variables. Override every color without complex selectors.",{"id":11,"title":12,"description":13,"date":14,"createdAt":15,"type":16,"category":17,"order":18,"isPublic":19,"thumbnailImage":20,"images":21},"cl-027","Thank-You Page CSS Variables","Full color customization for thank-you pages using CSS variables. Override every color — cards, icons, buttons, share buttons, and text — without !important or complex selectors.","2026-04-09",1775637546270,"improvement","engagement",27,true,"https:\u002F\u002Ffirebasestorage.googleapis.com\u002Fv0\u002Fb\u002Fwaitinglist-app-c24fc.appspot.com\u002Fo\u002Fresources%2Ffeatures%2Ffeature-thank-you-page-css-variables.webp?alt=media",[],{"src":20,"width":23,"height":24,"alt":25},400,300,"Waitlister Changelog - Thank-You Page CSS Variables",{"meta":27,"og":40,"twitter":42},[28,31,34,37],{"name":29,"content":30},"keywords","thank you page, custom css, css variables, color customization, brand colors, dark mode, theming, white label",{"name":32,"content":33},"robots","index, follow",{"name":35,"content":36},"author","Waitlister",{"name":38,"content":39},"copyright","© 2026 Waitlister",{"title":8,"description":9,"type":41,"image":20},"article",{"card":43,"title":44,"description":9,"image":20},"summary_large_image","New: Thank-You Page CSS Variables",{"type":46,"children":47,"toc":456},"root",[48,65,72,83,96,171,180,193,205,214,226,235,263,269,436,442],{"type":49,"tag":50,"props":51,"children":52},"element","p",{},[53,56,63],{"type":54,"value":55},"text","The thank-you page now supports CSS variables for full color customization. Override any color on the page by setting a single variable — no ",{"type":49,"tag":57,"props":58,"children":60},"code",{"className":59},[],[61],{"type":54,"value":62},"!important",{"type":54,"value":64}," or complex selectors needed.",{"type":49,"tag":66,"props":67,"children":69},"h2",{"id":68},"whats-new",[70],{"type":54,"value":71},"What's New",{"type":49,"tag":73,"props":74,"children":76},"h3",{"id":75},"_50-css-variables",[77],{"type":49,"tag":78,"props":79,"children":80},"strong",{},[81],{"type":54,"value":82},"50+ CSS Variables",{"type":49,"tag":50,"props":84,"children":85},{},[86,88,94],{"type":54,"value":87},"Every color on the thank-you page is now controlled by a ",{"type":49,"tag":57,"props":89,"children":91},{"className":90},[],[92],{"type":54,"value":93},"--ty-*",{"type":54,"value":95}," CSS variable with sensible defaults.",{"type":49,"tag":97,"props":98,"children":99},"ul",{},[100,111,121,131,141,151,161],{"type":49,"tag":101,"props":102,"children":103},"li",{},[104,109],{"type":49,"tag":78,"props":105,"children":106},{},[107],{"type":54,"value":108},"Card & text",{"type":54,"value":110}," - Background, borders, primary\u002Fsecondary\u002Fmuted text colors",{"type":49,"tag":101,"props":112,"children":113},{},[114,119],{"type":49,"tag":78,"props":115,"children":116},{},[117],{"type":54,"value":118},"Section icons",{"type":54,"value":120}," - Referral, social tasks, leaderboard, and social links icons",{"type":49,"tag":101,"props":122,"children":123},{},[124,129],{"type":49,"tag":78,"props":125,"children":126},{},[127],{"type":54,"value":128},"Share buttons",{"type":54,"value":130}," - Individual colors for X, Facebook, Instagram, Threads, LinkedIn, WhatsApp, Telegram, and Email",{"type":49,"tag":101,"props":132,"children":133},{},[134,139],{"type":49,"tag":78,"props":135,"children":136},{},[137],{"type":54,"value":138},"Platform icons",{"type":54,"value":140}," - Social task and social link icon colors per platform",{"type":49,"tag":101,"props":142,"children":143},{},[144,149],{"type":49,"tag":78,"props":145,"children":146},{},[147],{"type":54,"value":148},"Points & badges",{"type":54,"value":150}," - Badge backgrounds, point colors, completed task states",{"type":49,"tag":101,"props":152,"children":153},{},[154,159],{"type":49,"tag":78,"props":155,"children":156},{},[157],{"type":54,"value":158},"Return button",{"type":54,"value":160}," - Background and text color",{"type":49,"tag":101,"props":162,"children":163},{},[164,169],{"type":49,"tag":78,"props":165,"children":166},{},[167],{"type":54,"value":168},"Leaderboard",{"type":54,"value":170}," - Inherits the same variables for a consistent look",{"type":49,"tag":73,"props":172,"children":174},{"id":173},"simple-to-use",[175],{"type":49,"tag":78,"props":176,"children":177},{},[178],{"type":54,"value":179},"Simple to Use",{"type":49,"tag":50,"props":181,"children":182},{},[183,185,191],{"type":54,"value":184},"Set variables on ",{"type":49,"tag":57,"props":186,"children":188},{"className":187},[],[189],{"type":54,"value":190},".waitlist-thank-you-page",{"type":54,"value":192}," in the Custom CSS editor:",{"type":49,"tag":194,"props":195,"children":200},"pre",{"className":196,"code":198,"language":199,"meta":7},[197],"language-css",".waitlist-thank-you-page {\n  --ty-card-bg: #1a1a1a;\n  --ty-card-border: #333333;\n  --ty-text-color: #e0e0e0;\n  --ty-button-bg: #e0e0e0;\n  --ty-button-text: #0f0f0f;\n  --ty-highlight-bg: #2a2a2a;\n  --ty-section-header-bg: #222222;\n}\n","css",[201],{"type":49,"tag":57,"props":202,"children":203},{"__ignoreMap":7},[204],{"type":54,"value":198},{"type":49,"tag":73,"props":206,"children":208},{"id":207},"built-in-reference",[209],{"type":49,"tag":78,"props":210,"children":211},{},[212],{"type":54,"value":213},"Built-In Reference",{"type":49,"tag":50,"props":215,"children":216},{},[217,219,224],{"type":54,"value":218},"Click ",{"type":49,"tag":78,"props":220,"children":221},{},[222],{"type":54,"value":223},"\"Available CSS variables\"",{"type":54,"value":225}," in the Custom CSS editor to see the full list with default values — no need to check documentation.",{"type":49,"tag":73,"props":227,"children":229},{"id":228},"backward-compatible",[230],{"type":49,"tag":78,"props":231,"children":232},{},[233],{"type":54,"value":234},"Backward Compatible",{"type":49,"tag":50,"props":236,"children":237},{},[238,240,246,248,254,255,261],{"type":54,"value":239},"Existing Custom CSS continues to work. The original Tailwind classes remain on all elements, so any CSS targeting ",{"type":49,"tag":57,"props":241,"children":243},{"className":242},[],[244],{"type":54,"value":245},".bg-violet-100",{"type":54,"value":247},", ",{"type":49,"tag":57,"props":249,"children":251},{"className":250},[],[252],{"type":54,"value":253},".button-main",{"type":54,"value":247},{"type":49,"tag":57,"props":256,"children":258},{"className":257},[],[259],{"type":54,"value":260},".bg-gray-50",{"type":54,"value":262},", etc. still applies as before.",{"type":49,"tag":66,"props":264,"children":266},{"id":265},"use-cases",[267],{"type":54,"value":268},"Use Cases",{"type":49,"tag":270,"props":271,"children":272},"table",{},[273,292],{"type":49,"tag":274,"props":275,"children":276},"thead",{},[277],{"type":49,"tag":278,"props":279,"children":280},"tr",{},[281,287],{"type":49,"tag":282,"props":283,"children":284},"th",{},[285],{"type":54,"value":286},"Goal",{"type":49,"tag":282,"props":288,"children":289},{},[290],{"type":54,"value":291},"Variables to Set",{"type":49,"tag":293,"props":294,"children":295},"tbody",{},[296,338,372,401],{"type":49,"tag":278,"props":297,"children":298},{},[299,308],{"type":49,"tag":300,"props":301,"children":302},"td",{},[303],{"type":49,"tag":78,"props":304,"children":305},{},[306],{"type":54,"value":307},"Dark mode",{"type":49,"tag":300,"props":309,"children":310},{},[311,317,318,324,325,331,332],{"type":49,"tag":57,"props":312,"children":314},{"className":313},[],[315],{"type":54,"value":316},"--ty-card-bg",{"type":54,"value":247},{"type":49,"tag":57,"props":319,"children":321},{"className":320},[],[322],{"type":54,"value":323},"--ty-text-color",{"type":54,"value":247},{"type":49,"tag":57,"props":326,"children":328},{"className":327},[],[329],{"type":54,"value":330},"--ty-section-header-bg",{"type":54,"value":247},{"type":49,"tag":57,"props":333,"children":335},{"className":334},[],[336],{"type":54,"value":337},"--ty-section-border",{"type":49,"tag":278,"props":339,"children":340},{},[341,349],{"type":49,"tag":300,"props":342,"children":343},{},[344],{"type":49,"tag":78,"props":345,"children":346},{},[347],{"type":54,"value":348},"Match brand colors",{"type":49,"tag":300,"props":350,"children":351},{},[352,358,359,365,366],{"type":49,"tag":57,"props":353,"children":355},{"className":354},[],[356],{"type":54,"value":357},"--ty-highlight-bg",{"type":54,"value":247},{"type":49,"tag":57,"props":360,"children":362},{"className":361},[],[363],{"type":54,"value":364},"--ty-button-bg",{"type":54,"value":247},{"type":49,"tag":57,"props":367,"children":369},{"className":368},[],[370],{"type":54,"value":371},"--ty-referral-icon-bg",{"type":49,"tag":278,"props":373,"children":374},{},[375,383],{"type":49,"tag":300,"props":376,"children":377},{},[378],{"type":49,"tag":78,"props":379,"children":380},{},[381],{"type":54,"value":382},"Monochrome share buttons",{"type":49,"tag":300,"props":384,"children":385},{},[386,392,393,399],{"type":49,"tag":57,"props":387,"children":389},{"className":388},[],[390],{"type":54,"value":391},"--ty-share-x-bg",{"type":54,"value":247},{"type":49,"tag":57,"props":394,"children":396},{"className":395},[],[397],{"type":54,"value":398},"--ty-share-facebook-bg",{"type":54,"value":400},", etc. all to same color",{"type":49,"tag":278,"props":402,"children":403},{},[404,412],{"type":49,"tag":300,"props":405,"children":406},{},[407],{"type":49,"tag":78,"props":408,"children":409},{},[410],{"type":54,"value":411},"Neutral icons",{"type":49,"tag":300,"props":413,"children":414},{},[415,420,421,427,428,434],{"type":49,"tag":57,"props":416,"children":418},{"className":417},[],[419],{"type":54,"value":371},{"type":54,"value":247},{"type":49,"tag":57,"props":422,"children":424},{"className":423},[],[425],{"type":54,"value":426},"--ty-social-icon-bg",{"type":54,"value":247},{"type":49,"tag":57,"props":429,"children":431},{"className":430},[],[432],{"type":54,"value":433},"--ty-leaderboard-icon-bg",{"type":54,"value":435}," all to same gray",{"type":49,"tag":66,"props":437,"children":439},{"id":438},"documentation",[440],{"type":54,"value":441},"Documentation",{"type":49,"tag":50,"props":443,"children":444},{},[445,447,454],{"type":54,"value":446},"See the full variable list and examples in the ",{"type":49,"tag":448,"props":449,"children":451},"a",{"href":450},"\u002Fdocs\u002Fthank-you-page#custom-css",[452],{"type":54,"value":453},"Thank-You Page documentation",{"type":54,"value":455},".",{"title":7,"searchDepth":457,"depth":457,"links":458},3,[459,466,467],{"id":68,"depth":460,"text":71,"children":461},2,[462,463,464,465],{"id":75,"depth":457,"text":82},{"id":173,"depth":457,"text":179},{"id":207,"depth":457,"text":213},{"id":228,"depth":457,"text":234},{"id":265,"depth":460,"text":268},{"id":438,"depth":460,"text":441},"markdown","content:changelog:thank-you-page-css-variables.md","content","changelog\u002Fthank-you-page-css-variables.md","changelog\u002Fthank-you-page-css-variables","md"]