path: root/files/he/mozilla/add-ons/themes/theme_concepts/index.html

---
title: קונספטי ערכות נושא
slug: Mozilla/Add-ons/Themes/Theme_concepts
tags:
  - ערכת נושא
  - תוסף
translation_of: Mozilla/Add-ons/Themes/Theme_concepts
---
<div>{{AddonSidebar()}}</div>

<p>ערכות נושא המפותחות באמצעות <a href="/en-US/Add-ons/WebExtensions">Iממשקי פיתוח הרחבות רשת</a> בפיירפוקס מאפשרות לך לשנות את מראה הדפדפן על ידי הוספת תמונות לאיזור הכותרות של דפדפן הפיירפוקס: זהו האזור מאחורי סרגל התפריטים, סרגל הכלים, שדה הכתובת,סרגל החיפוש ופס הלשוניות.</p>

<p>אפשרויות ערכת נושא אלה יכולות להיות מיושמות כערגות נושא סטטיות (למרות שתמונות ערכת הנושא עצמן יכולות להיות מונפשות) או כערכות נושא דינמיות המיוצרות בהרחבת הדפדפן.</p>

<div class="note">
<p>אם יש לך ערכת נושא קלת משקל היא תומר לפורמט החדש של ערכות נושא באופן אוטומטי לפני שערכות נושא קלות משקל יוצאות משימוש. אין צורך לנייד את ערכת הנושא שלך. אולם, אנא הרגש/י חופשי/ה לעסכן את ערכת הנושא שלך להשתמש בתכונות החדשות המתוארות כאן.</p>
</div>

<h2 id="ערכות_נושא_סטטיות">ערכות נושא סטטיות</h2>

<p>ערכות נושא סטטיות מצויינות על ידי שימוש במשאבים כגון הרחבות דפדפן: קובץ  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> להגדיר רכיבי ערכת נושא עם רכיבים אלה מאוחסניחם באותה תיקייה כמו הקובץ   manifest.json רו בתת-תיקייה. משאבים אלה נארזים אחר-כך בקובץ דחוס לפרסום ב-  <a href="https://addons.mozilla.org">addons.mozilla.org</a> (AMO) או בהפצה עצמית. למידע נוסף על הפצה עצמית, בקרו ב- <a href="/en-US/docs/Mozilla/Add-ons/Distribution">חתימה והפצה של התוסף שלך</a>.</p>

<p>ץוכלו להשתמש גם ב <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Themes/Using_the_AMO_theme_generator">מחולל ערכות הנושא-ב-</a> AMO ליצור ערכת נושא סטטית. בנוסף, ניתן להשתמש ב- <a href="https://color.firefox.com">Firefox Color</a> לצפות בהתאמות לערכת הנושא של הדפדפן עם אפשרויות לשתף ולייצא ערכת נושא. .</p>

<div class="note">
<p>ערכת נושא ופונקציונליות של הרחבות דפדפן אינן יכולות להיות מוגדרות בחבילה אחת, כמו לכלול ערכת נושא שתשלים הרחבה. אולם ניתן בדרכים תכנותיות לכלול ערכת נושא בתוך הרחבה באמצעות ממשק הפיתוח של ערכת הנושא. ראו  <a href="#Dynamic_themes">ערכות מושא דינמיות</a>.</p>
</div>

<h3 id="הגדרץ_ערכת_נושא">הגדרץ ערכת נושא</h3>

<p>ליצירת ערכת נושא (בדוגמא זו ערכת תמונה בודדת פשוטה):</p>

<ul>
 <li>צרו תיקייה במיקום מתאים על המחשב שלכם.</li>
 <li>הוסיפו את קובץ תמונת ערכת הנושא בתיקייה:
  <pre>&lt;mytheme&gt;
 &lt;your_header_image&gt;.&lt;type&gt;</pre>
 </li>
 <li>צרו קובץ בשם manifest.json בתיקייה וערכו את תוכנו כדלהלן :
  <pre class="brush: json">{
  "manifest_version": 2,
  "version": "1.0",
  "name": "&lt;your_theme_name&gt;",
  "theme": {
    "images": {
      "headerURL": "&lt;your_header_image&gt;.&lt;type&gt;"
    },
    "colors": {
      "accentcolor": "#FFFFFF",
      "textcolor": "#000"
    }
  }
}
</pre>
  כאשר:

  <ul>
   <li><code>"accentcolor":</code> הוא בצבע הרקע של אזור הכותרות של ערכת הנושא שלכם.</li>
   <li><code>"</code><code>textcolor</code><code>":</code> צבע הטקסט באזור הכותרות.</li>
  </ul>
 </li>
 <li>ארזו את ערכת הנושא ושלחו ל- AMO, <a href="/en-US/Add-ons/WebExtensions/Publishing_your_WebExtension">במילוי הוראות אלה</a>. ערכות נושא יכוללות להישלח ל- AMO לצורך אירוח או הפצה עצמית.</li>
</ul>

<h3 id="גישות_ערכת_נושא_סטטית">גישות ערכת נושא סטטית</h3>

<p>קיימות שתי גישות ל"ציור" אזור הכותרת של פיירפוקס :  באמצעות תמונה אחת או באמצעות ריבוי תמונות. ניתן לשלב את שתיהן אך יותר קל להתיחחס לכל אחת בנפרד.</p>

<h4 id="ערכות_נושא_של_תמונה_אחת">ערכות נושא של תמונה אחת</h4>

<p>זו אפשרות ה"ציור" הבסיסית או המינימלית בה ניתן להגדיר:</p>

<ul>
 <li>תמונה יחידה , המעוגנת לפינה ימנית עליונה של אזור הכותרת .</li>
 <li>צבע לטקסט הכותרת.</li>
</ul>

<p>על שטח תמונת הכותרת שלך למלא מקסימום גובה של 200 פיקסלים. מקסימום רוחב התמונה נקבע על ידי הרזולוציה של הצג עליו פיירפוקס מציג ובכמה מהצג פיירפוקס משתמש. בפועל, זאת אומרת שיהיה צורך להתיר קוחב של עד 5120 פיקסלים (לדור הבא של צגי 5K). אולם, על פני יצירת תמונה רחבה מאוד גישה עדיפה היא ליצור תמונה יותר צרה עם קצה שמאלי שקוף כך שהיא תדהה לצבע הרקע. לדוגמא, נוכל להשתמש בתמונה הבאה:</p>

<p><img alt="An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left edge fading to total transparency." src="https://mdn.mozillademos.org/files/15215/weta.png" style="height: 200px; width: 406px;"><br>
 בשילוב עם צבע רקע משלים לליצירת אפקט זה בכותרת<br>
 <img alt="A single image theme using the weta.png image" src="https://mdn.mozillademos.org/files/15217/basic_theme.png" style="height: 113px; width: 679px;"></p>

<p>ראו פרטים על ערכת נושא זו בדוגמת  <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">ערכות הנושא </a><a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_fade">weta_fade</a>.</p>

<p>בבירור, ניתן עדיין לספק תמונה רחבה יחידה אם זה עדיף לך.</p>

<h4 id="ערכות_נושא_של_ריבוי_תמונות">ערכות נושא של ריבוי תמונות</h4>

<p>כחלופה ליצירת ערכת נושא בת תמונה אחת, קיימת האופציה להשתמש ביותר תמונות. תמונות אלה יכולות להיות מעוגנות אינדיבידואלית למיקומים בתוך הכותרת, אם האפשרות ליצירת אריח לכל תמונה.</p>

<p>בתלות באפקט שברצונך ליצור ייתכן ויהיה צורך לדכא את התמונה המחוייבת <code>"</code><code>headerURL</code><code>":</code> בתמונה ריקה או שקופה. שימוש בתמונה ריקה או שקופה יעשה , לדוגמא , אם ברצונך להכניס תמונהמיושרת למרכז באריח כמו<br>
 <img alt="An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left and right edges fading to total transparency." src="https://mdn.mozillademos.org/files/15219/weta_for_tiling.png" style="height: 200px; width: 270px;"><br>
 ליצירת האפקס הזה<br>
 <img alt="A single image theme using the additional images option to align an image to the center of the heading and tile it. " src="https://mdn.mozillademos.org/files/15221/tiled_theme.png" style="height: 113px; width: 679px;"><br>
 כאן תוכלו לציין תמונת weta כך:</p>

<pre class="brush: json" dir="ltr">"images": {
  "headerURL": "empty.png",
  "additional_backgrounds": [ "weta_for_tiling.png"]
},</pre>

<p dir="ltr">ואת הכנסת התמונות לאריחים כך:</p>

<pre class="brush: json" dir="ltr">"properties": {
  "additional_backgrounds_alignment": [ "top" ],
  "additional_backgrounds_tiling": [ "repeat"  ]
},</pre>

<p>פרטים מלאים אודות איך לאתחל ערכת נושא זו ניתן למצוא בדוגמת  <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">ערכות הנושא</a> <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_tiled">weta_tiled</a>. פאטים מלאים אודות ישור ואפשרויות יצירת אריחים ניתן למצוא ב - <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">"theme" key description</a>.</p>

<p>לחלופין, ניתן להשתמש ביותר מתמונה אחת , למשל בשילוב תמונות ה weta המקוריות עם זאת המעוגנת לשמאל הכותרת<br>
 <img alt="An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the right edge fading to total transparency." src="https://mdn.mozillademos.org/files/15223/weta-left.png" style="height: 200px; width: 406px;"><br>
 ליצירת האפקט<br>
 <img alt="A theme using the additional images option to place two mirrored image to the left and right of the browser header." src="https://mdn.mozillademos.org/files/15225/multi_image_theme.png" style="height: 113px; width: 679px;"></p>

<p>בו התמונה מצויינת על ידי:</p>

<pre class="brush: json" dir="ltr">"images": {
  "headerURL": "empty.png",
  "additional_backgrounds": [ "weta.png", "weta-left.png"]
},</pre>

<p>והיישור  שלה על ידי:</p>

<pre class="brush: json" dir="ltr">"properties": {
  "additional_backgrounds_alignment": [ "right top" , "left top" ]
},</pre>

<p>פרטים מלאים אודות איך לאתחל ערכת נושא זו ניתן למצוא בדוגמת   <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">ערכות הנושא</a>  <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/weta_mirror">weta_mirror</a>. פרטים מלאים אודות אפשרויות היישור ניתן למצוא ב-  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">"theme" key description</a>.</p>

<h3 id="ערכות_נושא_סטטיות_מונפשות">ערכות נושא סטטיות מונפשות</h3>

<p>ניתן ליצור ערכת נושא מונפשת באמצעות פורמט התמונות  APNG , כמו בדוגמת <a href="https://github.com/mdn/webextensions-examples/tree/master/themes">ערכות הנושא</a> <a href="https://github.com/mdn/webextensions-examples/tree/master/themes/animated">animated</a>. אולם, יש לזכור כי אנימציות מהירות כמו זו שבדוגמא יכולה להיות מסיחת דעת מדי עבור ערכת נושא מעשית.</p>

<p>ניתן גם להנפיש ערכות נושא תכנותית, ובזה נדון ב<a href="#Dynamic_themes">ערכות נושא דינמיות</a>.</p>

<h3 id="עדכון_ערכות_נושא_סטטיות">עדכון ערכות נושא סטטיות</h3>

<p>אם ערכת הנושא הסטטית שלך מאורחת ב- AMO, ניתן להעלות גרסה חדשה באמצעות <a href="https://addons.mozilla.org/en-US/developers/">Developer Hub</a> על ידי הצעדים הבאים:</p>

<ol>
 <li>ביקור בעמוד המוצר עבור ההרחבה שלך דרך  <a href="https://addons.mozilla.org/en-US/developers/">Developer Hub</a></li>
 <li>בחירת "Upload New Version" בצד שמאל</li>
 <li>העלאת הקובץ הארוז לוידוא או שינוי באמצעות מחולל ערכות הנושא</li>
</ol>

<p>עבור ערכות נושא מאורחות עצמית, ניתן להעלות גרסה חדשה דרך AMO על ידי ביצוע הצעדים דלעיל או שיטופלו על ידך דרך כתובת URL מעודכנת  או עדכוני יישום חיצוני. גירסה חדשה תצטרך להיחתם דרך Developer Hub.</p>

<div class="note">
<p>אם מעלים קובץ ארוז, מספר הגירסה צריךלהיות גבוה ממספר הגרסה הנוכחית.</p>
</div>

<h2 id="ערכות_נושא_דינמיות">ערכות נושא דינמיות</h2>

<p>כחלופה להגדרת ערכת נושא סטטית, ניתן להשתמש בממשק הפיתוח  {{WebExtAPIRef("theme")}} כדי לשלוט בערכת הנושא שבשימוש על ידי פיירפוקס מתוך הרחבת דפדפן. יש מספר מקרי שימוש באפשרות זו:</p>

<ul>
 <li>לאחד ערכת נושא עם הרחבת דפדפן, כתוספת.</li>
 <li>ליצור ערכת נושא דינמית שמשתנה תחת שליטה תכנותית.</li>
</ul>

<p>וכמובן, ניתן לשלב את השתיים ולאגד ערכת נושא הנשלטת על ידי תכנות עם ההרחבה שלך.</p>

<p>השימוש בממשק ה- {{WebExtAPIRef("theme")}} הוא ישיר. תחילה, יש לבקש <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions"> הרשאת </a> "theme" בקובץ<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json"> manifest.json</a> של ההרחבה. השלב הגא, בונים אובייקט JSON המכיל אותה אינפורמציה שתשתמשו בה בקובץ manifest.json של ערכת נושא סטטית, לבסוף, יש להעביר את אובייקט ה- JSON בקריאת  {{WebExtAPIRef("theme.update()")}}.</p>

<p>לדוגמא, הקוד הבא מתוך  <a href="https://github.com/mdn/webextensions-examples/tree/master/dynamic-theme">dynamic theme example</a> מגדיר את התוכן עבור אלמנטי היום והלילה של ערכת הנושא הדינמית</p>

<pre class="brush: js" dir="ltr">const themes = {
  'day': {
    images: {
     headerURL: 'sun.jpg',
    },
    colors: {
     accentcolor: '#CF723F',
     textcolor: '#111',
    }
  },
  'night': {
    images: {
     headerURL: 'moon.jpg',
    },
    colors: {
     accentcolor: '#000',
     textcolor: '#fff',
    }
  }
};</pre>

<p>עכת הנושא.אובייקט ערכת הנושא מועבר אז ל- {{WebExtAPIRef("theme.update()")}} לשינוי ערכת הנושא של הכותרת, כבקטע קוד זה מתוך אותה דוגמא</p>

<pre class="brush: js" dir="ltr">function setTheme(theme) {
  if (currentTheme === theme) {
    // No point in changing the theme if it has already been set.
    return;
  }
  currentTheme = theme;
  browser.theme.update(themes[theme]);
}</pre>

<p>לימדו עוד אודות ערכות נושא דינמיות, וראו דוגמאות נוספות בסרטון הבא::</p>

<p dir="ltr">{{EmbedYouTube("ycckyrUN0AY")}}</p>

<p dir="ltr"></p>

<p>אם טרם יצרת הרחבת דפדפן, צפה/י ב- <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">ההרחבה הראשונה שלך</a> להדרכה צעד-צעד.</p>

<h2 id="תאימות_בין_דפדפנים">תאימות בין דפדפנים</h2>

<p>קיימת תאימות מוגבלת בין ערכות נושא בדפדפנים המובילים. לדפדפן אופרה גישה שונה לחלוטין , וערכות הנושא של  Microsoft Edge אינן פתוחות עדיין למפחתים/ות.</p>

<p>יש איזו שהיא תאימות בין ערכות נושא של פיירפוקס  ועאכות נושא של כרום, בתנאי שהיכולת לנייד ערכת נושא של הרחבה בת תמונה יחידה מפיירפוקס לכרום.  זה נעשה על ידי תיקון המפתחות ב-manifest.json  כלהלן:</p>

<ul>
 <li><code>"headerURL":</code> ישונה ל- <code>"theme_frame":</code></li>
 <li><code>"accentcolor":</code> ישונה ל- <code>"frame":</code></li>
 <li><code>"textcolor":</code> ישונה ל- <code>"tab_background_text":</code></li>
</ul>

<p>בשתומת לב לכך ש- "frame": ו- "tab_background_text": תומכים רק בהגדרות מערך צבעים  RGB בכרום.</p>

<p>אז, בדוגמת ערכת הנושא בת התמונה היחידה (weta_fade) יכולה להיתמך בכרום  באמצעות קובץ ה-manifest.json הבא:</p>

<pre class="brush: json" dir="ltr">{
  "manifest_version": 2,
  "version": "1.0",
  "name": "&lt;your_theme_name&gt;",
  "theme": {
    "images": {
      "theme_frame": "weta.png"
    },
    "colors": {
      "frame": [ 173 , 176 , 159 ],
      "tab_background_text": [ 0 , 0 , 0 ]
    }
  }
}</pre>

<p>אולם, יהיו מספר הבדלים</p>

<ul>
 <li>כרום מכניס תמונות לאריחי <code>“theme_frame”:</code> משמאל אזור הכותרת.</li>
</ul>

<p dir="ltr"><img alt="The basic theme example using the Chrome compatible manifest.json keys, showing the differences in how those keys are implemented." src="https://mdn.mozillademos.org/files/15227/basic_in_chrome.png" style="height: 113px; width: 679px;"></p>

<p>לעוד מידע , ראו רשימות ב-<a href="/en-US/Add-ons/WebExtensions/manifest.json/theme#Chrome_compatibility">Chrome compatibility</a>.</p>