Custom Theme

Table of Contents

Changing the Logo
Link List on Home Page
Custom Colors
- Adding Custom Color Variables
- What Not to Do
Advanced Customization

You can customize the color scheme of Teregrep to match your own color palette or brand identity. You can also change the logo.

Changing the Logo

The logo in the Navbar can be changed in navbar.html (src/components/navbar/navbar.html).

<a class="navbar-brand navbar-logo" href="#/">
    <img src="../../assets/images/teragrep.png" height="35px" alt="Teragrep" />
    <!-- Change src url to match with your image file name -->
</a>

The recommended height for the logo is 35 pixels.

Link List on Home Page

You can change the link list located on home page by modifying home.html (src/app/home/home.html).

<div class="sidebar">
    <h4>Help</h4>
    <p>
        <i class="fas fa-book"></i>
        <a target="_blank" href="https://docs.teragrep.com">
            Documentation
        </a>
        <br />
        <i class="far fa-dot-circle"></i>
        <a target="_blank" href="https://github.com/teragrep/teragrep/issues">
            Issues
        </a>
        <br />
        <i class="fas fa-headset"></i>
        <a target="_blank" href="https://teragrep.com/en/company/contact-us">
            IT Support
        </a>
    </p>
    <p>
        <i class="fas fa-globe"></i>
        <a target="_blank" href="https://teragrep.com">
            Website
        </a>
        <br />
        <i class="fab fa-github"></i>
        <a target="_blank" href="https://github.com/teragrep/teragrep">
            Github
        </a>
    </p>
</div>

Custom Colors

You can modify the color scheme of Teragrep with CSS variables. The list of color variables is located in colors.css (src/assets/looknfeel/colors.css).

By default, the list of colors looks like this:

/* Primary Brand Color */
:root {
  --primary-100: #EBF4FF;
  --primary-200: #C3DAFE;
  --primary-300: #A3BFFA;
  --primary-400: #7F9CF5;
  --primary-500: #6A66EA;
  --primary-600: #5A4CC2;
  --primary-700: #3F31A6;
  --primary-800: #332981;
  --primary-900: #3C366B;
}

/* Secondary Brand Color */
:root {
  --secondary-100: #FAF5FF;
  --secondary-200: #E9D8FD;
  --secondary-300: #CCB8F3;
  --secondary-400: #B794F4;
  --secondary-500: #9F7AEA;
  --secondary-600: #805AD5;
  --secondary-700: #553C9A;
}

/* Tertiary Brand Color */
:root {
  --tertiary-100: #E6FFFA;
  --tertiary-200: #B2F5EA;
  --tertiary-300: #70EDD9;
  --tertiary-400: #4FD1C5;
  --tertiary-500: #38B2AC;
  --tertiary-600: #319795;
  --tertiary-700: #285E61;
}

/* Danger */
:root {
  --danger-100: #FFF5F5;
  --danger-200: #FEE6E6;
  --danger-300: #FED7D7;
  --danger-400: #FEB2B2;
  --danger-500: #FC8181;
  --danger-600: #F56565;
  --danger-700: #9B2C2C;
  --danger-800: #742A2A;
}

/* Warning */
:root {
  --warning-100: #FFFFF0;
  --warning-200: #FEFCBF;
  --warning-300: #FDE68A;
  --warning-400: #ECC94B;
  --warning-500: #ED8936;
  --warning-600: #DD6B20;
  --warning-700: #7B341E;
}

/* Greys */
:root {
  --grey-000: #FFFFFF;
  --grey-100: #F7FAFC;
  --grey-200: #EDF2F7;
  --grey-300: #E2E8F0;
  --grey-400: #CBD5E0;
  --grey-500: #A0AEC0;
  --grey-600: #718096;
  --grey-700: #4A5568;
  --grey-800: #2D3748;
  --grey-900: #1A202C;
  --dm-grey-100: #F7FAFC;
  --dm-grey-200: #C3DAFE;
  --dm-grey-300: #B8C5F7;
  --dm-grey-400: #6B79AB;
  --dm-grey-500: #4E5C8F;
  --dm-grey-600: #394570;
  --dm-grey-700: #2D385E;
  --dm-grey-800: #212A4B;
  --dm-grey-900: #161C33;
}

Primary, secondary and tertiary colors are for primary brand colors. "Danger" and "Warning" are for alerts. "Greys" contain greys for both default and dark themes.

The number in a color’s name indicates its shade. For example, --primary-100 is the lightest shade in the primary color scale, while --primary-900 is the darkest shade.

Adding Custom Color Variables

If you wish, you can add more color variables in colors.css. Use the following to add your own color variables:

:root {
    --your-color-name: [HEX or RGB value];
}

To put it in use, switch your color variable in the place you want by using var(--custom-color), like this:

body {
  background: var(--custom-grey-100);
  padding-top: 48px;
  color: var(--custom-grey-900);
  font: 400 16px 'Hind', sans-serif;
  &.dark-mode {
    color: var(--custom-dm-grey-100);
    background: var(--custom-dm-grey-800);
  }
}

If you modify any of the Less files of Teragrep, remember to compile the style.less file into style.css before publishing your changes. See Modifying Less and CSS files for more information.

What Not to Do

It is not recommendable to replace color variables with HEX or RGB values in the Less and CSS files, like this:

a {
  color: #3F31A6;
  text-decoration: none;
  &:hover {
    color: #3C366B;
  }
}

The color variables ensure that the design stays consistent, and they make it easier to modify the color scheme in one file.

Advanced Customization

Teragrep is themed by using Less. Read more about Less here.

List of Less and CSS files

The Less and CSS lists are work in process.

Table 1. All CSS Files
File name	Path
style.css	src/assets/styles/looknfeel/style.css
colors.css	src/assets/styles/looknfeel/colors.css
dynamic-forms.css	src/app/notebook/dynamic-forms/dynamic-forms.css
expand-collapse.css	src/components/navbar/expand-collapse/expand-collapse.css
job.css	src/app/jobmanager/job/job.css
node.css	src/app/cluster/node.css
note-import.css	src/components/note-import/note-import.css
printMode.css	src/assets/styles/looknfeel/printMode.css
revisions-comparator.css	src/app/notebook/revisions-comparator/revisions-comparator.css

Table 2. All Less Files
File name	Path
cluster.less	src/app/cluster/cluster.less
configuration.less	src/app/configuration/configuration.less
credential.less	src/app/credential/credential.less
helium.less	src/app/helium/helium.less
interpreter.less	src/app/interpreter/interpreter.less
jobmanager.less	src/app/jobmanager/jobmanager.less
home.less	src/app/home/home.less
notebook.less	src/app/notebook/notebook.less
paragraph.less	src/app/notebook/paragraph/paragraph.less
result.less	src/app/notebook/paragraph/result/result.less
display-table.less	src/app/notebook/paragraph/result/display-table.less
search.less	src/app/search/search.less
navbar.less	src/components/navbar/navbar.less

Modifying Less and CSS files

You can modify all Less and CSS files except style.css.

Modifications in CSS files will show up immediately. Modifications in Less files will not do the same; to see the changes, you will first need to compile style.less into style.css.

Use the following command to compile style.less:

lessc style.less style.css

Adding a New Less or CSS File

If you want to add your own custom Less or CSS file, the recommended location for it is the /looknfeel directory (src/assets/styles/looknfeel).

If your custom styling file is a CSS file, you will need to add the file in css.js so that the modifications will show up.

For example:

import './assets/styles/looknfeel/custom-css.css';

If your custom styling file is a Less file, add the following line in style.less:

@import "custom-less.less";

After that, compile style.less into style.css as stated in Modifying Less and CSS files.