🧒
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
  • Primary Color
  • Accent Color
  • Warn color
  • Info Color
  • Success Color
  • Error Color
  1. USE
  2. Developer Guide - Overview
  3. UI (User interface)
  4. Angular Material
  5. Customazion

Colors

In Angular Material, colors play a significant role in defining the visual style and theming of your web application. Angular Material provides a predefined color palette system to help you maintain consistent and visually appealing color schemes throughout your application.

We've created a "@mixin" for managing colors, named "theme-var-colors" within the "_colors.scss" file located in the "mat-themes" folder. This mixin has been included in the "themes.scss" file.

_colors.scss
@mixin theme-var-colors($theme) {
    //code will come here
}

All the mixins need to be included in the "app-themes" section within the "themes.scss" file.

themes.scss
 @mixin app-themes($theme) {
     @include theme-var-colors($theme);
 }

Primary Color

The primary color is the main color used for the majority of your application's elements, such as headers, buttons, and backgrounds.

  • mat-primary (default): A predefined color palette that typically represents your application's primary brand color.

  • Custom colors: You can define your own custom primary color palette by specifying your preferred color in CSS or through Angular's theming system.

$primary: map.get($color-config, 'primary');
$color-primary: mat.get-color-from-palette($primary);
--color-primary: #{$color-primary};

The code snippet you provided can be explained as follows:

$primary: map.get($color-config, 'primary');

  • This line appears to be assigning a value to the variable $primary.

  • map.get() is likely a function used to retrieve a value from a map or dictionary.

  • It retrieves the value associated with the key 'primary' from a map named $color-config.

  • The value retrieved is assumed to be a color or a reference to a color.

$color-primary: mat.get-color-from-palette($primary);

  • This line assigns a value to the variable $color-primary.

  • mat.get-color-from-palette() is likely a custom or library function used to extract a color from a color palette.

  • It takes the previously assigned $primary value (presumably a color or color reference) and extracts the actual color value.

--color-primary: #{$color-primary};

  • This line sets a CSS custom property (also known as a CSS variable) named --color-primary.

  • The value of this custom property is assigned the value stored in the $color-primary variable.

  • The #{$color-primary} syntax is used to interpolate the value of $color-primary into the CSS custom property.

Primary color variations

  $color-primary-50: mat.get-color-from-palette($primary, 50);
  $color-primary-100: mat.get-color-from-palette($primary, 100);
  $color-primary-200: mat.get-color-from-palette($primary, 200);
  $color-primary-300: mat.get-color-from-palette($primary, 300);
  $color-primary-400: mat.get-color-from-palette($primary, 400);
  $color-primary-500: mat.get-color-from-palette($primary, 500);
  $color-primary-600: mat.get-color-from-palette($primary, 600);
  $color-primary-700: mat.get-color-from-palette($primary, 700);
  $color-primary-800: mat.get-color-from-palette($primary, 800);
  $color-primary-900: mat.get-color-from-palette($primary, 900);
  --color-primary-50: #{$color-primary-50};
  --color-primary-100: #{$color-primary-100};
  --color-primary-200: #{$color-primary-200};
  --color-primary-300: #{$color-primary-300};
  --color-primary-400: #{$color-primary-400};
  --color-primary-500: #{$color-primary-500};
  --color-primary-600: #{$color-primary-600};
  --color-primary-700: #{$color-primary-700};
  --color-primary-800: #{$color-primary-800};
  --color-primary-900: #{$color-primary-900};

Accent Color

The accent color is used to highlight certain UI elements and add visual interest to your application. It complements the primary color.

  • mat-accent: A predefined color palette that typically represents your application's primary brand color.

  • Custom colors: You can define your own custom primary color palette by specifying your preferred color in CSS or through Angular's theming system.

$accent: map.get($color-config, 'accent');
$color-accent: mat.get-color-from-palette($accent);
--color-accent: #{$color-accent};

Accent color variations:

  $color-accent-50: mat.get-color-from-palette($accent, 50);
  $color-accent-100: mat.get-color-from-palette($accent, 100);
  $color-accent-200: mat.get-color-from-palette($accent, 200);
  $color-accent-200-contrast: mat.get-color-from-palette($accent, 200-contrast);
  $color-accent-300: mat.get-color-from-palette($accent, 300);
  $color-accent-400: mat.get-color-from-palette($accent, 400);
  $color-accent-500: mat.get-color-from-palette($accent, 500);
  $color-accent-600: mat.get-color-from-palette($accent, 600);
  $color-accent-700: mat.get-color-from-palette($accent, 700);
  $color-accent-800: mat.get-color-from-palette($accent, 800);
  $color-accent-900: mat.get-color-from-palette($accent, 900);
  --color-accent-50: #{$color-accent-50};
  --color-accent-100: #{$color-accent-100};
  --color-accent-200: #{$color-accent-200};
  --color-accent-200-contrast: #{$color-accent-200-contrast};
  --color-accent-300: #{$color-accent-300};
  --color-accent-400: #{$color-accent-400};
  --color-accent-500: #{$color-accent-500};
  --color-accent-600: #{$color-accent-600};
  --color-accent-700: #{$color-accent-700};
  --color-accent-800: #{$color-accent-800};
  --color-accent-900: #{$color-accent-900};

Warn color

The warn color is used to indicate errors or warnings in your application.

  • mat-warn: A predefined color palette that typically represents your application's primary brand color.

  • Custom colors: You can define your own custom primary color palette by specifying your preferred color in CSS or through Angular's theming system.

$warn: map.get($color-config, 'warn');
$color-warn: mat.get-color-from-palette($warn);
--color-warn: #{$color-warn};

Warn color variations:

$color-warn-50:  mat.get-color-from-palette($warn, 50);
  $color-warn-100: mat.get-color-from-palette($warn, 100);
  $color-warn-200: mat.get-color-from-palette($warn, 200);
  $color-warn-300: mat.get-color-from-palette($warn, 300);
  $color-warn-400: mat.get-color-from-palette($warn, 400);
  $color-warn-500: mat.get-color-from-palette($warn, 500);
  --color-warn-50:  #{$color-warn-50};
  --color-warn-100: #{$color-warn-100};
  --color-warn-200: #{$color-warn-200};
  --color-warn-300: #{$color-warn-300};
  --color-warn-400: #{$color-warn-400};
  --color-warn-500: #{$color-warn-500};

Info Color

This color is used to to convey informational messages or elements in a user interface

$info: mat.define-palette(mat.$blue-palette);
$color-info: mat.get-color-from-palette($info);
--color-info: #{$color-info};

Success Color

This color is often used to indicate that a task or action has been completed successfully or that a positive status or outcome has been achieved.

$success: mat.define-palette(mat.$green-palette);
$color-success: mat.get-color-from-palette($success);
--color-success: #{$color-success};

Success color variations:

$color-success-50:  mat.get-color-from-palette($success, 50);
  $color-success-100: mat.get-color-from-palette($success, 100);
  $color-success-200: mat.get-color-from-palette($success, 200);
  $color-success-300: mat.get-color-from-palette($success, 300);
  $color-success-400: mat.get-color-from-palette($success, 400);
  $color-success-500: mat.get-color-from-palette($success, 500);
  --color-success-50:  #{$color-success-50};
  --color-success-100: #{$color-success-100};
  --color-success-200: #{$color-success-200};
  --color-success-300: #{$color-success-300};
  --color-success-400: #{$color-success-400};
  --color-success-500: #{$color-success-500};

Error Color

This color is used to indicate that an error or problem has occurred. It is a crucial visual cue that helps users quickly recognize and respond to issues within an application. The choice of color for an error message or error-related elements can vary, but red is a commonly used color for this purpose in many design systems.

$error: mat.define-palette(mat.$orange-palette);
$color-error: mat.get-color-from-palette($error);
--color-error: #{$color-error};

Error color variations:

  $color-error-50:  mat.get-color-from-palette($error, 50);
  $color-error-100: mat.get-color-from-palette($error, 100);
  $color-error-200: mat.get-color-from-palette($error, 200);
  $color-error-300: mat.get-color-from-palette($error, 300);
  $color-error-400: mat.get-color-from-palette($error, 400);
  $color-error-500: mat.get-color-from-palette($error, 500);
  --color-error-50:  #{$color-error-50};
  --color-error-100: #{$color-error-100};
  --color-error-200: #{$color-error-200};
  --color-error-300: #{$color-error-300};
  --color-error-400: #{$color-error-400};
  --color-error-500: #{$color-error-500};