M

MLOG

Lietuvių

Atraskite CSS medijos užklausų ir individualių savybių galią kuriant automatines šviesias ir tamsias temas, kurios prisitaiko prie vartotojo nustatymų, gerindamos prieinamumą ir vizualinį patrauklumą globaliai auditorijai.

CSS šviesios-tamsios temos funkcija: automatinis temos pritaikymas globaliam internetui

Šiandieniniame globaliai susijusiame pasaulyje interneto svetainės turi būti prieinamos ir vizualiai patrauklios įvairių sričių ir pomėgių vartotojams. Vienas efektyviausių būdų tai pasiekti yra automatinis temos pritaikymas, konkrečiai siūlant tiek šviesią, tiek tamsią temas, kurios prisitaiko prie vartotojo sistemos nustatymų. Šis tinklaraščio įrašas padės jums įdiegti šią funkciją naudojant CSS medijos užklausas ir individualias savybes, užtikrinant sklandų ir patogų naršymą jūsų tarptautinei auditorijai.

Kodėl verta įdiegti automatines šviesią ir tamsią temas?

Yra keletas svarbių priežasčių, kodėl verta įtraukti automatinį temos pritaikymą į savo interneto projektus:

Kaip įdiegti automatinį temos pritaikymą naudojant CSS

Automatinio temos pritaikymo pagrindas yra prefers-color-scheme medijos užklausa. Ši CSS medijos užklausa leidžia nustatyti vartotojo pageidaujamą spalvų schemą (šviesią ar tamsią) ir pritaikyti atitinkamus stilius.

1 žingsnis: Apibrėžkite individualias savybes (CSS kintamuosius)

Pradėkite nuo individualių savybių (CSS kintamųjų) apibrėžimo, kad išsaugotumėte savo šviesios ir tamsios temos spalvų reikšmes. Tai palengvina perjungimą tarp temų tiesiog atnaujinant kintamųjų reikšmes.


:root {
  --background-color: #ffffff; /* Šviesios temos fonas */
  --text-color: #000000; /* Šviesios temos tekstas */
  --link-color: #007bff; /* Šviesios temos nuoroda */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Tamsios temos fonas */
    --text-color: #ffffff; /* Tamsios temos tekstas */
    --link-color: #66b3ff; /* Tamsios temos nuoroda */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

Šiame pavyzdyje mes apibrėžiame kintamuosius fono spalvai, teksto spalvai, nuorodos spalvai ir mygtukų spalvoms. :root selektorius taiko šiuos kintamuosius visam dokumentui. Tada @media (prefers-color-scheme: dark) medijos užklausa perrašo šiuos kintamuosius tamsios temos reikšmėmis, kai vartotojas yra nustatęs savo sistemą į tamsųjį režimą.

2 žingsnis: Pritaikykite individualias savybes savo stiliams

Toliau pritaikykite šias individualias savybes savo CSS stiliams, kad valdytumėte savo svetainės elementų išvaizdą.


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Sklandus perėjimas */
}

a {
  color: var(--link-color);
}

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

Čia mes naudojame var() funkciją, kad pasiektume savo individualių savybių reikšmes. Taip pat pridėjome transition savybę prie body elemento, kad sukurtume sklandų perėjimą tarp temų.

3 žingsnis: Testavimas ir tobulinimas

Kruopščiai išbandykite savo įgyvendinimą įvairiose naršyklėse ir operacinėse sistemose. Šiuolaikinės naršyklės, tokios kaip „Chrome“, „Firefox“, „Safari“ ir „Edge“, visiškai palaiko prefers-color-scheme medijos užklausą. Galite perjungti tarp šviesaus ir tamsaus režimo savo operacinės sistemos nustatymuose, kad pamatytumėte pakeitimus savo svetainėje.

Pažangesnės technikos ir aspektai

Rankinio temos perjungiklio suteikimas

Nors automatinis temos pritaikymas yra puikus pradžios taškas, kai kurie vartotojai gali norėti rankiniu būdu perrašyti savo sistemos nustatymus. Galite pateikti rankinį temos perjungiklį naudodami „JavaScript“ ir „local storage“.

HTML:


<button id="theme-toggle">Perjungti temą</button>

JavaScript:


const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // Pagal nutylėjimą - automatinis

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// Taikyti pradinę temą įkeliant puslapį
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  // Jei nustatyta automatiškai, leisti nuspręsti prefers-color-scheme
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS: Pridėkite šį CSS kartu su ankstesniu CSS. Atkreipkite dėmesį į rankinį perrašymą:


body.light-theme {
  --background-color: #ffffff; /* Šviesios temos fonas */
  --text-color: #000000; /* Šviesios temos tekstas */
  --link-color: #007bff; /* Šviesios temos nuoroda */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Tamsios temos fonas */
  --text-color: #ffffff; /* Tamsios temos tekstas */
  --link-color: #66b3ff; /* Tamsios temos nuoroda */
  --button-background-color: #333;
  --button-text-color: #fff;
}

Šis kodo fragmentas prideda mygtuką, leidžiantį vartotojams perjungti tarp šviesios, tamsios ir automatinės temos. Pasirinkta tema yra saugoma „local storage“, todėl ji išlieka po puslapio perkrovimų.

Paveikslėlių ir SVG tvarkymas

Kai kurie paveikslėliai ir SVG gali atrodyti nepatraukliai tiek šviesioje, tiek tamsioje temoje. Galite naudoti CSS medijos užklausas, kad sąlygiškai rodytumėte skirtingas šių išteklių versijas.


img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

Šis kodo fragmentas rodo vieną paveikslėlį (su klase light-mode) šviesiame režime ir kitą paveikslėlį (su klase dark-mode) tamsiame režime.

Spalvų paletės aspektai tarptautinei auditorijai

Renkantis spalvų paletes savo šviesiai ir tamsiai temoms, atsižvelkite į kultūrines asociacijas ir prieinamumo aspektus. Štai keletas bendrų gairių:

Našumo aspektai

Nors automatinio temos pritaikymo įgyvendinimas yra gana paprastas, svarbu atsižvelgti į galimą poveikį našumui. Venkite naudoti pernelyg sudėtingus CSS selektorius ar animacijas, kurios gali sulėtinti atvaizdavimą. Taip pat užtikrinkite, kad jūsų individualios savybės būtų apibrėžtos efektyviai, kad sumažintumėte kintamųjų paieškos pridėtines išlaidas.

Štai keletas geriausių praktikų našumui optimizuoti:

Prieinamumo geriausios praktikos

Užtikrinkite, kad jūsų šviesios ir tamsios temos atitiktų prieinamumo gaires, tokias kaip WCAG (Interneto turinio prieinamumo gairės). Tai apima pakankamo spalvų kontrasto užtikrinimą, semantinio HTML naudojimą ir visų interaktyvių elementų prieinamumą klaviatūra.

Štai keletas konkrečių prieinamumo geriausių praktikų, kurių reikėtų laikytis:

Pavyzdžiai skirtinguose regionuose

Apsvarstykite šiuos pavyzdžius, kaip šviesios ir tamsios temos gali būti pritaikytos įvairioms pasaulio auditorijoms:

Išvada

Automatinių šviesių ir tamsių temų įdiegimas yra esminis žingsnis siekiant sukurti prieinamesnę ir patogesnę interneto patirtį pasaulinei auditorijai. Naudodami CSS medijos užklausas ir individualias savybes, galite lengvai pritaikyti savo svetainės išvaizdą prie vartotojo pageidavimų, sumažinti akių nuovargį ir pagerinti prieinamumą vartotojams su regėjimo sutrikimais. Nepamirškite atsižvelgti į kultūrines asociacijas, prieinamumo gaires ir našumo aspektus, kad užtikrintumėte sklandų ir įtraukų naršymo patirtį visiems.

Taikydami šias technikas, jūs parodote atsidavimą šiuolaikinio interneto dizaino principams ir tenkinate įvairius savo tarptautinės auditorijos poreikius, paversdami savo svetainę svetinga ir patogia erdve visiems.

CSS šviesios-tamsios temos funkcija: automatinis temos pritaikymas globaliam internetui | MLOG