🧒
Sunbird ED
new release -7.0.0 (Jun 2024)Askdot
latest
latest
  • Learn
    • Overview
    • Capabilities
      • Learning Apps
      • Asset Sourcing
      • Organised Collections
      • Discover Content - Digital & Phygital
      • User Engagement
      • Rich and diverse content
      • Versatile Question Bank
      • Observability
      • Launch Course
      • Verifiable Credentials
      • Multi-Channel Chatbot
      • Targeted Programs
      • Manage Learn
        • Overview
        • What is an entity?
        • What is a Program?
        • What is a Project?
        • What is Observation?
        • What is a Survey?
        • What is Observation as a task inside a Project?
      • Product and Developer's Guide
        • Learning apps
          • Workflows
            • Onboarding of Users
            • Discovery of Content
            • Play content
            • Track progress and Earn credentials
            • Interacting / Collaborating
        • Asset Sourcing
        • Organised Collections
        • Discover Content - Digital & Phygital
        • User Engagement
        • Rich and Diverse Content
        • Versatile Question Bank
        • Observability
        • Launch Courses
        • Verifiable Credentials
        • Multi-Channel Chatbot
        • Targeted Programs
        • Manage Learn
          • Overview
          • Component Diagram
          • ML Core Service
          • ML Project Service
          • ML Survey Service
          • ML Report Service
          • ML Analytics Service
    • Tech Overview
      • Design Principles
      • Technical Architecture Diagram
      • Tech Stack
    • Adopters
      • DIKSHA
    • Roadmap
      • Plan for 2025-2026
      • Releases and Dates
  • USE
    • Getting Started - Setup
      • Pre-requisites
      • Install
      • Functional Configurations
    • Developer Guide - Overview
      • Architecture - Component Diagram
      • System Requirements
        • Learning Apps
      • Install Locally
        • SunbirdED Mobile
        • SunbirdED Portal
      • Easy Installer
        • Adding Support for a New Cloud Provider
      • Configuration
        • SunbirdEd Portal
        • Sunbird Mobile
      • Portal
        • Component Diagram
        • I18N (Resource Bundles)
        • Branding Name and Logo Configuration Guide
      • Desktop
        • Component Diagram
      • Mobile
        • Component Diagram
        • sunbird-mobile-sdk
        • Sunbird-mobile-app plugins
        • Configurations to setup mobile app
        • I18N (Resource Bundles)
      • Form service
        • Component Diagram
        • Data model
        • API's
      • Manage Learn
        • ML Core Service
          • Overview
          • User Flow Diagram
          • Component Diagram
          • Data Model
          • Folder Structure
          • API's
          • Deployment Overview
          • Local Service Setup Guide
        • ML Project Service
          • Overview
          • User Flow Diagram
          • Component Diagram
          • Data Model
          • Folder Structure
          • API's
          • Deployment Overview
          • Local Service Setup Guide
        • ML Survey Service
          • Overview
          • User Flow Diagram
          • Component Diagram
          • Data Model
          • Folder Structure
          • API's
          • Deployment Overview
          • Local Service Setup Guide
        • ML Report Service
          • Overview
          • User Flow Diagram
          • Component Diagram
          • Data Model
          • Folder Structure
          • API's
          • Deployment Overview
          • Local Service Setup Guide
        • ML Analytics Service
          • Overview
          • Component Diagram
          • Data Model
          • Setup Guide
            • ENV Variables ( Config.ini)
          • Ingestions
          • Folder Structure
          • Report creation and Updation Scripts
          • Deployment Overview
      • UI (User interface)
        • Angular Material
          • Overview
          • Installation
          • Material Icons
          • Components Usage
          • Theming
          • Theme Setup
          • Customazion
            • Palette
            • Theme
            • Accessibility
            • Colors
            • Typography
            • Components
              • Buttons
              • CC Components
        • Component Style Guide Version 1
          • Accordion
          • Buttons
          • Cards
          • Forms
          • Grid & Layout
          • Labels
          • Modals
          • Pagination
          • Rating
          • Search Box
          • Select Box
          • Tables
          • Tabs
          • Toast messages
          • Tooltip
          • Typography
        • SB-Styles: A Comprehensive Design Resource
        • SB-Themes Repository: Unifying Design Across Platforms
          • Classical Theme in Sunbird-Ed portal
          • Joyful Theme in Sunbird-Ed portal:
      • Reference Apps
        • Independent Libraries
          • Common Consumption Components
          • SunbirdEd Forms
          • Sunbird Client Services
          • Sunbird Styles
          • Sunbird Themes
          • Sunbird Tag Manager
      • API's
      • CSP changes
      • Cloud-Store SDK Maven Deployment Guide
      • Other
        • Building Images
        • Minimal forms
        • Telemetry
          • Trackable Collection
        • Platform
        • Learning Apps
    • Learn More
      • Dependencies
      • Specifications
        • SOFIE
        • SOFIE Implementation
  • SB Ed Releases
    • Sunbird v7.6.0 (Latest)
    • Sunbird v7.5.1
    • Release - SB 7.5
    • SB Release - 7.0.0
      • Release notes
      • Updating Sunbird Releases
        • 6.0.1 to 7.0.0
      • Release Calendar 7.0.0
      • Demo of released items
  • Engage
    • Discuss
    • Contribute to Sunbird ED
    • Extend / Contribute to Sunbird
    • Issue tracker/ Create Issue
  • Misc
    • Templates
      • Upgrade Sunbird release document
      • Release Notes
    • Misc Pages
      • Portal - Manage Learn - Reports
      • App - Manage Learn - component diagram
        • Projects
        • Observation & Survey
        • Program
      • Portal - Manage Learn - component diagram
      • Mobile form configurations
      • Content Indexing Flow
      • What are multiple databases used for
      • Course completion, reports and certificate issue
      • How to access Flink UI
      • What are all the flink jobs for
      • How does data flow into Druid
      • Minimal build properties
      • Delete User Functionality
    • Archived
      • High Level Capabilities
      • Workflows
      • Where Sunbird ED helps you
      • ED - Mobile App (going to archive)
        • 4.10.3 to 5.0.0
        • 5.0.0 to 5.1.0
      • Setting up Sunbird ED
      • Developer Documentation
      • API Reference Documentation
      • Detailed Documentation
      • Source Code
      • Actors & Actions
      • Detailed Capabilities
      • Data
      • Terminology
      • 5.1.0-hotfix (OCI )
      • Getting started (v7)
        • Deployment Overview
        • Pre-requisites
        • Install
          • Provision Cloud Infrastructure
          • Setup Jenkins
          • Update Ansible Variables
          • Build, Provision and Deploy
          • Functional Configurations
Powered by GitBook
On this page
  1. USE
  2. Developer Guide - Overview
  3. UI (User interface)
  4. SB-Themes Repository: Unifying Design Across Platforms

Classical Theme in Sunbird-Ed portal

The Classical Theme, featured in SB-Themes, embodies a timeless and conventional visual style. This theme offers users a classic aesthetic that exudes elegance and simplicity.

With carefully selected color palettes, typography, and design elements, the Classical Theme provides a familiar and sophisticated user experience, catering to those who appreciate a traditional design approach.

Color Palette in SB-Themes:

SB-Themes embraces a thoughtfully crafted color palette to enhance the visual experience in the Sunbird-Ed portal and mobile application. Key color variables include:

  • Primary Color: #024f9d - Used for elements like buttons, headings, table titles, links, and toggles.

  • Secondary Color: #008840 - Employed for various interface elements, including buttons and hover states.

  • Tertiary Color (Warning): #e55a28 - Reserved for warning-related elements such as icons, labels, and notifications.

  • Red Color (Error/Danger): #ff6979 - Signifying error or danger, utilized for elements like icons, labels, and notifications.

  • Gray Colors: A range of gray shades (e.g., #666666, #999999, #CCCCCC) serves diverse purposes, including disabled buttons, text, placeholders, and subheadings.

These color variables, thoughtfully chosen and organized, contribute to a harmonious and visually appealing design within the SB-Themes repository, offering a consistent and polished user experience.

The core color scheme in SB-Themes is established within the :root element, serving as the base theme colors that are loaded when the portal initializes. These meticulously chosen color variables, such as primary, secondary, tertiary, red, and various shades of gray, form the foundation of the design palette. They ensure a consistent and visually appealing user experience throughout the Sunbird-Ed portal and mobile application.

:root {
  // base colors
  --blue: #024f9d;
  --green: #008840;
  --orange: #e55a28;
  --red: #ff4558;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --yellow: #ffc107;
  --teal: #20c997;
  --cyan: #17a2b8;
  --black: #000000;
  --white: #ffffff;
  --accessibility-red: #A30010;
  // gray colors shades
  --gray-hs: 0, 0%;
  --gray: hsl(var(--gray-hs), 20%);
  --gray-0: hsl(var(--gray-hs), 95%); // place holder active bg #F2F2F2
  --gray-100: hsl(var(--gray-hs), 80%); // disable btn bg, icon color #CCCCCC
  --gray-200: hsl(var(--gray-hs), 60%); // disable text, place holder text #999999
  --gray-300: hsl(var(--gray-hs), 59%); // sub heading 2 #969696
  --gray-400: hsl(var(--gray-hs), 40%); // sub heading #666666
  --gray-800: var(--gray); // text color #333333

  // basetheme
  --primary-color: #024f9d;
  --secondary-color: #008840;
  --tertiary-color: #e55a28;

  // primary colors
  --primary-0: #f3f7fa; // bg
  --primary-100: #edf4f9; // default button bg
  --primary-200: #80a7ce; // divider
  --primary-250: #d3e7f4; //pagination bg color
  --primary-300: #7ab4ee; // outline, focus fields
  --primary-400: var(--primary-color); // button bg, heading, table titles, links, toggles
  --primary-600: #005391; // on press
  --primary-800: #002e50; // hover
  --primary-color-contrast: #fff;
  --primary-color-contrast-rgb: rgb(255, 255, 255);
  --primary-color-shade: var(--primary-800);
  --primary-color-tint: var(--primary-200);

  // secondary colors
  --secondary-0: #e1ffdf; // toast bg, label
  --secondary-100: #00c786; // button bg bg, toast
  --secondary-200: #07bc81; // button bg
  --secondary-400: var(--secondary-color); // hover

  // tertiary colors
  --tertiary-0: #feedd7; // toast bg, label
  --tertiary-100: #ffa11d; // buttong bg, toast
  --tertiary-400: var(--tertiary-color); // icon, label, notification bg

  // red colors
  --red-0: #fbccd1; // toast bg
  --red-100: #ff6979; // buttong bg, toast
  --red-400: var(--red); // icon color, lable, notification
}

In the SB-Themes repository, the default theme is defined with precision. Key color variables within the default theme include:

  • Primary Theme Color: var(--primary-color) - Serving as the primary theme color, influencing various design elements.

  • HSL and RGB Values: hsl(210, 97%) and rgb(2, 79, 156) - Representing the HSL and RGB color notations for the primary theme color.

  • Contrast and Contrast RGB: #fff and rgb(255, 255, 255) - Ensuring high contrast for legibility and visual appeal.

  • Shade and Tint: hsl(var(--primary-theme-hsl), 56%) and hsl(var(--primary-theme-hsl), 76%) - Offering shading and tinting effects to create depth and dimension.

These meticulously defined color variables within the default theme contribute to a cohesive and aesthetically pleasing design, enhancing the user experience across the Sunbird-Ed portal and mobile application.

html[data-theme='default'] {
    --primary-theme: var(--primary-color);
    --primary-theme-hsl: 210, 97%;
    --primary-theme-rgb: rgb(2, 79, 156);
    --primary-theme-contrast: #fff;
    --primary-theme-contrast-rgb: rgb(255, 255, 255);
    --primary-theme-shade: hsl(var(--primary-theme-hsl), 56%);
    --primary-theme-tint: hsl(var(--primary-theme-hsl), 76%);
}

The visual representation of this theme inside portal comes like this

Landing page
Modal