Sida Loogu Daro Dark Mode Website-kaaga ama App-kaaga (Iyadoon Flash-ka Laga Dhiganin)

Si aad dark mode ugu darto, qeex midabkaaga sida tokens magacyo leh (background, text, surface, border, accent) halkii qiimayaal lagu qori lahaa, mid kasta u sii qiime cad iyo qiime madow, kadibna ku beddel iyaga adigoo isticmaalaya astaamaha CSS ee prefers-color-scheme si website-ku u raaco dejinta nidaamka booqdaha. Haddii aad rabto sidoo kale toggle gacmeed, kaydi doorashada browser-ka oo ku dheji iyada script yar oo inline ah head-ka bogga si aanan u jirin flash cad markii la soo rogo. Kadibna hubi contrast-ka, sawirrada iyo chart-yada labada mawduuc. AI app builder, hal prompt cad ayaa intooda badan sameysa; hubinta ayaa tayada keenta.

Laba hab

App-yada badankood waxay ku guuleystaan habka labaad: ixtiraam nidaamka default ahaan, oo u oggolow dadka inay ka soo horeeyaan.

Ku bilow tokens-ka midabka

Dark mode waa adag yahay marka midabyada lagu kala firdhiyo code-ka sida white, #333 iyo gray-100. Waa fudud yahay marka midab kasta uu ka yimaado liis yar oo tokens magacyo leh.

Qaybo kasta waxay isticmaalaan magacyada tokens-ka. Markaa beddelidda mawduucyada waxay ahaan doontaa beddelidda hal qaybo qiimayaal, ee ma aha wax kasta oo component kasta laga beddelo.

Talooyin palette-ka dark-ka:

• Ka fogow madow saafi iyo cad saafi meelaha waaweyn; boodhadh aad u madow iyo cad laga reebay cadnaanta buuxda way fudud yihiin in la akhriyo.
• Muuji qoto dheerida flat-yo iftiimaya, ee ha isticmaalin hooska — hooska ma muuqdo dhab ahaan background-ka madow.
• Ka yaree midabka brand-ka ee iftiinka badan iyo wax yar; wuxuu ku ifayaa si aan raaxo lahayn background-ka madow.
• Ku hay contrast-ka oo la akhriyi karo. Heerka AA ee WCAG wuxuu codsanayaa ugu yaraan 4.5:1 contrast qoraalka caadiga ah. Qoraalka boodhadh ee muted badanaa ku guuldarreysta tan mawduucyada dark-ka.

Tailwind CSS

Tailwind waa qalabka qaabaynta caadiga ah app-yada badan ee AI lagu dhisay. Sida ku xusan docs-ka dark mode ee Tailwind, dark: variant-ku wuxuu default ahaan isticmaalaa prefers-color-scheme, sidaas darteed classes sida bg-white dark:bg-gray-900 waxay raacaan dejinta nidaamka iyada oo aan shaqo dheeraad ah lahayn.

Toggle gacmeed oo Tailwind v4 ah, docs-ku wuxuu muujinayaa in variant-ka loo beddelo class ku jira element waalid:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

Kadibna app-ku wuxuu ku daraa ama ka saaraa class-ka dark element-ka root. Docs-ku wuxuu sidoo kale soo jeedinayaa script inline ah oo head-ka ku jira kaas oo dejiya doorashada la kaydiyay (ama dejinta nidaamka) ka hor inta bogga aan la sawirin — taas oo ah sida saxda ah ee loo ka fogaado flash-ka.

Ka fogaanshaha flash-ka cad

Flash-ku wuxuu dhacaa sababtoo ah bogga wuxuu sawirmaa mawduuca iftiinka, ka dib JavaScript wuu soo rogaa, akhrisaa doorashada la kaydiyay, kadibna wuxuu u beddelaa dark. Xalka:

1. Ku shub script yar oo inline ah head-ka bogga kaas oo akhrisa mawduuca la kaydiyay oo dejiya class-ka element-ka root ka hor inta wax aan la muujin.
2. Dejiso color-scheme CSS property mid kasta mawduuc si qaybaha ay browser-ku sawiro (scrollbars, form controls) ay isku mid noqdaan.
3. Sii bogga background midab cad labada mawduuc.
4. Haddii app-ku server-ka ku sawirmo, hubi in server-ka iyo browser-ku ku heshiiyaan mawduuca bilowga, haddii kale bogga ayaa dib u sawiri kara oo ifaya.

Tusaalooyinka prompts

Dejin buuxda:

Ku dar dark mode. Marka hore ku beddel midabyada hard-coded ah tokens-ka mawduucyada (background, surface, text, muted text, border, accent) oo leh qiimayaal light iyo dark. Default ahaan raac dejinta nidaamka booqdaha. Ku dar switch-ka mawduuca header-ka oo leh doorashooyinka Light, Dark iyo System, xasuuso doorashada localStorage, oo ku dabbaq script inline head-ka si aysan u jirin flash cad markii la soo rogo. Dejiso color-scheme mawduuc kasta. Ilaali naqshadda light ee hadda jirta sida ay tahay.

Saxida wixii hadhay:

Hubi bog kasta mawduuca dark-ka oo hagaaji: qoraalka contrast-ka hooseeya (ku dadaal ugu yaraan 4.5:1), background cad oo hard-coded ah, xuddunta oo baabba'da, chart-yada qoraal madow oo ku yaal background madow, iyo logos-ka oo kaga baxa. Ha beddelin mawduuca light.

Sawirrada iyo chart-yada:

Isticmaal nooca light ee logo-ga mawduuca dark. Ka dhig chart axes, gridlines iyo labels inay isticmaalaan theme tokens. Siiso screenshots-ka xuddun yar mawduuca dark si aanay ugu wada milin background-ka.

Tallaabo tallaabo

1. Hubi midabyada. Hel midabyada hard-coded ah oo ku beddel tokens. Tani waa inta badan shaqada.
2. Qeex qiimayaasha dark tokens kasta.
3. Raac nidaamka prefers-color-scheme (ama dark: default-ka Tailwind).
4. Ku dar toggle haddii aad rabto: Light, Dark, System. Kaydi doorashada browser-ka; app-yada login-ka leh waxaad sidoo kale ku kaydin kartaa profile-ka isticmaalaha.
5. Ka hortag flash-ka script-ka inline ee head-ka iyo color-scheme.
6. Hubi qaybaha adag: logos, icons, sawirro leh background cad, charts, code blocks, khariidado, embeds, emails.
7. Tijaabi labada mawduuc desktop-ka iyo telefoonka, iyada oo nidaamka la dejiyay light iyo dark, iyo markii la sifeeyo bogga (hard refresh) kadib.

Khaladaadka caadiga ah

• Wax kasta oo la rogo. Filter-ka midabka rogaya wuxuu burburiyaa sawirrada iyo midabyada brand-ka.
• Midabyo hard-coded ah oo la waayay. Kaarka cad oo ku jira bog madow ayaa si degdeg ah u muuqda.
• Qoraal boodhadh contrast yar leh. Qurux badan oo laakiin akhrinta ma fudayso.
• Flash cad markii la soo rogo. Gaar ahaan telefoonada habeenka ayaa lagu arka.
• Iska illoobid embeds saddexaad. Khariidadaha, fiidiyowyada iyo widgets-ka waxaa laga yaabaa inay iftiin ahaadaan; hubi haddii ay leeyihiin doorasho dark ah.
• Toggle leh laba xaalad oo keliya. Markii qof riixo, uma soo noqon karo raacidda nidaamka.
• Naqshadda light oo burburaysa. Ku sheeg si cad prompt-kaaga in naqshadda light ay sidii hore u sii jirto.

Liiska hubinta

• Dhammaan midabyada waxay ka imanayaan theme tokens
• Waxay raacaan dejinta nidaamka default ahaan
• Toggle gacmeed oo leh Light, Dark iyo System, oo la xasuusto
• Ma jiro flash cad markii la soo rogo ama dib loo soo rogo
• color-scheme waa la dejiyay si form controls iyo scrollbars ay isku mid noqdaan
• Contrast-ka qoraalka ugu yaraan 4.5:1 labada mawduuc
• Logos, sawirro, charts iyo embeds waa la hubiyay mawduuca dark
• Mawduuca light waa isbeddelin
• Waa la tijaabiyay desktop iyo telefoon

Dark mode Mythex

App-yada lagu dhisay Mythex waxay isticmaalaan Vite, React, TypeScript iyo Tailwind default ahaan, sidaas darteed habka Tailwind ee kor ku xusan si toos ah ayuu u shaqeeyaa: ku dheji prompt-ka dejinta buuxda chat-ka, kadibna hubi Preview labada mawduuc iyo cabbirka telefoonka. Talada naqshadeynta Mythex waa in la magacaabo waxa la beddelayo iyo waxa la ilaalinayo, taasoo halkan muhiim tahay — sheeg in mawduuca light uu sidii hore u sii jiri doono. Eeg Design & UI prompts, oo haddii habka qaladdo dib ugu noqo checkpoint.

Si aad u heshid macluumaad dheeraad ah oo ku saabsan sida looga helo muuqaalka saxda ah, eeg sida loo naqshadeeyo app qurux badan AI-ga iyo sida loo qoro prompts-ka AI app builders-ka.

Su'aalaha