CSS ફોન્ટ પેલેટ વેલ્યુઝ: વૈશ્વિક વેબ ડિઝાઇન માટે અદ્યતન રંગ ફોન્ટ નિયંત્રણ

વેબ સતત વિકસિત થઈ રહ્યું છે, અને તેની સાથે આપણે દ્રશ્ય રૂપે પોતાને વ્યક્ત કરવાની રીતો પણ. કલર ફોન્ટ્સ, ખાસ કરીને COLRv1 ફોર્મેટનો ઉપયોગ કરતા, ડિઝાઇનર્સ માટે એક શક્તિશાળી સાધન તરીકે લોકપ્રિયતા મેળવી રહ્યા છે. જોકે, આ ફોન્ટ્સમાં વિવિધ રંગ યોજનાઓનું સંચાલન કરવું પડકારજનક હોઈ શકે છે. CSS ફોન્ટ પેલેટ વેલ્યુઝ અહીં આવે છે, જે કલર ફોન્ટ પેલેટ્સ પર બારીક નિયંત્રણ પ્રદાન કરે છે, જે વિવિધ વપરાશકર્તા અનુભવોમાં ઉન્નત કસ્ટમાઇઝેશન અને સુલભતાને સક્ષમ કરે છે.

કલર ફોન્ટ્સ શું છે?

પરંપરાગત ફોન્ટ્સ અક્ષરોના આકારોને વ્યાખ્યાયિત કરે છે, રંગને color અને backgroundColor જેવા CSS ગુણધર્મો પર છોડી દે છે. બીજી બાજુ, કલર ફોન્ટ્સ ફોન્ટ ફાઇલની અંદર સીધી રંગ માહિતીને એમ્બેડ કરે છે. આનાથી ગ્રેડિયન્ટ્સ, ટેક્સચર અને બહુ-રંગીન ગ્લિફ્સ સહિત વધુ જટિલ અને દૃષ્ટિની રીતે સમૃદ્ધ ટાઇપોગ્રાફી શક્ય બને છે.

કલર ફોન્ટ્સ માટે કેટલાક ફોર્મેટ છે, જેમાં શામેલ છે:

• SVGinOT (SVG OpenType): OpenType ફોન્ટ્સમાં SVG (સ્કેલેબલ વેક્ટર ગ્રાફિક્સ) ડેટાને એમ્બેડ કરે છે.
• CBDT/CBLC (કલર બિટમેપ ડેટા ટેબલ/કલર બિટમેપ લોકેશન ટેબલ): ગ્લિફ રજૂઆતો માટે બિટમેપ છબીઓનો ઉપયોગ કરે છે.
• COLR (કલર લેયર્સ): ગ્લિફ્સને લેયર્ડ આકારોની શ્રેણી તરીકે વ્યાખ્યાયિત કરે છે, જેમાં પ્રત્યેકનો પોતાનો રંગ હોય છે. વર્ઝન 0 (COLR v0) મર્યાદિત ક્ષમતાઓ ધરાવે છે.
• COLRv1 (કલર લેયર્સ વર્ઝન 1): COLRનું એક ઉત્ક્રાંતિ, જે લવચીકતા, સુવિધાઓ અને પ્રદર્શનમાં નોંધપાત્ર સુધારાઓ પ્રદાન કરે છે. તે વેરીએબલ કલર પેલેટ્સ અને ગ્રેડિયન્ટ્સ જેવા ખ્યાલો રજૂ કરે છે.

COLRv1 ખાસ કરીને આશાસ્પદ છે કારણ કે તે વેક્ટર ગ્રાફિક્સ અને ગ્રેડિયન્ટ્સને સપોર્ટ કરે છે, જે સ્કેલેબલ અને ઉચ્ચ-ગુણવત્તાવાળા કલર ફોન્ટ્સ માટે પરવાનગી આપે છે. તે એ ફોર્મેટ પણ છે જેને CSS ફોન્ટ પેલેટ વેલ્યુઝ ખાસ કરીને નિયંત્રિત કરવા માટે ડિઝાઇન કરવામાં આવ્યા છે.

CSS ફોન્ટ પેલેટ વેલ્યુઝનો પરિચય

CSS ફોન્ટ પેલેટ વેલ્યુઝ COLRv1 ફોન્ટમાં વ્યાખ્યાયિત રંગ પેલેટ્સને ઍક્સેસ કરવા અને તેમાં ફેરફાર કરવાની પદ્ધતિ પ્રદાન કરે છે. આ તમને નીચે મુજબ કરવાની મંજૂરી આપે છે:

• રંગ યોજનાઓ કસ્ટમાઇઝ કરો: તમારી વેબસાઇટના બ્રાન્ડિંગ અથવા થીમ સાથે મેળ ખાવા માટે ફોન્ટના રંગોને અનુકૂલિત કરો.
• સુલભતા સુધારો: દ્રષ્ટિની ખામી ધરાવતા વપરાશકર્તાઓ માટે સુલભતા માર્ગદર્શિકાને પૂર્ણ કરતી રંગ કોન્ટ્રાસ્ટ ભિન્નતાઓ બનાવો.
• થીમિંગનો અમલ કરો: લાઇટ અને ડાર્ક મોડ્સ માટે, અથવા વપરાશકર્તાની પસંદગીઓ પર આધાર રાખીને વિવિધ રંગ પેલેટ્સ વચ્ચે સરળતાથી સ્વિચ કરો.
• ડાયનેમિક ઇફેક્ટ્સ બનાવો: CSS વેરીએબલ્સ અથવા JavaScript નો ઉપયોગ કરીને ફોન્ટના રંગોને એનિમેટ કરો અથવા ગતિશીલ રીતે બદલો.

CSS ફોન્ટ પેલેટ વેલ્યુઝ કેવી રીતે કાર્ય કરે છે

ફોન્ટ પેલેટ્સ સાથે કામ કરવા માટેનો મુખ્ય CSS ગુણધર્મ font-palette છે. તે તમને ફોન્ટ ફાઇલની અંદર વ્યાખ્યાયિત ચોક્કસ પેલેટ પસંદ કરવાની અથવા તમારી પોતાની કસ્ટમ પેલેટ વ્યાખ્યાયિત કરવાની મંજૂરી આપે છે.

1. પૂર્વવ્યાખ્યાયિત પેલેટ પસંદ કરવી

COLRv1 ફોન્ટ્સમાં બહુવિધ પૂર્વવ્યાખ્યાયિત રંગ પેલેટ્સ હોઈ શકે છે, જેમાં પ્રત્યેકનું એક અનન્ય નામ હોય છે. તમે font-palette ગુણધર્મનો ઉપયોગ કરીને આમાંથી એક પેલેટ પસંદ કરી શકો છો:

            .element {
 font-family: 'MyColorFont';
 font-palette: 'DarkTheme';
}
            

              
                Copy
              
            
          

આ ઉદાહરણમાં, "element" ક્લાસ સાથેનું તત્વ "MyColorFont" ફોન્ટમાં વ્યાખ્યાયિત "DarkTheme" કલર પેલેટનો ઉપયોગ કરશે.

2. કસ્ટમ પેલેટ વ્યાખ્યાયિત કરવી

તમે @font-palette-values at-rule નો ઉપયોગ કરીને કસ્ટમ કલર પેલેટ બનાવી શકો છો. આ તમને ફોન્ટના ડિફોલ્ટ પેલેટમાં વ્યાખ્યાયિત રંગોને ઓવરરાઇડ કરવાની મંજૂરી આપે છે.

            @font-palette-values --custom-palette {
 font-family: 'MyColorFont';
 base-palette: 'Default'; /* Optional: Start with a predefined palette */
 override-colors: [
 0 #FF0000, /* Color index 0 (usually the first color) becomes red */
 1 #00FF00, /* Color index 1 becomes green */
 2 #0000FF  /* Color index 2 becomes blue */
 ];
}

.element {
 font-family: 'MyColorFont';
 font-palette: --custom-palette;
}
            

              
                Copy
              
            
          

સમજૂતી:

• @font-palette-values --custom-palette: "--custom-palette" નામની ફોન્ટ પેલેટને વ્યાખ્યાયિત કરે છે. ડબલ ડેશ સૂચવે છે કે તે કસ્ટમ પ્રોપર્ટી (CSS વેરીએબલ) છે.
• font-family: 'MyColorFont': આ પેલેટ લાગુ પડે છે તે ફોન્ટ ફેમિલી સ્પષ્ટ કરે છે.
• base-palette: 'Default': (વૈકલ્પિક) સૂચવે છે કે આ કસ્ટમ પેલેટ ફોન્ટમાંથી "Default" પેલેટ પર આધારિત છે. જો અવગણવામાં આવે, તો તે ખાલી સ્લેટથી શરૂ થાય છે.
• override-colors: રંગ વ્યાખ્યાઓનો એક એરે. પ્રત્યેક વ્યાખ્યામાં રંગ અનુક્રમણિકા (0 થી શરૂ થાય છે) અને CSS રંગ મૂલ્ય (હેક્સાડેસિમલ, RGB, HSL, વગેરે) હોય છે.

આ ઉદાહરણમાં, અમે એક કસ્ટમ પેલેટ બનાવી રહ્યા છીએ જે ફોન્ટમાં પ્રથમ ત્રણ રંગોને ઓવરરાઇડ કરે છે. અનુક્રમણિકા 0 પરનો રંગ લાલ બને છે, અનુક્રમણિકા 1 લીલો બને છે અને અનુક્રમણિકા 2 વાદળી બને છે. The `base-palette` સુનિશ્ચિત કરે છે કે કસ્ટમ પેલેટમાં સ્પષ્ટપણે ઓવરરાઇડ ન કરાયેલા કોઈપણ રંગો 'Default' પેલેટમાંથી તેમના મૂળ મૂલ્યો જાળવી રાખે છે.

3. ડાયનેમિક કંટ્રોલ માટે CSS વેરીએબલ્સનો ઉપયોગ કરવો

CSS ફોન્ટ પેલેટ વેલ્યુઝની વાસ્તવિક શક્તિ ત્યારે સામે આવે છે જ્યારે તમે તેને CSS વેરીએબલ્સ (કસ્ટમ પ્રોપર્ટીઝ) સાથે જોડો છો. આ તમને વપરાશકર્તાની ક્રિયાપ્રતિક્રિયાઓ, મીડિયા ક્વેરીઝ અથવા JavaScript પર આધાર રાખીને ફોન્ટના રંગોને ગતિશીલ રીતે બદલવાની મંજૂરી આપે છે.

            :root {
 --primary-color: #007bff; /* Default blue */
 --secondary-color: #6c757d; /* Default gray */
}

@font-palette-values --dynamic-palette {
 font-family: 'MyColorFont';
 override-colors: [
 0 var(--primary-color),
 1 var(--secondary-color)
 ];
}

.element {
 font-family: 'MyColorFont';
 font-palette: --dynamic-palette;
}

/* Example: Change the colors on hover */
.element:hover {
 --primary-color: #ff0000; /* Red on hover */
 --secondary-color: #00ff00; /* Green on hover */
}
            

              
                Copy
              
            
          

સમજૂતી:

• અમે :root સિલેક્ટરમાં બે CSS વેરીએબલ્સ, --primary-color અને --secondary-color, વ્યાખ્યાયિત કરીએ છીએ, તેમના પ્રારંભિક મૂલ્યો સેટ કરીએ છીએ.
• @font-palette-values નિયમ "--dynamic-palette" નામની કસ્ટમ પેલેટ બનાવે છે જે અનુક્રમણિકા 0 અને 1 પરના રંગોને વ્યાખ્યાયિત કરવા માટે આ વેરીએબલ્સનો ઉપયોગ કરે છે.
• જ્યારે વપરાશકર્તા તત્વ પર હોવર કરે છે, ત્યારે અમે CSS વેરીએબલ્સના મૂલ્યો બદલીએ છીએ, જે બદલામાં ફોન્ટના રંગોને અપડેટ કરે છે.

સુલભતા વિચારણાઓ

રંગીન ફોન્ટ્સ દૃષ્ટિની આકર્ષક હોઈ શકે છે, પરંતુ તે સુનિશ્ચિત કરવું મહત્વપૂર્ણ છે કે તે બધા વપરાશકર્તાઓ માટે સુલભ છે. CSS ફોન્ટ પેલેટ વેલ્યુઝનો ઉપયોગ કરતી વખતે અહીં કેટલીક મુખ્ય સુલભતા વિચારણાઓ આપેલી છે:

• રંગ કોન્ટ્રાસ્ટ: ફોન્ટના રંગો અને પૃષ્ઠભૂમિના રંગ વચ્ચે પૂરતો કોન્ટ્રાસ્ટ સુનિશ્ચિત કરો. કોન્ટ્રાસ્ટ રેશિયો ચકાસવા માટે WebAIM કોન્ટ્રાસ્ટ ચેકર જેવા સાધનોનો ઉપયોગ કરો. WCAG (વેબ કન્ટેન્ટ એક્સેસિબિલિટી ગાઇડલાઇન્સ) સામાન્ય ટેક્સ્ટ માટે ઓછામાં ઓછો 4.5:1 અને મોટા ટેક્સ્ટ માટે 3:1 નો કોન્ટ્રાસ્ટ રેશિયો ભલામણ કરે છે.
• રંગ અંધત્વ: રંગ અંધત્વના વિવિધ પ્રકારો (ડ્યુટેરાનોપિયા, પ્રોટેનોપિયા, ટ્રાઇટાનોપિયા) ધરાવતા વપરાશકર્તાઓને રંગ પસંદગીઓ કેવી દેખાશે તે ધ્યાનમાં લો. રંગ અંધત્વનું અનુકરણ કરવા અને તે મુજબ પેલેટને સમાયોજિત કરવા માટે કોબ્લિસ જેવા સાધનોનો ઉપયોગ કરો. વૈકલ્પિક ટેક્સ્ટ વિકલ્પો અથવા ફોન્ટની રંગ યોજનાને કસ્ટમાઇઝ કરવા માટે નિયંત્રણો પ્રદાન કરવાથી રંગ અંધ વપરાશકર્તાઓ માટે અનુભવમાં ઘણો સુધારો થઈ શકે છે.
• વપરાશકર્તા નિયંત્રણ: વપરાશકર્તાઓને તેમની વ્યક્તિગત જરૂરિયાતોને પૂર્ણ કરવા માટે ફોન્ટની રંગ યોજનાને કસ્ટમાઇઝ કરવાની મંજૂરી આપો. આમાં લાઇટ અને ડાર્ક મોડ્સ વચ્ચે સ્વિચ કરવા, કોન્ટ્રાસ્ટ વધારવા અથવા પૂર્વવ્યાખ્યાયિત હાઇ-કોન્ટ્રાસ્ટ પેલેટ પસંદ કરવાના વિકલ્પો પ્રદાન કરવાનો સમાવેશ થઈ શકે છે. વપરાશકર્તા પસંદગીઓને સ્થાનિક સ્ટોરેજ અથવા કૂકીઝમાં સંગ્રહિત કરવાથી તેમની પસંદગીઓ સત્રો દરમિયાન યાદ રહે છે તેની ખાતરી થાય છે.
• ફોલબેક વિકલ્પો: CSS ફોન્ટ પેલેટ વેલ્યુઝ અથવા COLRv1 ફોન્ટ્સને સપોર્ટ ન કરતા બ્રાઉઝર્સ માટે ફોલબેક સ્ટાઇલ પ્રદાન કરો. આમાં પ્રમાણભૂત CSS રંગો સાથે સરળ ફોન્ટનો ઉપયોગ કરવો અથવા ટેક્સ્ટ-આધારિત વિકલ્પ પ્રદાન કરવાનો સમાવેશ થઈ શકે છે.

બ્રાઉઝર સપોર્ટ

CSS ફોન્ટ પેલેટ વેલ્યુઝ માટે બ્રાઉઝર સપોર્ટ હજુ પણ વિકસિત થઈ રહ્યો છે, પરંતુ તે સુધરી રહ્યો છે. 2023 ના અંત સુધીમાં, Chrome, Firefox અને Safari જેવા મુખ્ય બ્રાઉઝર્સમાં આંશિક અથવા સંપૂર્ણ સપોર્ટ છે. નવીનતમ બ્રાઉઝર સુસંગતતા માહિતી માટે Can I Use તપાસો.

કારણ કે સપોર્ટ સાર્વત્રિક નથી, પ્રગતિશીલ ઉન્નતીકરણ નિર્ણાયક છે. જો વપરાશકર્તાનું બ્રાઉઝર ફોન્ટ પેલેટ વેલ્યુઝને સપોર્ટ ન કરતું હોય તો પણ તમારી વેબસાઇટ કાર્યરત અને સુલભ રહે તેની ખાતરી કરો. ઉદાહરણ તરીકે:

1. બેઝલાઇનથી શરૂઆત કરો: પ્રમાણભૂત CSS ગુણધર્મો (color, background-color) નો ઉપયોગ કરીને ડિફોલ્ટ ટેક્સ્ટ અને પૃષ્ઠભૂમિ રંગો વ્યાખ્યાયિત કરો જે પૂરતો કોન્ટ્રાસ્ટ અને વાંચી શકાય તેવું પ્રદાન કરે છે.
2. ફોન્ટ પેલેટ વેલ્યુઝ લાગુ કરો: જો બ્રાઉઝર ફોન્ટ પેલેટ વેલ્યુઝને સપોર્ટ કરતું હોય, તો ફોન્ટના દેખાવને વધારવા માટે તેનો ઉપયોગ કરો, પરંતુ મૂળભૂત કાર્યક્ષમતા માટે તેના પર નિર્ભર ન રહો.
3. ફોલબેક સ્ટાઇલ: ફોન્ટ પેલેટ વેલ્યુઝ માટે સપોર્ટ શોધવા અને જરૂર પડ્યે વૈકલ્પિક સ્ટાઇલ લાગુ કરવા માટે @supports at-rule નો ઉપયોગ કરો.

               @supports (font-palette: normal) {
    .element {
    font-family: 'MyColorFont';
    font-palette: --my-palette;
    }
   } else {
    .element {
    /* Fallback styles for browsers that don't support font-palette */
    color: black; /* Set a default text color */
    background-color: white; /* Set a default background color */
    }
   }
               
   
                 
                   Copy
                 
               
             

વૈશ્વિક વેબ ડિઝાઇન એપ્લિકેશન્સના ઉદાહરણો

CSS ફોન્ટ પેલેટ વેલ્યુઝનો ઉપયોગ વિવિધ વૈશ્વિક વેબ ડિઝાઇન એપ્લિકેશન્સમાં વપરાશકર્તા અનુભવ અને વિવિધ સંસ્કૃતિઓ અને ભાષાઓમાં સુલભતા વધારવા માટે કરી શકાય છે.

• બહુભાષી વેબસાઇટ્સ: વેબસાઇટના વિવિધ ભાષા સંસ્કરણો માટે રંગ પેલેટ્સને કસ્ટમાઇઝ કરો. ઉદાહરણ તરીકે, કેટલીક સંસ્કૃતિઓમાં, અમુક રંગો વિશિષ્ટ અર્થ ધરાવે છે (દા.ત., ચીનમાં લાલ રંગ નસીબનું પ્રતીક છે). ફોન્ટ પેલેટ વેલ્યુઝ તમને લક્ષ્ય પ્રેક્ષકો સાથે વધુ સારી રીતે મેળ ખાવા માટે ફોન્ટના દેખાવને અનુકૂલિત કરવાની મંજૂરી આપે છે.
• થીમ આધારિત સામગ્રી: વિષયવસ્તુના આધારે શૈક્ષણિક સામગ્રી માટે વિવિધ રંગ થીમ્સ બનાવો. ઉદાહરણ તરીકે, ઇતિહાસની વેબસાઇટ મ્યૂટ, પ્રાચીન-પ્રેરિત રંગો સાથેની પેલેટનો ઉપયોગ કરી શકે છે, જ્યારે વિજ્ઞાનની વેબસાઇટ વધુ તેજસ્વી, આધુનિક રંગોનો ઉપયોગ કરી શકે છે.
• ઇ-કોમર્સ: ઉત્પાદન પૃષ્ઠો પર ફોન્ટના રંગોને ઉત્પાદનની રંગ યોજના સાથે મેળ ખાવા માટે કસ્ટમાઇઝ કરો, દ્રશ્ય આકર્ષણ અને બ્રાન્ડ સુસંગતતામાં વધારો કરો.
• સમાચાર અને મીડિયા: સમાચાર વેબસાઇટના વિવિધ વિભાગો (દા.ત., રાજકારણ, રમતગમત, વ્યવસાય) ને હાઇલાઇટ કરવા માટે વિવિધ રંગ પેલેટ્સનો ઉપયોગ કરો.
• સુલભતા ઓવરલે: સુલભતા ઓવરલે વિકસાવો જે વપરાશકર્તાઓને તેમની વ્યક્તિગત જરૂરિયાતોને પૂર્ણ કરવા માટે વેબસાઇટની રંગ યોજનાને કસ્ટમાઇઝ કરવાની મંજૂરી આપે છે. આમાં કોન્ટ્રાસ્ટ વધારવા, રંગોને ઇન્વર્ટ કરવા અથવા પૂર્વવ્યાખ્યાયિત હાઇ-કોન્ટ્રાસ્ટ પેલેટ પસંદ કરવાના વિકલ્પો શામેલ હોઈ શકે છે.

CSS ફોન્ટ પેલેટ વેલ્યુઝનો ઉપયોગ કરવા માટેની શ્રેષ્ઠ પદ્ધતિઓ

CSS ફોન્ટ પેલેટ વેલ્યુઝ સાથે કામ કરતી વખતે ધ્યાનમાં રાખવા જેવી કેટલીક શ્રેષ્ઠ પદ્ધતિઓ અહીં આપેલી છે:

• યોગ્ય ફોન્ટ પસંદ કરો: બધા ફોન્ટ્સ સમાન રીતે બનાવવામાં આવતા નથી. એક COLRv1 ફોન્ટ પસંદ કરો જે સારી રીતે ડિઝાઇન કરેલો, સુવાચ્ય હોય અને સારી રીતે વ્યાખ્યાયિત રંગ પેલેટ ધરાવતો હોય.
• તમારા રંગ પેલેટનું આયોજન કરો: તમે ઉપયોગ કરવા માંગો છો તે રંગ પેલેટનું કાળજીપૂર્વક આયોજન કરો. તમારી વેબસાઇટની એકંદર ડિઝાઇન, લક્ષ્ય પ્રેક્ષકો અને સુલભતા જરૂરિયાતોને ધ્યાનમાં લો.
• વર્ણનાત્મક પેલેટ નામોનો ઉપયોગ કરો: તમારી કસ્ટમ પેલેટ્સને વર્ણનાત્મક નામો આપો જે તેમનો હેતુ સમજવામાં સરળ બનાવે (દા.ત., "DarkMode", "HighContrast", "BrandAccent").
• સંપૂર્ણપણે પરીક્ષણ કરો: ફોન્ટ પેલેટ યોગ્ય રીતે રેન્ડર થઈ રહી છે તેની ખાતરી કરવા માટે તમારી વેબસાઇટને વિવિધ બ્રાઉઝર્સ અને ઉપકરણો પર પરીક્ષણ કરો. જૂના બ્રાઉઝર્સ અથવા CSS ફોન્ટ પેલેટ વેલ્યુઝ માટે મર્યાદિત સપોર્ટ ધરાવતા બ્રાઉઝર્સ પર ખાસ ધ્યાન આપો.
• ફોલબેક સ્ટાઇલ પ્રદાન કરો: CSS ફોન્ટ પેલેટ વેલ્યુઝને સપોર્ટ ન કરતા બ્રાઉઝર્સ માટે હંમેશા ફોલબેક સ્ટાઇલ પ્રદાન કરો.
• સુલભતાને પ્રાધાન્ય આપો: રંગ પેલેટ્સ પસંદ કરતી વખતે અને કસ્ટમાઇઝ કરતી વખતે સુલભતા એ પ્રાથમિક વિચારણા હોવી જોઈએ.
• પ્રદર્શન ધ્યાનમાં લો: જટિલ રંગ ફોન્ટ્સ પૃષ્ઠ લોડ થવાના સમયને અસર કરી શકે છે. તમારી ફોન્ટ ફાઇલોને ઑપ્ટિમાઇઝ કરો અને ફાઇલના કદ ઘટાડવા માટે ફોન્ટ સબસેટિંગ જેવી તકનીકોનો ઉપયોગ કરો.

વ્યવહારિક ઉદાહરણો અને કોડ સ્નિપેટ્સ

ચાલો વાસ્તવિક-વિશ્વના દૃશ્યોમાં CSS ફોન્ટ પેલેટ વેલ્યુઝનો ઉપયોગ કેવી રીતે કરવો તેના કેટલાક વધુ વિગતવાર ઉદાહરણો જોઈએ.

ઉદાહરણ 1: લાઇટ અને ડાર્ક મોડ થીમ

આ ઉદાહરણ CSS મીડિયા ક્વેરીઝનો ઉપયોગ કરીને લાઇટ અને ડાર્ક મોડ કલર પેલેટ્સ વચ્ચે કેવી રીતે સ્વિચ કરવું તે દર્શાવે છે.

            /* Define color variables for light mode */
:root {
 --bg-color: #ffffff; /* White background */
 --text-color: #000000; /* Black text */
 --accent-color: #007bff; /* Blue accent */
}

/* Define color variables for dark mode */
@media (prefers-color-scheme: dark) {
 :root {
 --bg-color: #222222; /* Dark gray background */
 --text-color: #ffffff; /* White text */
 --accent-color: #bb86fc; /* Purple accent */
 }
}

/* Define font palette */
@font-palette-values --theme-palette {
 font-family: 'MyColorFont';
 override-colors: [
 0 var(--text-color), /* Text color */
 1 var(--bg-color), /* Background color */
 2 var(--accent-color) /* Accent color */
 ];
}

body {
 background-color: var(--bg-color); /* Apply background color */
 color: var(--text-color); /* Apply text color */
}

.element {
 font-family: 'MyColorFont';
 font-palette: --theme-palette;
}
            

              
                Copy
              
            
          

સમજૂતી:

• વપરાશકર્તાએ તેમની સિસ્ટમને લાઇટ કે ડાર્ક મોડ પર સેટ કરી છે કે કેમ તે શોધવા માટે અમે prefers-color-scheme મીડિયા ક્વેરીનો ઉપયોગ કરીએ છીએ.
• વપરાશકર્તાની પસંદગીના આધારે, અમે પૃષ્ઠભૂમિ રંગ, ટેક્સ્ટ રંગ અને ઉચ્ચાર રંગ માટે CSS વેરીએબલ્સના મૂલ્યોને અપડેટ કરીએ છીએ.
• @font-palette-values નિયમ કસ્ટમ પેલેટ બનાવે છે જે ફોન્ટના રંગોને વ્યાખ્યાયિત કરવા માટે આ વેરીએબલ્સનો ઉપયોગ કરે છે.
• body અને .element સિલેક્ટર્સ અનુક્રમે પૃષ્ઠ અને ચોક્કસ તત્વ પર પૃષ્ઠભૂમિ રંગ, ટેક્સ્ટ રંગ અને ફોન્ટ પેલેટ લાગુ કરે છે.

ઉદાહરણ 2: ઉચ્ચ કોન્ટ્રાસ્ટ થીમ

આ ઉદાહરણ દ્રષ્ટિની ખામી ધરાવતા વપરાશકર્તાઓ માટે ઉચ્ચ-કોન્ટ્રાસ્ટ થીમ કેવી રીતે બનાવવી તે દર્શાવે છે.

            /* Default colors */
:root {
 --default-bg: #ffffff;
 --default-text: #000000;
 --high-contrast-bg: #000000;
 --high-contrast-text: #ffff00;
}

/* High contrast class */
.high-contrast {
 --default-bg: var(--high-contrast-bg);
 --default-text: var(--high-contrast-text);
}

@font-palette-values --contrast-palette {
 font-family: 'MyColorFont';
 override-colors: [
 0 var(--default-text), /*Text Color*/
 1 var(--default-bg) /*Background Color*/
 ];
}

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

.element {
 font-family: 'MyColorFont';
 font-palette: --contrast-palette;
}

            

              
                Copy
              
            
          

સમજૂતી:

• પ્રમાણભૂત રેન્ડરિંગ અને ઉચ્ચ કોન્ટ્રાસ્ટ રેન્ડરિંગ માટે ડિફોલ્ટ રંગો વ્યાખ્યાયિત કરો.
• જ્યારે high-contrast ક્લાસ લાગુ કરવામાં આવે છે, ત્યારે ડિફોલ્ટ રંગોને ઉચ્ચ કોન્ટ્રાસ્ટ સંસ્કરણો સાથે બદલવામાં આવે છે.
• @font-palette-values ફોન્ટ પેલેટને વ્યાખ્યાયિત કરે છે જે તે મુજબ ગોઠવાય છે.

નિષ્કર્ષ

CSS ફોન્ટ પેલેટ વેલ્યુઝ કલર ફોન્ટ્સના રંગોને નિયંત્રિત કરવાની એક શક્તિશાળી અને લવચીક રીત પ્રદાન કરે છે, જે વેબ ડિઝાઇન અને સુલભતા માટે નવી શક્યતાઓ ખોલે છે. જોકે બ્રાઉઝર સપોર્ટ હજુ પણ વિકસિત થઈ રહ્યો છે, સંભવિત લાભો નોંધપાત્ર છે. ફોન્ટ પેલેટ વેલ્યુઝનો અસરકારક રીતે ઉપયોગ કેવી રીતે કરવો તે સમજીને, વિકાસકર્તાઓ અને ડિઝાઇનર્સ વૈશ્વિક પ્રેક્ષકો માટે વધુ દૃષ્ટિની આકર્ષક, સુલભ અને આકર્ષક વેબ અનુભવો બનાવી શકે છે.

CSS ફોન્ટ પેલેટ વેલ્યુઝ સાથે ટાઇપોગ્રાફીના ભવિષ્યને અપનાવો અને કલર ફોન્ટ્સની સંપૂર્ણ સંભવિતતાને અનલૉક કરો!