Custom Theme

You can customize the color scheme of Teregrep to match your own color palette or brand identity. You can also change 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.

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.