Styles

Variables

The following color variables are available in our palette located in the src/styles/_vars.scss folder:

• primary
• secondary
• success
• danger
• warning
• info

The mentioned color variables have light and dark theme variance:

• primary_dark_alternate
• primary_light_alternate

We also offer balanced dark and light color palettes:

• dark_theme-[+5 shades]
• light_theme-[+5 shades]

Overriding variables

You can easily override any of our custom variables.

$primary: 85, 132, 255; 
$primary: 134, 104, 217; 

$secondary_dark_alternate: 59, 82, 111; 
$secondary_dark_alternate: 20, 32, 46; 

$dark_theme-100: 78, 86, 109; 
$dark_theme-100: 109, 118, 145; 

Add variables

You can easily add any color you need.

$tertiary: 85, 132, 255; 

@layer base {
  :root {
    --tertiary: #{$tertiary};
    /* ... */ 
  }
}

$colors_names: (
        "tertiary": $tertiary,
  /* ... */
)

Mixins

Mixin is a code block which allows you to write your styles in it and use it throughout the whole project.

We have declared our template mixins inside src/@core/scss folder.

Breakpoints

One of the available mixins is _breakPoint.scss which allows you to specify different styles for multiple breakpoints:

// Custom breakPoints for responsive design
@mixin respond($breakpoint) {
  @if $breakpoint == md-mobile {
    @media only screen and (min-width: 380px) {
      @content;
    }
  }
  @if $breakpoint == lg-mobile {
    @media only screen and (min-width: 425px) {
      @content;
    }
  }

  @if $breakpoint == sm-tablet {
    @media only screen and (min-width: 600px) {
      @content;
    }
  }
  /* ... */
}

Animation

Animating Route Transitions

Onomis includes useful animation properties that allow you to animate transitions between views when the route changes.

Here's the list of animation values available for route transitions:

• fade-in
• slide-right
• slide-left
• slide-up

To learn more please refer to Route Transition

Animating Component Transitions

Here’s a list of animation values that you can use as props for EComponents:

• fade-in
• expand
• component-slide-up-full
• component-slide-right-full
• component-slide-left-full
• component-slide-down-full
• component-slide-up
• component-slide-right
• component-slide-left
• component-slide-down
• component-slide-fade
• component-pop-in
• component-pop-out

Using the component-slide-[position] class without the -full suffix causes it to slide only for 4rem before fading out.

Typography

We've crafted custom typography CSS styles tailored specifically for Onomis inside src/@core/scss folder, utilizing the power of clamp() to create fluid, responsive text that adapts seamlessly across different screen sizes. Demo here

Note

• We’ve applied default Tailwind CSS text color utilities to the <p> tag for both light and dark themes. To override the color (e.g., with text-danger), you should either explicitly define both text-danger and dark:text-danger or use ! important. If you only specify text-danger, the change will apply to the light theme but won't affect the dark theme.

• While we use clamp() for responsive typography, we've also implemented a fallback with Tailwind's responsive utility classes for browsers that lack clamp() support. This ensures a consistent, responsive experience across all browsers

Tailwind CSS

We have used Tailwind in this project, which allows developers to rapidly build webpages using a utility-first workflow to create complex components from a constrained set of primitive utilities.

Tailwind's syntax is very basic: append to HTML or JSX elements class names that represent one or more CSS declarations.

  <h5 class="mb-2 text-2xl font-bold text-dark_theme-200 dark:text-white">
    Example of tailwind classes
 </h5>

Related: Tailwind CSS

To learn more about tailwind , please read its official documentation here.