✨ HTML & CSS Tips Part 01

light and dark mode si automatically ah 🌔

waxaad html and css ku samayn kartaa dark and light automatically ah oo isla badalaya system-ka sida uu yahay

Maxaan ka wadanaa system-ka sida uu yahay ? 🤔

waxaan ka wadnaa hadii computer-ka ama mabile-ka laga soo galay websiite-kaaga uu yahay dark mode waxa uu website-kaagu u shaqaynayaa si dark mode hadii uu lighat mode yahayna waxa uu u shaqaynayaa website-kaagu isla sidaas waxaan markaa qaadan doonaa sidee arinkan loo sameeyaa anoo adeegsanaya kaliya html iyo css ! cajiib sow maaha 😯

✍️ Bar Bilaw

si aad u bilawdo samaynta hawshan waxaan u baahantahay inaad fahan buuxa ka haysato Media Queries iyo adeegsiga css variables

waa maxay Media Queries🤔 ?

Media Queries waa sharci ka tirsan css oo kuu ogolaanaya inaad code css ah la adeegsado adoo shardi ku xidhaya xiliga la adeegsanayo waxaanad ku soo aragtay ayaa laga yabaa markaad samaynayso responsive design waxaad soo adeegsatay ayaa suura gal sidan oo kale

div.cards_rep {
  flex-flow: wrap row;
}

imika sida kuu muuqata css-kaas sare div-ka haysta class-kan cards_rep waxa uu u tartiibinayaa items-ka gudihiisa ku jira qaab ay is dhinac imanayaa laakiin hadii tusaale ahaan ahaan shaashadu yaraato ma wada qaadayso maxaa xal ah xalka waxa weeyaan inaad adeegsato Media Queries si aan shardi ugu xidhi xiliga items-ka div-kaas ku dhex jiraa ay is dul imaanayaan ee anay is dhinac imaanayn sidan hoose oo kale

@media only screen and (max-width: 400px) {
  div.cards_rep {
    flex-flow: wrap column;
  }
}

hada adoo adeegsanaya Media Queries ayaad waxaa shardi ku xidhay xiliga laga dhigayo items-ka div-ka ku jira inay is dul yimaadaan hada sidaas oo kale ayaan waxaan Media Queries ugu adeegsan doonaa xiliga lighat mode la adeegsanayo ama dark mode la adeegsanayo inagoo adeegsanaya isla Media Queries.

Media Queries waxay leedahay features badan oo kala duwan oo la yidhaa media features aadbay u badan yihiiin hadii aad faah faahin doonayso halkan ka akhriso 👉 media features

Css Variables

Css Variables waa hab aad u kaydin karto

• colors-ka 🌈
• size-ka 📏
• paddings 🔳
• margins 🧊

iyo waxyaabo kale oo badan si aad meel walba oo css-kaaga ah ugu adeegsato adoo mustaqbalka hadaad u baahato inaad badashao Hal meel ka wada badali karra

waxaana loo adeegsadaa gudaha :root oo ah CSS pseudo-class ku wada dhacay dhamaan elements-ka waxaana loo adeegsadaa qaabkan oo kale

:root {
  --bg: #0f172a;
 {

hada sida muuqata --bg waa variable aad u adeegsan karto meeshaad doonto adoo samaynaya sidan oo kale var(--bg)

hadaba waxaan samayn doonaa dark and lighat la shaqaynaya system-ka inagoo adeegsan doona sadexdaa arimeed ee aan waxoogaa ka soo tilmaanay ee ah Media Queries , :root & Css Variables

Sidee Loo Samaynayaa Automatic Dark & Light Mode with HTML/CSS 🤔 ?

si aan uu samayno waxaan adeegsan doonaa waxyaabahii aan soo sheegnay ee kala ahaa kuwan hoose

✅ Talaabada 1aad

waxaad u baahan tahay inaad qeexdo variables-ka oo aad ku kaydiso colors-ka light-ka iyo colors-ka dark-ga labadaba adoo adeegsanaya laba :root oo kala duwan mid waxad ku dhex qeexaysaa variables-ka colors-ka light-ka midka kalana variables-ka colors-ka dark-ga

Tusaale ahaan aad ku kaydin doonto midabka background-ka #fff => cadaan iyo #000 => madaw

FG WAA IN MAGACYADA VARIABLES-KA AAD SIINAYSAA ISKU MID NOQDAAN LABADA ROOT-BA LAAKIIN WAXAA LAGU KALA DUWANAYANAYAA VALUE-GA OO TRUSAALE AHAAN --bg: #000000 HALKA ROOT-KA KALE SIDAN UU NOQONAYA --bg: #FFFFFF

waxaanad u samynaysaa Labada root sidan hoose

root 1 dark color 🌑

:root {
  --bg: #000;
}

root 2 light color 🌕

:root {
  --bg: #fff;
}

✅ Talaabada labaad

waxaad samaysanaa @media waxaanad ka dhigaysaa mid la shaqaynaysa feature-kan la yidhaa prefers-color-scheme adoo dooranaya mid kamida labadan

• light 🤍
• dark 🖤

sidan hoose

@media (prefers-color-scheme: light) {
}

ama

@media (prefers-color-scheme: dark) {
}

✅ Talaabada 3aad

hadii aad sidan u samaysay

@media (prefers-color-scheme: light) {
}

oo aad prefers-color-scheme-ka aad ka dhigtay mid ah light waxaad soo qaadaysaa root-ka variabls-kiisu yihiin light color ee 2aad kadib waxaad ku dhex dhigaysaa gudaha media sidan hoose oo kale

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fff;
  }
}

Taas macnaheedu waa hadii system-ka uu yahay light adeegso midabada lighta-ka ee root-ka
hadii kalana kuwa root-ka labaad ee ah dark ee banaanka ayaa la adeegsanayaa

✅ Talaabada 4aad

si aad u aragto natiijada sii body-ga backgroud-color adoo adeegsanaya variable-kiii aad soo qeexday sidan hoose oo kale

body {
  background-color: var(--bg);
}

sidaas ayaad toos uga arki kartaa sida uu u shaqaynayo page-kaaga html adoo system-kaaga ka dhigaya light marna dark

dark system

light system

sidas ayaad ku samaysa hadi u baahato inaad tijaabisana code-ka css oo dhan waa kan hoose

:root {
  --bg: #000;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
  }
}

body {
  background-color: var(--bg);
}