ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅಥವಾ ಆ್ಯಪ್‌ಗೆ ಡಾರ್ಕ್ ಮೋಡ್ ಸೇರಿಸುವುದು ಹೇಗೆ (ಬಿಳಿ ಮಿನುಗುವಿಕೆ ಇಲ್ಲದೆ)
ಡಾರ್ಕ್ ಮೋಡ್ ಸೇರಿಸಲು, ನಿಮ್ಮ ಬಣ್ಣಗಳನ್ನು ಹೆಸರಿಸಿದ ಟೋಕನ್‌ಗಳಾಗಿ (ಹಿನ್ನೆಲೆ, ಪಠ್ಯ, ಮೇಲ್ಮೈ, ಗಡಿ, ಆಕ್ಸೆಂಟ್) ವ್ಯಾಖ್ಯಾನಿಸಿ, ಕಠಿಣವಾಗಿ ಕೋಡ್ ಮಾಡಿದ ಮೌಲ್ಯಗಳ ಬದಲು. ಪ್ರತಿ ಟೋಕನ್‌ಗೆ ಬೆಳಕು ಮತ್ತು ಡಾರ್ಕ್ ಮೌಲ್ಯ ನೀಡಿ, ಮತ್ತು CSS prefers-color-scheme ಮೀಡಿಯಾ ವೈಶಿಷ್ಟ್ಯದಿಂದ ಅವುಗಳ ನಡುವೆ ಬದಲಿಸಿ, ಆಗ ಸೈಟ್ ಭೇಟಿಗಾರರ ಸಿಸ್ಟಮ್ ಸೆಟ್ಟಿಂಗ್ ಅನುಸರಿಸುತ್ತದೆ. ಹಸ್ತಚಾಲಿತ ಟಾಗಲ್ ಕೂಡ ಬೇಕಿದ್ದರೆ, ಆಯ್ಕೆಯನ್ನು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಉಳಿಸಿ ಪುಟದ head ನಲ್ಲಿ ಚಿಕ್ಕ ಇನ್‌ಲೈನ್ ಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಅನ್ವಯಿಸಿ, ಲೋಡ್‌ನಲ್ಲಿ ಬಿಳಿ ಮಿನುಗುವಿಕೆ ಇಲ್ಲದಂತೆ. ನಂತರ ಎರಡೂ ಥೀಮ್‌ಗಳಲ್ಲಿ ಕಾಂಟ್ರಾಸ್ಟ್, ಚಿತ್ರಗಳು ಮತ್ತು ಚಾರ್ಟ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಿ. AI ಆ್ಯಪ್ ಬಿಲ್ಡರ್‌ನಲ್ಲಿ ಒಂದು ಸ್ಪಷ್ಟ ಪ್ರಾಂಪ್ಟ್ ಹೆಚ್ಚಿನ ಕೆಲಸ ಮಾಡಬಲ್ಲದು; ಗುಣಮಟ್ಟ ಬರುವುದು ಪರಿಶೀಲನೆಯಿಂದ.
ಎರಡು ವಿಧಾನಗಳು
| ವಿಧಾನ | ಅದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ | ಯಾವುದಕ್ಕೆ ಒಳ್ಳೆಯದು | ಸಮತೋಲನಗಳು |
|---|---|---|---|
| ಸಿಸ್ಟಮ್ ಅನುಸರಿಸಿ | CSS ಮೀಡಿಯಾ ವೈಶಿಷ್ಟ್ಯ prefers-color-scheme ಬೆಳಕು ಅಥವಾ ಡಾರ್ಕ್ ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ | ಸರಳ ಸೈಟ್‌ಗಳು, ಶೂನ್ಯ UI | ಭೇಟಿಗಾರರು ತಮ್ಮ ಸಾಧನಕ್ಕಿಂತ ಭಿನ್ನವಾಗಿ ಆಯ್ಕೆ ಮಾಡಲಾಗುವುದಿಲ್ಲ |
| ಟಾಗಲ್ + ಸಿಸ್ಟಮ್ ಡೀಫಾಲ್ಟ್ | ಸಿಸ್ಟಮ್ ಸೆಟ್ಟಿಂಗ್‌ನಿಂದ ಆರಂಭ; ಬೆಳಕು / ಡಾರ್ಕ್ / ಸಿಸ್ಟಮ್ ಸ್ವಿಚ್ ಅದನ್ನು ಮೀರಿಸಿ ನೆನಪಿಡುತ್ತದೆ | ಜನರು ಬಹಳ ಬಳಸುವ ಆ್ಯಪ್‌ಗಳು | ಸ್ವಲ್ಪ JavaScript, ಮತ್ತು ಲೋಡ್ ಮಿನುಗುವ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಬೇಕು |
ಹೆಚ್ಚಿನ ಆ್ಯಪ್‌ಗಳು ಎರಡನೆಯದರೊಂದಿಗೆ ಉತ್ತಮವಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ: ಡೀಫಾಲ್ಟ್ ಆಗಿ ಸಿಸ್ಟಮ್ ಗೌರವಿಸಿ, ಜನರು ಬದಲಿಸಲು ಅವಕಾಶ ನೀಡಿ.
ಬಣ್ಣ ಟೋಕನ್‌ಗಳೊಂದಿಗೆ ಆರಂಭಿಸಿ
ಬಣ್ಣಗಳು white, #333 ಮತ್ತು gray-100 ಎಂದು ಕೋಡ್‌ನಾದ್ಯಂತ ಹರಡಿದ್ದರೆ ಡಾರ್ಕ್ ಮೋಡ್ ನೋವಿನದು. ಪ್ರತಿ ಬಣ್ಣ ಸಣ್ಣ ಹೆಸರಿಸಿದ ಟೋಕನ್‌ಗಳ ಗುಂಪಿನಿಂದ ಬಂದರೆ ಸುಲಭ:
| ಟೋಕನ್ | ಬೆಳಕು | ಡಾರ್ಕ್ |
|---|---|---|
background | ಬಹುತೇಕ ಬಿಳಿ | ತುಂಬಾ ಗಾಢ ಬೂದು |
surface (ಕಾರ್ಡ್‌ಗಳು, ಮೆನುಗಳು) | ಬಿಳಿ | ಸ್ವಲ್ಪ ಹಗುರ ಗಾಢ ಬೂದು |
text | ಬಹುತೇಕ ಕಪ್ಪು | ಆಫ್-ವೈಟ್ |
text-muted | ಮಧ್ಯಮ ಬೂದು | ಸ್ವಲ್ಪ ಹಗುರ ಮಧ್ಯಮ ಬೂದು |
border | ಬೆಳಕಿನ ಬೂದು | ಸ್ವಲ್ಪ ಕಾಂಟ್ರಾಸ್ಟ್ ಇರುವ ಗಾಢ ಬೂದು |
accent | ನಿಮ್ಮ ಬ್ರ್ಯಾಂಡ್ ಬಣ್ಣ | ಸಾಮಾನ್ಯವಾಗಿ ಹಗುರ ಅಥವಾ ಕಡಿಮೆ ಸ್ಯಾಚುರೇಟೆಡ್ ಆವೃತ್ತಿ |
ಪ್ರತಿ ಘಟಕ ಟೋಕನ್ ಹೆಸರುಗಳನ್ನು ಬಳಸುತ್ತದೆ. ಥೀಮ್ ಬದಲಿಸುವುದು ಎಂದರೆ ಒಂದು ಮೌಲ್ಯಗಳ ಗುಂಪನ್ನು ಬದಲಿಸುವುದು, ಪ್ರತಿ ಘಟಕವನ್ನು ಎಡಿಟ್ ಮಾಡುವುದಲ್ಲ.
ಡಾರ್ಕ್ ಪ್ಯಾಲೆಟ್‌ಗೆ ಸಲಹೆಗಳು:
- ದೊಡ್ಡ ಪ್ರದೇಶಗಳಿಗೆ ಸಂಪೂರ್ಣ ಕಪ್ಪು ಮತ್ತು ಸಂಪೂರ್ಣ ಬಿಳಿಯನ್ನು ತಪ್ಪಿಸಿ; ತುಂಬಾ ಗಾಢ ಬೂದು ಮತ್ತು ಆಫ್-ವೈಟ್ ಓದಲು ಸುಲಭ.
- ಹಗುರ ಮೇಲ್ಮೈಗಳಿಂದ ಆಳ ತೋರಿಸಿ, ನೆರಳುಗಳಿಂದ ಅಲ್ಲ — ಡಾರ್ಕ್ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ನೆರಳುಗಳು ಬಹುತೇಕ ಕಾಣುವುದಿಲ್ಲ.
- ಪ್ರಕಾಶಮಾನ ಬ್ರ್ಯಾಂಡ್ ಬಣ್ಣಗಳನ್ನು ಸ್ವಲ್ಪ ಡಿಸ್ಯಾಚುರೇಟ್ ಮಾಡಿ; ಅವು ಡಾರ್ಕ್ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಅಸಹನೀಯವಾಗಿ ಹೊಳೆಯಬಹುದು.
- ಕಾಂಟ್ರಾಸ್ಟ್ ಓದಬಲ್ಲಂತೆ ಇಡಿ. WCAG ನ AA ಮಟ್ಟ ಸಾಮಾನ್ಯ ಪಠ್ಯಕ್ಕೆ ಕನಿಷ್ಠ 4.5:1 ಕಾಂಟ್ರಾಸ್ಟ್ ಕೇಳುತ್ತದೆ. ಮಂದ ಬೂದು ಪಠ್ಯ ಡಾರ್ಕ್ ಥೀಮ್‌ಗಳಲ್ಲಿ ಆಗಾಗ್ಗೆ ವಿಫಲವಾಗುತ್ತದೆ.
Tailwind CSS ನೊಂದಿಗೆ
ಅನೇಕ AI-ನಿರ್ಮಿತ ಆ್ಯಪ್‌ಗಳಲ್ಲಿ Tailwind ಡೀಫಾಲ್ಟ್ ಸ್ಟೈಲಿಂಗ್ ಉಪಕರಣ. Tailwind ನ ಡಾರ್ಕ್ ಮೋಡ್ ದಸ್ತಾವೇಜು ಪ್ರಕಾರ, dark: ವೇರಿಯಂಟ್ ಡೀಫಾಲ್ಟ್ ಆಗಿ prefers-color-scheme ಬಳಸುತ್ತದೆ, ಆದ್ದರಿಂದ bg-white dark:bg-gray-900 ನಂತಹ ಕ್ಲಾಸ್‌ಗಳು ಹೆಚ್ಚುವರಿ ಕೆಲಸವಿಲ್ಲದೆ ಸಿಸ್ಟಮ್ ಸೆಟ್ಟಿಂಗ್ ಅನುಸರಿಸುತ್ತವೆ.
Tailwind v4 ನಲ್ಲಿ ಹಸ್ತಚಾಲಿತ ಟಾಗಲ್‌ಗಾಗಿ, ದಸ್ತಾವೇಜು ವೇರಿಯಂಟ್ ಅನ್ನು ಪೋಷಕ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿರುವ ಕ್ಲಾಸ್‌ಗೆ ಬದಲಿಸುವುದನ್ನು ತೋರಿಸುತ್ತದೆ:
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
ನಂತರ ಆ್ಯಪ್ ರೂಟ್ ಎಲಿಮೆಂಟ್‌ನಿಂದ dark ಕ್ಲಾಸ್ ಸೇರಿಸುತ್ತದೆ ಅಥವಾ ತೆಗೆಯುತ್ತದೆ. ದಸ್ತಾವೇಜು ಹೆಡ್‌ನಲ್ಲಿ ಇನ್‌ಲೈನ್ ಸ್ಕ್ರಿಪ್ಟ್ ಸಹ ಸೂಚಿಸುತ್ತದೆ, ಅದು ಪುಟ ಚಿತ್ರಿಸುವ ಮೊದಲು ಉಳಿಸಿದ ಆಯ್ಕೆ (ಅಥವಾ ಸಿಸ್ಟಮ್ ಸೆಟ್ಟಿಂಗ್) ಅನ್ವಯಿಸುತ್ತದೆ — ಮಿನುಗುವಿಕೆ ತಪ್ಪಿಸುವುದು ಇದೇ ರೀತಿ.
ಬಿಳಿ ಮಿನುಗುವಿಕೆ ತಪ್ಪಿಸುವುದು
ಮಿನುಗುವಿಕೆ ಸಂಭವಿಸುವುದು ಪುಟ ಬೆಳಕಿನಲ್ಲಿ ಚಿತ್ರಿಸಿದ ನಂತರ, JavaScript ಲೋಡ್ ಆಗಿ ಉಳಿಸಿದ ಆಯ್ಕೆ ಓದಿ ಡಾರ್ಕ್‌ಗೆ ಬದಲಿಸುವುದರಿಂದ. ಪರಿಹಾರ:
- ಪುಟದ head ನಲ್ಲಿ ಒಂದು ಚಿಕ್ಕ ಇನ್‌ಲೈನ್ ಸ್ಕ್ರಿಪ್ಟ್ ಇರಿಸಿ, ಅದು ಉಳಿಸಿದ ಥೀಮ್ ಓದಿ ರೂಟ್ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ ಕ್ಲಾಸ್ ಹೊಂದಿಸುತ್ತದೆ, ಏನಾದರೂ ಚಿತ್ರಿಸುವ ಮೊದಲು.
- ಬ್ರೌಸರ್ ಚಿತ್ರಿಸುವ ಭಾಗಗಳು (ಸ್ಕ್ರಾಲ್‌ಬಾರ್‌ಗಳು, ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು) ಹೊಂದಲು ಪ್ರತಿ ಥೀಮ್‌ಗೆ
color-schemeCSS ಗುಣಲಕ್ಷಣ ಹೊಂದಿಸಿ. - ಎರಡೂ ಥೀಮ್‌ಗಳಲ್ಲಿ ಪುಟಕ್ಕೆ ಸ್ಪಷ್ಟ ಹಿನ್ನೆಲೆ ಬಣ್ಣ ನೀಡಿ.
- ಆ್ಯಪ್ ಸರ್ವರ್-ರೆಂಡರ್ ಆಗಿದ್ದರೆ, ಸರ್ವರ್ ಮತ್ತು ಬ್ರೌಸರ್ ಆರಂಭಿಕ ಥೀಮ್ ಒಪ್ಪಿಕೊಳ್ಳುವಂತೆ ಮಾಡಿ, ಇಲ್ಲದಿದ್ದರೆ ಪುಟ ಮರು-ರೆಂಡರ್ ಆಗಿ ಮಿನುಗಬಹುದು.
ಉದಾಹರಣೆ ಪ್ರಾಂಪ್ಟ್‌ಗಳು
ಸಂಪೂರ್ಣ ಸೆಟಪ್:
ಡಾರ್ಕ್ ಮೋಡ್ ಸೇರಿಸಿ. ಮೊದಲು ಕಠಿಣವಾಗಿ ಕೋಡ್ ಮಾಡಿದ ಬಣ್ಣಗಳನ್ನು ಥೀಮ್ ಟೋಕನ್‌ಗಳೊಂದಿಗೆ ಬದಲಿಸಿ (ಹಿನ್ನೆಲೆ, ಮೇಲ್ಮೈ, ಪಠ್ಯ, ಮಂದ ಪಠ್ಯ, ಗಡಿ, ಆಕ್ಸೆಂಟ್) ಬೆಳಕು ಮತ್ತು ಡಾರ್ಕ್ ಮೌಲ್ಯಗಳೊಂದಿಗೆ. ಡೀಫಾಲ್ಟ್ ಆಗಿ ಭೇಟಿಗಾರರ ಸಿಸ್ಟಮ್ ಸೆಟ್ಟಿಂಗ್. ಹೆಡರ್‌ನಲ್ಲಿ ಬೆಳಕು, ಡಾರ್ಕ್ ಮತ್ತು ಸಿಸ್ಟಮ್ ಆಯ್ಕೆಗಳ ಥೀಮ್ ಸ್ವಿಚ್ ಸೇರಿಸಿ, ಆಯ್ಕೆಯನ್ನು localStorage ನಲ್ಲಿ ನೆನಪಿಡಿ, ಮತ್ತು ಹೆಡ್‌ನಲ್ಲಿರುವ ಇನ್‌ಲೈನ್ ಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ಅನ್ವಯಿಸಿ ಲೋಡ್‌ನಲ್ಲಿ ಬಿಳಿ ಮಿನುಗುವಿಕೆ ಇಲ್ಲದಂತೆ ಮಾಡಿ. ಪ್ರತಿ ಥೀಮ್‌ಗೆ color-scheme ಹೊಂದಿಸಿ. ಪ್ರಸ್ತುತ ಬೆಳಕಿನ ವಿನ್ಯಾಸ ಹಾಗೆಯೇ ಇರಲಿ.
ಉಳಿದಿರುವುದನ್ನು ಸರಿಪಡಿಸುವುದು:
ಡಾರ್ಕ್ ಮೋಡ್‌ನಲ್ಲಿ ಪ್ರತಿ ಪುಟ ಪರಿಶೀಲಿಸಿ ಮತ್ತು ಸರಿಪಡಿಸಿ: ಕಡಿಮೆ ಕಾಂಟ್ರಾಸ್ಟ್ ಪಠ್ಯ (ಕನಿಷ್ಠ 4.5:1 ಗುರಿ), ಕಠಿಣವಾಗಿ ಕೋಡ್ ಮಾಡಿದ ಬಿಳಿ ಹಿನ್ನೆಲೆಗಳು, ಕಣ್ಮರೆಯಾಗುವ ಗಡಿಗಳು, ಡಾರ್ಕ್ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಡಾರ್ಕ್ ಪಠ್ಯವಿರುವ ಚಾರ್ಟ್‌ಗಳು, ಮತ್ತು ಕಾಣೆಯಾಗುವ ಲೋಗೋಗಳು. ಬೆಳಕಿನ ಥೀಮ್ ಬದಲಿಸಬೇಡಿ.
ಚಿತ್ರಗಳು ಮತ್ತು ಚಾರ್ಟ್‌ಗಳು:
ಡಾರ್ಕ್ ಮೋಡ್‌ನಲ್ಲಿ ಲೋಗೋದ ಬೆಳಕಿನ ಆವೃತ್ತಿ ಬಳಸಿ. ಚಾರ್ಟ್ ಅಕ್ಷಗಳು, ಗ್ರಿಡ್‌ಲೈನ್‌ಗಳು ಮತ್ತು ಲೇಬಲ್‌ಗಳು ಥೀಮ್ ಟೋಕನ್‌ಗಳನ್ನು ಬಳಸಲಿ. ಡಾರ್ಕ್ ಮೋಡ್‌ನಲ್ಲಿ ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳಿಗೆ ಸೂಕ್ಷ್ಮ ಗಡಿ ನೀಡಿ, ಇದರಿಂದ ಅವು ಹಿನ್ನೆಲೆಯೊಂದಿಗೆ ಬೆರೆಯುವುದಿಲ್ಲ.
ಹಂತ ಹಂತವಾಗಿ
- ಬಣ್ಣಗಳನ್ನು ಲೆಕ್ಕಪರಿಶೋಧಿಸಿ. ಕಠಿಣವಾಗಿ ಕೋಡ್ ಮಾಡಿದ ಬಣ್ಣಗಳನ್ನು ಹುಡುಕಿ ಟೋಕನ್‌ಗಳೊಂದಿಗೆ ಬದಲಿಸಿ. ಇದೇ ಹೆಚ್ಚಿನ ಕೆಲಸ.
- ಪ್ರತಿ ಟೋಕನ್‌ಗೆ ಡಾರ್ಕ್ ಮೌಲ್ಯಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ.
- ಸಿಸ್ಟಮ್ ಅನುಸರಿಸಿ
prefers-color-schemeನೊಂದಿಗೆ (ಅಥವಾ Tailwind ನ ಡೀಫಾಲ್ಟ್dark:). - ಬೇಕಿದ್ದರೆ ಟಾಗಲ್ ಸೇರಿಸಿ: ಬೆಳಕು, ಡಾರ್ಕ್, ಸಿಸ್ಟಮ್. ಆಯ್ಕೆಯನ್ನು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಉಳಿಸಿ; ಲಾಗಿನ್ ಆಗುವ ಆ್ಯಪ್‌ಗಳಿಗೆ ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್‌ನಲ್ಲೂ ಉಳಿಸಬಹುದು.
- ಮಿನುಗುವಿಕೆ ತಡೆಯಿರಿ ಹೆಡ್ ಇನ್‌ಲೈನ್ ಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು
color-schemeನೊಂದಿಗೆ. - ಕಠಿಣ ಭಾಗಗಳನ್ನು ಪರಿಶೀಲಿಸಿ: ಲೋಗೋಗಳು, ಐಕಾನ್‌ಗಳು, ಬಿಳಿ ಹಿನ್ನೆಲೆಯ ಚಿತ್ರಗಳು, ಚಾರ್ಟ್‌ಗಳು, ಕೋಡ್ ಬ್ಲಾಕ್‌ಗಳು, ನಕ್ಷೆಗಳು, ಎಂಬೆಡ್‌ಗಳು, ಇಮೇಲ್‌ಗಳು.
- ಎರಡೂ ಥೀಮ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ ಡೆಸ್ಕ್‌ಟಾಪ್ ಮತ್ತು ಫೋನ್‌ನಲ್ಲಿ, ಸಿಸ್ಟಮ್ ಬೆಳಕು ಮತ್ತು ಡಾರ್ಕ್ ಎರಡಕ್ಕೂ ಹೊಂದಿಸಿ, ಮತ್ತು ಹಾರ್ಡ್ ರಿಫ್ರೆಶ್ ನಂತರ.
ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು
- ಎಲ್ಲವನ್ನೂ ವಿಲೋಮಗೊಳಿಸುವುದು. ಬಣ್ಣಗಳನ್ನು ವಿಲೋಮಗೊಳಿಸುವ ಫಿಲ್ಟರ್ ಫೋಟೋಗಳು ಮತ್ತು ಬ್ರ್ಯಾಂಡ್ ಬಣ್ಣಗಳನ್ನು ಹಾಳುಮಾಡುತ್ತದೆ.
- ಕಠಿಣವಾಗಿ ಕೋಡ್ ಮಾಡಿದ ಬಣ್ಣಗಳು ಉಳಿದಿರುವುದು. ಡಾರ್ಕ್ ಪುಟದಲ್ಲಿ ಒಂದು ಬಿಳಿ ಕಾರ್ಡ್ ತಕ್ಷಣ ಎದ್ದು ಕಾಣುತ್ತದೆ.
- ಕಡಿಮೆ ಕಾಂಟ್ರಾಸ್ಟ್ ಬೂದು ಪಠ್ಯ. ಶೈಲಿಯಾಗಿ ಕಾಣುತ್ತದೆ, ಆದರೆ ಓದುವಿಕೆಯಲ್ಲಿ ವಿಫಲ.
- ಲೋಡ್‌ನಲ್ಲಿ ಬಿಳಿ ಮಿನುಗುವಿಕೆ. ವಿಶೇಷವಾಗಿ ರಾತ್ರಿಯಲ್ಲಿ ಫೋನ್‌ಗಳಲ್ಲಿ ಗಮನಾರ್ಹ.
- ಮೂರನೇ-ಪಕ್ಷದ ಎಂಬೆಡ್‌ಗಳನ್ನು ಮರೆಯುವುದು. ನಕ್ಷೆಗಳು, ವೀಡಿಯೊಗಳು ಮತ್ತು ವಿಜೆಟ್‌ಗಳು ಬೆಳಕಿನಲ್ಲಿಯೇ ಉಳಿಯಬಹುದು; ಡಾರ್ಕ್ ಆಯ್ಕೆ ಇದೆಯೇ ಪರಿಶೀಲಿಸಿ.
- ಎರಡು ಸ್ಥಿತಿಗಳ ಮಾತ್ರ ಟಾಗಲ್. ಒಬ್ಬರು ಒಮ್ಮೆ ಕ್ಲಿಕ್ ಮಾಡಿದ ನಂತರ ಸಿಸ್ಟಮ್ ಅನುಸರಿಸಲು ಹಿಂತಿರುಗಲು ಸಾಧ್ಯವಿಲ್ಲ.
- ಬೆಳಕಿನ ಥೀಮ್ ಹಾಳುಮಾಡುವುದು. ನಿಮ್ಮ ಪ್ರಾಂಪ್ಟ್‌ನಲ್ಲಿ ಬೆಳಕಿನ ವಿನ್ಯಾಸ ಉಳಿಯಬೇಕು ಎಂದು ಸ್ಪಷ್ಟವಾಗಿ ಹೇಳಿ.
ಪರಿಶೀಲನಾಪಟ್ಟಿ
- ಎಲ್ಲಾ ಬಣ್ಣಗಳು ಥೀಮ್ ಟೋಕನ್‌ಗಳಿಂದ ಬರುತ್ತವೆ
- ಡೀಫಾಲ್ಟ್ ಆಗಿ ಸಿಸ್ಟಮ್ ಸೆಟ್ಟಿಂಗ್ ಅನುಸರಿಸುತ್ತದೆ
- ಐಚ್ಛಿಕ ಟಾಗಲ್ ಬೆಳಕು, ಡಾರ್ಕ್ ಮತ್ತು ಸಿಸ್ಟಮ್ ಜೊತೆ, ನೆನಪಿನಲ್ಲಿ
- ಲೋಡ್ ಅಥವಾ ರಿಫ್ರೆಶ್‌ನಲ್ಲಿ ಬಿಳಿ ಮಿನುಗುವಿಕೆ ಇಲ್ಲ
- ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಸ್ಕ್ರಾಲ್‌ಬಾರ್‌ಗಳು ಹೊಂದಲು
color-schemeಹೊಂದಿಸಲಾಗಿದೆ - ಎರಡೂ ಥೀಮ್‌ಗಳಲ್ಲಿ ಪಠ್ಯ ಕಾಂಟ್ರಾಸ್ಟ್ ಕನಿಷ್ಠ 4.5:1
- ಡಾರ್ಕ್ ಮೋಡ್‌ನಲ್ಲಿ ಲೋಗೋಗಳು, ಚಿತ್ರಗಳು, ಚಾರ್ಟ್‌ಗಳು ಮತ್ತು ಎಂಬೆಡ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಲಾಗಿದೆ
- ಬೆಳಕಿನ ಥೀಮ್ ಬದಲಾಗದೆ ಉಳಿದಿದೆ
- ಡೆಸ್ಕ್‌ಟಾಪ್ ಮತ್ತು ಫೋನ್‌ನಲ್ಲಿ ಪರೀಕ್ಷಿಸಲಾಗಿದೆ
Mythex ನೊಂದಿಗೆ ಡಾರ್ಕ್ ಮೋಡ್
Mythex ನಲ್ಲಿ ನಿರ್ಮಿಸಿದ ಆ್ಯಪ್‌ಗಳು ಡೀಫಾಲ್ಟ್ ಆಗಿ Vite, React, TypeScript ಮತ್ತು Tailwind ಬಳಸುತ್ತವೆ, ಆದ್ದರಿಂದ ಮೇಲಿನ Tailwind ವಿಧಾನ ನೇರವಾಗಿ ಅನ್ವಯಿಸುತ್ತದೆ: ಸಂಪೂರ್ಣ-ಸೆಟಪ್ ಪ್ರಾಂಪ್ಟ್ ಅನ್ನು ಚಾಟ್‌ನಲ್ಲಿ ಅಂಟಿಸಿ, ನಂತರ ಎರಡೂ ಥೀಮ್‌ಗಳಲ್ಲಿ ಮತ್ತು ಫೋನ್ ಗಾತ್ರದಲ್ಲಿ Preview ಪರಿಶೀಲಿಸಿ. Mythex ನ ವಿನ್ಯಾಸ ಪ್ರಾಂಪ್ಟಿಂಗ್ ಸಲಹೆ ಯಾವುದನ್ನು ಬದಲಿಸಬೇಕು ಮತ್ತು ಯಾವುದನ್ನು ಉಳಿಸಬೇಕು ಎಂದು ಹೆಸರಿಸುವುದು — ಇಲ್ಲಿ ಮುಖ್ಯ: ಬೆಳಕಿನ ಥೀಮ್ ಹಾಗೆಯೇ ಇರಬೇಕು ಎಂದು ಹೇಳಿ. ವಿನ್ಯಾಸ ಮತ್ತು UI ಪ್ರಾಂಪ್ಟ್‌ಗಳು ನೋಡಿ, ಮತ್ತು ಯಾವುದಾದರೂ ಪಾಸ್ ತಪ್ಪಾದರೆ ಚೆಕ್‌ಪಾಯಿಂಟ್ ಮೂಲಕ ಹಿಂತಿರುಗಿ.
ಉತ್ತಮ ಕಾಣುವ ವಿನ್ಯಾಸದ ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿಯಲು, AI ಬಳಸಿ ಉತ್ತಮ ಕಾಣುವ ಆ್ಯಪ್ ವಿನ್ಯಾಸ ಮಾಡುವುದು ಹೇಗೆ ಮತ್ತು AI ಆ್ಯಪ್ ಬಿಲ್ಡರ್‌ಗಳಿಗೆ ಪ್ರಾಂಪ್ಟ್ ಬರೆಯುವುದು ಹೇಗೆ ನೋಡಿ.
ಪ್ರಶ್ನೆಗಳು
ನನ್ನ ವೆಬ್‌ಸೈಟ್ ಸಾಧನದ ಡಾರ್ಕ್ ಮೋಡ್ ಸೆಟ್ಟಿಂಗ್ ಅನುಸರಿಸುವಂತೆ ಮಾಡುವುದು ಹೇಗೆ?
CSS prefers-color-scheme ಮೀಡಿಯಾ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಬಳಸಿ; ಇದು ಭೇಟಿಗಾರರ ಸಿಸ್ಟಮ್ ಲೈಟ್ ಅಥವಾ ಡಾರ್ಕ್‌ಗೆ ಹೊಂದಿಸಲಾಗಿದೆಯೇ ಎಂದು ಹೇಳುತ್ತದೆ. Tailwind ನ dark: ವೇರಿಯಂಟ್ ಡೀಫಾಲ್ಟ್ ಆಗಿ ಇದನ್ನೇ ಬಳಸುತ್ತದೆ.
ಡಾರ್ಕ್ ಮೋಡ್‌ಗೆ ಬದಲಾಗುವ ಮೊದಲು ನನ್ನ ಸೈಟ್ ಬಿಳಿಯಾಗಿ ಮಿನುಗುವುದೇಕೆ?
ಉಳಿಸಿದ ಥೀಮ್ ಅನ್ನು ಪುಟ ಈಗಾಗಲೇ ಚಿತ್ರಿಸಿದ ನಂತರ JavaScript ಅನ್ವಯಿಸುತ್ತದೆ. ಇದನ್ನು ಸರಿಪಡಿಸಲು ಪುಟದ head ನಲ್ಲಿ ಒಂದು ಚಿಕ್ಕ ಇನ್‌ಲೈನ್ ಸ್ಕ್ರಿಪ್ಟ್ ಇರಿಸಿ, ಅದು ಏನಾದರೂ ಚಿತ್ರಿಸುವ ಮುಂಚೆ ಥೀಮ್ ಕ್ಲಾಸ್ ಹೊಂದಿಸಲಿ, ಮತ್ತು ಎರಡೂ ಥೀಮ್‌ಗಳಿಗೆ ಸ್ಪಷ್ಟ ಹಿನ್ನೆಲೆ ಬಣ್ಣ ಹೊಂದಿಸಿ.
ಡಾರ್ಕ್ ಮೋಡ್ ಸಂಪೂರ್ಣ ಕಪ್ಪಾಗಿರಬೇಕೇ?
ಸಾಮಾನ್ಯವಾಗಿ ಇಲ್ಲ. ತುಂಬಾ ಗಾಢ ಬೂದು ದೀರ್ಘ ಓದಿಗೆ ಕಣ್ಣುಗಳಿಗೆ ಸುಲಭ, ಮತ್ತು ಸ್ವಲ್ಪ ಹಗುರ ಮೇಲ್ಮೈಗಳಿಂದ ಆಳ ತೋರಿಸಬಹುದು. OLED ಗೆ ಗಮನ ಕೊಡುವ ಅಥವಾ ಮಾಧ್ಯಮ-ಭರಿತ ವಿನ್ಯಾಸಗಳಿಗೆ ಸಂಪೂರ್ಣ ಕಪ್ಪು ಸೂಕ್ತವಾಗಬಹುದು.
ಸಿಸ್ಟಮ್ ಸೆಟ್ಟಿಂಗ್ ಅನುಸರಿಸಿದರೆ ನನಗೆ ಡಾರ್ಕ್ ಮೋಡ್ ಟಾಗಲ್ ಬೇಕೇ?
ಕಟ್ಟುನಿಟ್ಟಾಗಿ ಇಲ್ಲ. ಸಿಸ್ಟಮ್ ಅನುಸರಿಸುವುದು ಉತ್ತಮ ಡೀಫಾಲ್ಟ್, ಆದರೆ ಬೆಳಕು, ಡಾರ್ಕ್ ಮತ್ತು ಸಿಸ್ಟಮ್ ಆಯ್ಕೆಗಳಿರುವ ಟಾಗಲ್ ತಮ್ಮ ಸಾಧನ ಸೆಟ್ಟಿಂಗ್‌ಗಿಂತ ನಿಮ್ಮ ಸೈಟ್ ಭಿನ್ನವಾಗಿರಬೇಕೆಂದು ಬಯಸುವವರಿಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.