? ??? ??

CSS ??? ?? ?? ?? : CSS ?? ?? ??? ?? ??? ???? ???? ?? ? ? ???? ??? ?? ???? ??? ? ? ????. ?? ??, ??, ?? ? ????? ?? ??? ????? ? ?? ????? ?? ?? ?? ? ???? ??????. ??? ??? ???? ??? ????? ??? ??? ???? ???? ?? ???? ? ?? ??? ???????.

CSS ??? ?? ? ?? : ??? ????? ??? ???? ? ??? CSS ??? ?? ??, ?? ? ??? ? ???? ?? ???? ?? ? ??? ???? ?????. ??? ?? ??? ? ????? ???? ? ??? ????? ??? ?? ?? ?? ?? ??? ??? ?? ??? ??? ?? ??? ?? ?? ?? ?? ??? ???? ??? ????? ?? ????? ? ????.

?? ?? ? ?? ? ?? : ??? ??? ??? ?? ? ?? ?? ??? ??? ???? CSS ??? ?? ??? ??, ?? ? ???? ??? ?????. ??? ?? ? JavaScript? ?? CSS ??? ???? ???? ?? React, Angular ? VUE? ?? ?? ?? ?? ??? ?? ??? ???? ??? ?? ??? ? ??? ???? ?????. ? ???? ? ?????? ???? ?? ???? ?? ?? ???? ?? ??? ??? ?????.

CSS ??? ?? ?? ?? ??? ?? ??? ????? ??? ???? ? ?? ????? ???? ????. ??? ??? ??? ??? ? ? ????. ??? (-) ? ?? (_) ??? ?????. ???? ?? ?? ??? ??? ?? ?? ??? ??? ? ? ????. ???? ????? ????? ???? ???? ?? ??? ??? ??????.

?? ??? ????.

1. <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   --CSS ???? ??? ??? ?? ???? ?????. ???? ??? ?, ?? ?? ??? ??? ? ??? ?????.

   ??? ?? ?? ???

   ??? ?????. ?, -primarycolor? -primarycolor? ? ?? ??? ?? ???? ?????. ??? ??? ?? ??? ???? ?? ???? CSS?? ??? ????. ??? ECMAScript? ?? ??? ?? ??? ?????.

   ????? ?? ??? ?? ?? ??? ????? CSS ??? ?? ??? ?? ?? ?? ????????. ???? ?? ? ??? ??? ???? ??? ?? ??? ???? ????. : ??? ??? ?? ??? ???? ?? ?????. html ??? ?? ?????. SVG ??? ?? ??? ?? ??? ??? ????? var () ??? ???????. ?? ?? -primarycolor ??? ?? ??? ????? ????? ??? ?????.

   ??? ??? ?? ?? ?? ??? ??? ?? ? ?? ? ????. ???? ??? ?? ??? ?? CSS ??? ?? ?? ???? ?? ???? ??? ? ????. ?? ??,

   ??

   ? ??? ?? ? ?? ??? ? ? ????. ?? CSS? ???? ????

   <span><span>:root</span> {
   </span>  <span>--primarycolor: #0ad0f9ff;
   </span><span>}</span>

   ??? ?? ?? - ? ? ??? ???? ??? ? ? ????. ?? ??? ???? ???? ?????, ? ???? ??? ??? ??? ? ???? : .

   CSS ??? ?? ?? vs. css ?? “Custom Property”? ???? ??? ???? ??? ???? ??? ?? ?????. ??? ?? ???? ?? ??? CSS ?? ??? ???? ?? ?? ? ? ????. ? ??? ??? ?? ??? ??, ?? ? at rules? CSS? ???? ??? ?????. ??? ????? ??? ?? ??? "??"?? ???, ???? ??? ??? ??? ??? ??? ?????. ?????? ??? ?? ?? ??? ??? ????. ??? ??? ??? ??????. ? ????? ??? ?? ??

   ? ?? ???????. ??? ?? ???

   ??? ????? ?? ? ?? var () ??? ?? ? ?? ??? ??????. ? ?? ??? ??? ?? ?? ????????. ? ?? ??? ?? ????? ?? ???????. ? ?? ?? ??? ?? ?? ?? ???? ?? ? ???? ?? ?? ????? ?????. ?? CSS? ??? ??? :

   -Accent-color? ????-??#f30??? ??? .btn__call-to-action ??? ????? ?? ??? ??? ??? ??? ??? ???? ????. ???? ??? ???? ?? ??????.

   ?? ?? ?? ? ? ????. ?? ??, ??? var ??? ?? ??? ??? ? ????.

   <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   ?? CSS?? -Books-BG? ???? ???? -Books-BG ??? ??? ?????. ??? ???, ???? ?? -arts-bg? ?? ? ?? ? ????. ? ? ?? ?? ???? ??? ???? ??? ?? ?????.? ?? ?????. ??? ?? ??? ???? ??? ?? ???? ?? ???? ? ??? ?? ?????. ?? CSS? ??????

   ? ??-footer-link-hover ??? ?? ??? ??? ????. ??, ?? ?? ???

   ??? ???? ??? ????? ??? ?? ??? ?? CSS ?? ???? ?? ?? ???? ?????. ?? ???? ??? ???? ?? ?? CSS ??? ??? ?? ? ??? ?? (?? ?? ??? ??) ?? ? ?? ???? (???? ??) ?? ?? ?????. ????? ? ??? ?? ??? ?? ?????? ??? ?????. ??? ?? ?? ??? ?? ?? ? ??? :

   ?? ???, ?? ???? ?? ?????. ??? ?? ???? ?? ??? ? ? ????. ? CSS? ? ?? ??? ???????

   <span><span>:root</span> {
   </span>  <span>--primarycolor: #0ad0f9ff;
   </span><span>}</span>

   ? ??

   ?? ??? ?? ???? ??????. ???

   ?? ?? ?? ?? ???? ??? ?? ?????.

   ??? ?? ??? ??? ???? ??? ?? ??? ?? ??? ? ????-?? ??, style = "-???-?? : #9a09af". . ??? ?? ?? ? ?? ???

   ??? ?? ??? HSL ?? ???? ???? ? ?? ??????.? hsl? ??, ??, ??? ? ?????. RGB? ??? ??? ?? ?? ?????. HSL () ? HSLA () ?? ?? ??? CSS?? HSL ?? ??? ? ????. hsl () ??? ??, ?? ? ???? ? ?? ??? ?????. hlsa () ??? ?? ? ?? ??? ???? ??? ?? ??? (0? 1 ??? ?)? ?????. RGB ???? ??? ???, ?? ? ???? ??? ????? HSL? ??? ?? ?? ?? ?? ? ?? ?? ???? ? ?? ??? ?? ? ? ?? ???? ?????. ??? 0%?? 100% ???? 0%? ???? 100%? ? ?????. ???? ?? 0%?? 100% ?? ? ? ???, ??? 0%? ?? ??? 100%? ???? 50%? ???? ????.

   OpenClipart? Crazyterabyte? ?? ?? ? HSL ?? ????? 1 ? ?? ???, ?? ? ???? 0?/360?, 120? ? 240??? 120? ??? ????. 2 ? ?? (??, ??? ? ???)? 120? ??? ??? 1 ? ?? ???? ?? 180?, 300? ? 60?/420?? ?? ????. 3 ?, 4 ? ? ?? ??? ?? 10? ??? ?????. HSL ???? ???? ??? Blue? HSL (240, 100%, 50%)??? HSL ?? ?? hsl () ? hsla () ??? ? ?? ??? ?? ????? ?? ???? ????? ?? ??? ???? ?????. ??? ???? CSS ?? ??? ??? ? ????. ??? ?? HSL (240deg, 100%, 50%), HSL (4.188rad, 100%, 50%) ?? HSLA (0.66 ??, 100%50%)? ?? ? ? ????. ??? ???? ?? ????. ?? ??? ???? ?? ?? ???? ??? ??? ?? ???? ??? ??? ??? ??? ? ????.

   ?? CSS? ??? ??? ???? ?????

   ??? ??? ????? ??? ?? ??? ???? ?? ? ??? ?? ??? ?? ????. ??? ??? ?? Dieter Raber?“??? ?? ??, HSL ? ?? calc ()? ???? ?? ?? ??”?? ??? ??? ?? ??? ?? ?????. ? ?? ????? ??? ?? ??? calc () ??? ???? ?? ???? ?? ? ???? ???? ????. ?? ???? ?? ? ???? ??? ???. A ?? ?? ???? ?? ??? ?? ?? 4 ?? ??, ? 90? ???? ?????.

   ? CSS? ??? ??? ??? ?? ???? ??? ?? ? ???? ?????.

   ??? ?? ??? ??? ???? ? ? ??? ??? ??? ? ?????. CSS ??? ???? ??? ?? ???? ??? ?? CSS ??? ?? ??? ???? ???? ??? ??? ?? ?? ??? ?? ? ? ????. ??? ???? ?? ?? ??, ?? ??? ??? ?? ??? ??? ? ?? ???? ?? HSL ??? ??? ?? ? ? ????.

   ??? ?? ??? ?? ??? ??? ???????. ?? ??,--nav-bg-color? nav ?? ? ??? ????,--nav-text-color? nav ? ????/text

   <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   .? ??? ?????. ??> ?? ?????? ?? ???? ????? dark

   value : ??? ?? ??? ??????. ??? A dark ?? ?? A ?? ??? ????? ??? ??????. ?? HSL ??? ? ?? ?? ??? ??? ???? ??? ??? ?? ???? ??? ? ????. ???? ???? ???? ? ????? ????? ?? ??? ?? ??? ? ????. ?? ??? ?? [?? = 'dark'] : ? ?????? invert () ??? ??? ??? ?? ??? ?????? (? ?? ?? ??). ?? ?? ??? ?? ??? ??? ? ????. 100%?? 1? ?? ??? ??, ?? ? ? ?? ??? ?????. Brightness () ??? ??? ? ????? ??? ????. 0? ?? ??? ??? ??? ????? invert () ??? ?? ??? ?? ?? ????. ??? ?? (0.6)? ???? ?? ? ?? ? ??? ?? ??? ?? :

   javaScript ? ??? ????? ?? ???? Dark/Light ??? ?? ? ? javaScript? ???? ??? ??? ??? ??? ?????. html?? ?? ??? ?? ?? ?? ??? ? ??????. ? ?????. ? ??? .hasattribute () ???? ????

   ??

   <span><span>:root</span> {
   </span>  <span>--primarycolor: #0ad0f9ff;
   </span><span>}</span>

   ??? ????? ????

   dark value? ???? ??? ??? ???? ???? Dark? ????. ??. ??? ??? ??? ???? ? ??? ?????. . ?? : CSS? Prefers Color-Scheme ??? ?? ???????.? ??? ???? ?? ?? ?? ??? ???? (????) ???? ??? ??? ???? ???? ? ??? ? ????. ??? ?? ??? ?? ????. ??? ?? ?? ? ??? ??? ???? ??? ??? ??? ?? ??? ?? ??? ??? ?? ????. ?? ??, ??? ?? ??? ???? ???? ??? ? ???? ?? ? ? ????.

   <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   ?????, ??? ??? ?? ??? ???? ???? ???? ?? ?? ??? ??? ? ???? :

   ? ?? ?? ? ??? ???? ??? ??? ???? ????. ? ???? ?? 10 ??? ?? ?? ?? (?? ? ??, ?? ???? ?????. ?? -Base-Font-Size? ?? ???? ?? ?? (HTML)? ?? ??? ?????. ?? ?? rem ??? ???? ?? ?? ??? ?? ??????? ??? ??? ?? ? ????. JavaScript? ?? ??? ?? ??? ???? <span><span>:root</span> { </span> <span>--primarycolor: #0ad0f9ff; </span><span>}</span> ?????? : ??? ?? ??? CSS ????, ??? ?? ?? ?? ??? ? ????. ?? ?? CSS.Supports () API? ???? ????? ??? ?? ??? ????? ??? ? ? ????.

   ??? ?? setproperty () ???? ???? ??? ?? ?? ?? ??? ? ???? :

   removeProperty ()? ???? ?? ???? ?????. ??? ?? ?? ??? ??? ??????

   javaScript??? ??? ??? ?? ??? ????? ?? ????? var () ??? ??? ??????.

   ALAS, ??? ??? Square-Bracket ?? ?? ?? ??? ???? ??? ?? ??? ??? ? ????. ?? ???, document.body.style .-- bg-home ?? docum ??? ?? ?? ? ?? ?? react, angular ? vue? ?? JavaScript ??? ??? ???? JavaScript? ???? ??? ??? ?? ??? HTML ??? ?????. ?? ?? ?? ???? ???? CSS? ?????. JavaScript ??? ??? ?? body { background-color: var(--primarycolor); } sitepoint? JavaScript ??? ?? ??? ?? ? ?? ???? React, Angular ? Vue? ?? ???? ???? ??? ????. React? ?? ? ??????. Angular? ?? ??? : ? ? ? ?? ?? ??? ????? ????. vue? ?? jump start vue.js :root { --top-border: border-top; /* Can't set a property as custom property's value */ var(--top-border): 10px solid #bc84d8; /* Can't use a variable as a property */ } ? ? ?? Vue ??? ?????? ??? React ?? ??? CSS? JavaScript ??? ?????. ????? Field-Button.CS? ??? ??????????. ??? ??? ?? ??? ?? ???? ??? ? ?? ?????.

   ? ???? ??? ???? ??? ??? ????? ??? ?? ?? ??? ?? ?? ??? ??????. ???? ??? ??? ??? ?? ?? ??? ??? ?? ???-?? BG-color? ?? ??? ? ????. ?? ?? "??"?? ???????. ?? ?? ( ?? ?? ??? ?????

   <span>--primarycolor: #0ad0f9ff; /* RGB alpha hexadecimal color notation */</span>

   ??? ?? ??? ????? FieldButtOngroup? ?????????

   ?? ????, ??? ??? ?? ??? ??? ???? ButtonBGColor Prop? ??? ??? ??? ?? ?? ???? ?? ??? ??? ??????.

   . ??? ??? ???? CSS ??? ?? ??? ?? ?? ?? ? ? ????. CSS? ?? ??? ?? HTML ? XML ???? ???? ?? ??? ??? ??? ?? ? ? ??? ????. ??? ??? ??? ?? CSS? ??? ???? ??? ?????. ??? ??? ??? ? ? ????. ??? ??? ?????? ??? ? ???? ??? ?? ?? ?? ??? ?? ??????? ??? ?? ??? ?? ??? ?? ??? ????? ????? ?????? ?? ? ?? ????. ? ?? ?????? "??? ??"? ??? ??? ???? ?? "?? ???"? ?? ? ? ????. ??? ???? ??? ?? ?? ?? ???? ???

   <span><span>:root</span> {
   </span>  <span>--primarycolor: #0ad0f9ff;
   </span><span>}</span>

   ? ?????. ??? ?? CSS ?? ?? ??? ?? ??? ???? ??? ?? ?? ?? ?? ?? ? ??? ???? intton-bg-color? ?? ? ??? ??? ????.

   ?? ??? ?? ??? ?? ????? ?? ?? ?? ? ?? ? ???? ??? CSS? ???? ????. ??? ?? ??? ???? ??? ?? ? ? ????

   ??? ??? ?? ?? ??? ???? ??? ??? ?? ? ???? ?? ??, ?? ? ??????? ?? ?????. CSS ?? ? ?? ???? ??????

   ??? ??? ?? ????? ??? ??? ?? ?? ?? ?? ???? ?? ?????. ?? CSS?? ?? ?? ??? ?? ?? ?? ??? ? ? ????? ????. CSS ??? ???? ?? ?? ??? ?? ???? ? ?? CSS Master? ??????.

   CSS ??? ?? ??? ?? FAQS CSS ??? ?? ???? ?????? CSS ??????? CSS ??? ?? ??? ??? ??? ?? ???? ????? ?? ???? ??? ??????. ??? -main-color? ??-???? ???? ??? ?? ??? ??? ?? ?? ? ? ????. CSS ??? ?? ??? ??? ?????? CSS ??? ?? ??? ????? -main-color? ?? ??? ????--Main-Color? ?? ??? ??????. var (-main-color : #3498db)? ?? var () ??? ???? ?? ?????. CSS ??? ?? ??? ???? ?? ??? ????? CSS ??? ?? ??? ???? ?????? ???? ?? ?? ??? ??? ?????. ??? ?? ??, ?? ???? ? ?? ?? ???? ???? ??? ? ?? ? ??? ?????.CSS ??? ?? ??? ??? ?? ???? ??? ? ????? ?, CSS ??? ?? ??? ??, ?? ??, ?? ?? ??? ??? ??? ?? ??? ? ????. ??? ??? ?? ?? ????? ??? ?????. CSS ??? ?? ??? ?????? ?, CSS ??? ?? ??? ?? ?? ??? ????. ??? ??? ???? ??? ????? ?? ??????. ?? ?? ??? ?? ???? ??? ? ????? CSS ??? ?? ??? ??? ??? ??? ? ????? ?, CSS ??? ?? ??? ??? ??? ??? ? ????. ?? ?? ?? ?? ?? ?? ??? ??? ???? ?? ?? ?????? ??? ? ??? ?????.