how to add custom styles?

[michael-land]

The font size of hyperline is too small on a large screen. I tried

  hyperline: {                                                                 
      fontSize: 18,
      plugins: [        
          "memory", "battery", "cpu", "network",
      ]                                                                          
    }, 

but it doesn't work. any ideas?

[liloow]

Here are 2 ways you could tackle this problem:

Easy and fast solution

PROS :

1. Takes less than a minute to set up
2. Doesn't require maintenance on plugins update

Via .hyper.js and its css property

module.exports = {
  config: {
    // ... 

    // custom CSS to embed in the main window
    css: `.line {
      font-size: 1rem;
    }`,

    // ... 
  }
}

CONS :

1. Since all plugins are automatically updated by hyper, if the target class changes, the fix will break and will necessitate a manual update.
2. It is set in the global scope while it targets only an smaller (and properly scoped itself) subpart. Therefore, you could get unexpected side effects if the class is used elsewhere.

Using localplugins

PROS :

1. Those plugins arent automatically updated, so it will never break.
2. You are using the right scope and therefore killing all side effects

NB : This a a fortune fix, the problem should be treated at its source

via ~/.hyper-plugins/local/hyperline/dist/hyperline.js

//  HYPERLINE CODE START 
//  ...
//   HYPERLINE CODE END

global.onload = () => { // THIS IS AN EXAMPLE
  let arr = ["red", "yellow", "green", "orange", "blue", "cyan"];
  let element = document.querySelectorAll("#hyper > div:nth-child(3) > div")[0];
   // The [][0] case is voluntarly not treated so it raises an error meaning that the selector needs a refresher
  element.style.display = "flex";
  element.style.justifyContent = "space-between";
  element.style.paddingTop = '3px' // Prevent the last line of the terminal to underlap the plugin when splitting 
   Array.from(element.children).forEach((el, i) => {
    el.style.color = arr[i];
    el.style.stroke = arr[i];
  });
};

CONS :

1. Requires manual intervention to keep module up to date

[michael-land]

That make sense. Thank you.