MojECE.IdentityTheme
React/Chakra-UI theme for Keycloak
Overview:
The Keycloak Theme is a custom theme for the Keycloak Open Source Identity and Access Management system. It is based on the CI/CD and Template keycloakify-demo-app and look_and_feel branch. The theme uses the keycloakify project setup inspiration from onyxia-web.
Features:
- React design library Chakra-UI used instead of HTML/SCSS in templates
- Keycloak default classes removed from HTML templates
- Two-column design layout
- Support for external font resources
- Support for Terms and conditions
- Development flow with mock context variable
- Dark Mode support
- Advanced pages configuration
- Customization of Keycloak theme
Summary:
The Keycloak Theme is a custom theme for the Keycloak Open Source Identity and Access Management system. It introduces several key features such as a new design library, layout changes, support for fonts and terms and conditions, development flow with mock context, dark mode support, and customization options. To install the theme, follow the provided instructions and make sure to update the version number and perform the necessary post-build changes if needed. The theme is released under the MIT License, except for non-keycloak media assets and artwork which are copyrighted by 3 Tav d.o.o.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Chakra UI
Chakra UI is a popular open-source React component library that provides a set of accessible and customizable UI components to help developers create modern web applications.
- Framer Motion
Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.