Joyful Theme in Sunbird-Ed portal:
The Joyful Theme in SB-Themes introduces a vibrant and lively color palette that invigorates the visual experience. Key color variables within this theme include:
Primary Theme Color:
#FFD954
- Utilized as the primary theme color, infusing a sense of joy and vibrancy into various design elements.HSL and RGB Values:
hsl(47, 100%, 66%)
andrgb(255, 217, 84)
- Representing the HSL and RGB color notations for the primary theme color.Contrast and Contrast RGB:
#333
andrgb(51, 51, 51)
- Ensuring high contrast for enhanced legibility and visual appeal.Shade and Tint:
hsl(var(--primary-theme-hsl), 56%)
andhsl(var(--primary-theme-hsl), 76%)
- Providing shading and tinting effects for depth and dimension.
These color variables form the foundation of the Joyful Theme's design, creating a lively and engaging user experience.
Dark-mode version:
In the dark mode theme of SB-Themes, color codes are meticulously curated to ensure an appealing and user-friendly experience in low-light conditions. Let's compare these color codes with a vibrant yellow color:
Primary Color: The primary color in dark mode, represented as
hsl(var(--primary-theme-hsl), 58.24%)
, exhibits a distinct contrast to the lively and energetic yellow color.Shade Variations: Shades like
--primary-0
,--primary-100
,--primary-200
,--primary-250
,--primary-300
, and--primary-400
are tailored for dark mode, ensuring clear contrast and visibility. They stand in sharp contrast to the warm and inviting yellow hue.Secondary Color: The secondary color in dark mode, synchronized with the modified primary color, complements the theme's overall aesthetic, distinct from the radiance of yellow.
Gray and Text Colors: Dark mode introduces a set of dark-themed colors (
--color-000
,--color-111
,--color-222
,--color-333
,--color-444
) for enhanced readability and visual appeal in low-light conditions.Backgrounds: Dark-themed backgrounds (
--sbt-body-bg
,--sbt-body-bg2
) are thoughtfully chosen to create a cohesive and comfortable dark mode experience.
These purposeful color adjustments contribute to a visually engaging and user-centric dark mode theme, offering users an enjoyable experience when navigating the Sunbird-Ed portal and mobile application in reduced lighting scenarios.
Last updated