ಥೀಮಿಂಗ್

ನೀವು ಏನನ್ನು ನಿರ್ಮಿಸುತ್ತೀರಿ

ಬಳಕೆದಾರರು ಇಡೀ ನೋಟವನ್ನು ಬದಲಿಸಬಹುದಾದ ಅಪ್ಲಿಕೇಶನ್ — ಒಂದು ಲಿಂಕ್ ಮಾಡಿದ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಿಂದ ಆರಂಭಿಸಿ, ಉಳಿಯುವ ರನ್‌ಟೈಮ್ ಥೀಮ್ ಬದಲಾವಣೆಗಾರನೊಂದಿಗೆ ಮುಕ್ತಾಯ — ಸುಮಾರು 15 ನಿಮಿಷಗಳಲ್ಲಿ.

ಆರಂಭಿಸುವ ಮೊದಲು

ಮೊದಲು ಪೂರ್ಣಗೊಳಿಸಿ ಫ್ರೇಮ್‌ವರ್ಕ್ ಟ್ಯುಟೋರಿಯಲ್ ಮೊದಲು ನಿಮ್ಮ ಸ್ಟ್ಯಾಕ್‌ಗಾಗಿ, ಹೀಗಾಗಿ ಥೀಮ್ ಹಾಕಲು ನಿಮ್ಮಲ್ಲಿ ಸಣ್ಣ Lily ಫಾರ್ಮ್ ಇರುತ್ತದೆ. ಇಲ್ಲಿರುವುದೆಲ್ಲ ಎಲ್ಲಾ ಏಳು ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ; ಕೋಡ್ ಮಾದರಿಗಳು Svelte ಮತ್ತು ಸರಳ HTML ತೋರಿಸುತ್ತವೆ.

ಹಂತ 1 — ಸಿದ್ಧ ಥೀಮ್ ಲಿಂಕ್ ಮಾಡಿ

themes/ ಡೈರೆಕ್ಟರಿ 45 ಸ್ವತಂತ್ರ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ಹೊಂದಿದೆ. ಅವನ್ನು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಸ್ಥಿರ ಸ್ವತ್ತುಗಳಿಗೆ ನಕಲಿಸಿ ಮತ್ತು ಒಂದನ್ನು ಲಿಂಕ್ ಮಾಡಿ:

<link rel="stylesheet" href="/assets/themes/united-kingdom-national-health-service-england-for-patients.css" />

ಸೆಟ್‌ನ ಮುಖ್ಯಾಂಶಗಳು:

• ಸಾರ್ವಜನಿಕ ವಲಯ — NHS England / Scotland / Wales, ಪ್ರತಿಯೊಂದೂ ರೋಗಿ-ಮುಖಿ ಮತ್ತು ವೈದ್ಯ-ಮುಖಿ ರೂಪಾಂತರಗಳಲ್ಲಿ; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
• ಮಾರಾಟಗಾರ-ಪ್ರೇರಿತ — adobe-spectrum, mozilla-protocol.
• ಸಾಮಾನ್ಯ ಉದ್ದೇಶ — light, dark, nord, dracula, wireframe, corporate, synthwave, ಮತ್ತು ಇನ್ನೂ ಹಲವು.

ಹಂತ 2 — ಯಾವುದನ್ನಾದರೂ ಅತಿಕ್ರಮಿಸಿ

ಥೀಮ್ ಆಯ್ಕೆಗಾರರು ಇದರಲ್ಲಿ ಸುತ್ತಿಡಲ್ಪಟ್ಟಿವೆ :where(...)ಇದು ಶೂನ್ಯ ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ಹೊಂದಿದೆ — ಹೀಗಾಗಿ ನೀವು ಬರೆಯುವ ಯಾವುದೇ ನಿಯಮ ಗೆಲ್ಲುತ್ತದೆ, ಸರಳವಾಗಿ:

/* After the theme link: your brand button, everything else themed */
.button {
  background: #7c3aed;
  border-radius: 9999px;
}

ಹಂತ 3 — theme-picker ನೊಂದಿಗೆ ರನ್‌ಟೈಮ್ ಬದಲಾವಣೆ

theme-picker ಸಹಾಯಕ ಥೀಮ್‌ನ ಸಂಪೂರ್ಣ ಜೀವನಚಕ್ರವನ್ನು ಹೊಂದಿರುವ ಹೆಡ್‌ಲೆಸ್ ಐಕಾನ್-ಬಟನ್ + ಲಿಸ್ಟ್‌ಬಾಕ್ಸ್: ಇದು ಒಂದು ನಿರ್ವಹಿಸಲ್ಪಡುವ ಅನ್ನು ಬದಲಿಸುವ ಮೂಲಕ ಆಯ್ದ ಸ್ಟೈಲ್‌ಶೀಟ್ ಅನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ <link> (ಸಕ್ರಿಯ ಥೀಮ್ ಮಾತ್ರ ಪಡೆಯಲ್ಪಡುತ್ತದೆ), ಹೊಂದಿಸುತ್ತದೆ data-theme="{slug}" ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ, ಮತ್ತು ಐಚ್ಛಿಕವಾಗಿ ಇಲ್ಲಿ ಉಳಿಸುತ್ತದೆ localStorage. ಇಲ್ಲಿ Svelte ತೋರಿಸಲಾಗಿದೆ; React, Vue, Angular, HTML, Nunjucks ಮತ್ತು Blazor ಪೋರ್ಟ್‌ಗಳು ಒಪ್ಪಂದ-ಒಪ್ಪಂದವಾಗಿ ಹೊಂದುತ್ತವೆ:

<script>
  import ThemePicker from "@lilydesignsystem/svelte-theme-picker";
</script>

<ThemePicker
  label="Theme"
  themesUrl="/assets/themes/"
  themes={["light", "dark", "nord", "wireframe"]}
  storageKey="my-app-theme"
/>

ಅದೇ ಸಂಪೂರ್ಣ ಏಕೀಕರಣ. ಕೀಬೋರ್ಡ್ ವರ್ತನೆ WAI-ARIA APG ಲಿಸ್ಟ್‌ಬಾಕ್ಸ್ ಮಾದರಿಯನ್ನು ಅನುಸರಿಸುತ್ತದೆ; ನಿಯಂತ್ರಣವೇ ಹೆಡ್‌ಲೆಸ್ (ಕ್ಲಾಸ್ ಹುಕ್ .theme-picker), ಹೀಗಾಗಿ ಯಾವುದೇ ಥೀಮ್ ಸಕ್ರಿಯವಾಗಿದ್ದರೂ ಅದನ್ನು ಎತ್ತಿಕೊಳ್ಳುತ್ತದೆ.

ಹಂತ 4 — ನಿಮ್ಮದೇ CSS ನಲ್ಲಿ ಥೀಮ್‌ಗೆ ಪ್ರತಿಕ್ರಿಯಿಸಿ

ಸಹಾಯಕ ಹೊಂದಿಸುವುದರಿಂದ data-theme ಡಾಕ್ಯುಮೆಂಟ್ ರೂಟ್‌ನಲ್ಲಿ, ನಿಮ್ಮ ಸ್ವಂತ ಶೈಲಿಗಳು ಅದರ ಮೇಲೆ ಕವಲೊಡೆಯಬಹುದು:

[data-theme="dark"] .site-logo { filter: invert(1); }

ಸರ್ವರ್ ರೆಂಡರಿಂಗ್‌ಗೆ ಟಿಪ್ಪಣಿಗಳು

ಸಹಾಯಕ ಎಲ್ಲಾ DOM ಬರವಣಿಗೆಗಳನ್ನು ಫ್ರೇಮ್‌ವರ್ಕ್‌ನ mount/effect ಜೀವನಚಕ್ರದೊಳಗೆ ಮಾಡುತ್ತದೆ, ಹೀಗಾಗಿ ನಿರ್ಮಾಣದಿಂದಲೇ SSR-ಸುರಕ್ಷಿತ. ಮೊದಲ ಪೇಂಟ್ ಫ್ಲ್ಯಾಶ್ ತಪ್ಪಿಸಲು, ಆರಂಭಿಕ ಥೀಮ್‌ನ ರೆಂಡರ್ ಮಾಡಿ <link> ಮತ್ತು data-theme ಸರ್ವರ್‌ನಲ್ಲಿ (ಉದಾಹರಣೆಗೆ ಕುಕೀಯಿಂದ) — Svelte ಸಹಾಯಕ ರೆಪೊ ಚಲಾಯಿಸಬಹುದಾದ SvelteKit ಕುಕೀ ಉದಾಹರಣೆಯನ್ನು ಕಳುಹಿಸುತ್ತದೆ, ಮತ್ತು ಇತರ ಕ್ಯಾಟಲಾಗ್‌ಗಳು ತಮ್ಮ ಸ್ಟ್ಯಾಕ್‌ಗಳಿಗೆ ಅದೇ ಮಾದರಿಯನ್ನು ದಾಖಲಿಸುತ್ತವೆ.

ಮುಂದಿನ ಹಂತಗಳು

• ಆದ್ಯತೆ ಸಹಾಯಕಗಳು — ಭಾಷೆ, ಪಠ್ಯ ಗಾತ್ರ, ಹಂಚಿಕೆ, ಮತ್ತು ದಿನಾಂಕ/ಸಮಯ ನಮೂದಿಗೆ ಅದೇ ಮಾದರಿ.
• ಥೀಮ್ ಕೊಡುಗೆ ನೀಡಿ — ಪ್ರತಿಯೊಂದೂ ಕ್ಲಾಸ್ ಹುಕ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸುವ ಒಂದು ಸ್ವತಂತ್ರ ಸ್ಟೈಲ್‌ಶೀಟ್; ನೋಡಿ ಕೊಡುಗೆ.

ದಾರಿಯಲ್ಲಿ ಪ್ರಶ್ನೆಗಳಿವೆಯೇ? ಸಹಾಯ ಪುಟ ಉತ್ತರಗಳಿಂದ ತುಂಬಿದೆ — ಮತ್ತು ಯಾವುದೇ ಹಂತ ಸ್ಪಷ್ಟವಾಗಬಹುದಾದರೆ, ನಮಗೆ ತಿಳಿಸಿ ಮತ್ತು ನಾವು ಸಂತೋಷದಿಂದ ಟ್ಯುಟೋರಿಯಲ್ ಸುಧಾರಿಸುತ್ತೇವೆ.