search

Jean-Tinland / simple-bar

A yabai status bar widget for Übersicht
https://www.jeantinland.com/toolbox/simple-bar
MIT License
1.19k stars 127 forks source link

Change font and other colors #127

Closed spwx closed 3 years ago

spwx commented 3 years ago

Hello, I'm trying to customize this wonderful bar.

How do you change the font color? How do you change the active workspace colors?

I've tried changing every color in Theme.js with no luck. Below is what I understand so far.

export const Theme = {
  main: '#282828',     // background for settings
  mainAlt: '#FF0000',  // ?
  minor: '#FF0000',    // ?
  minor: '#3c3836',    // background for buttons
  accent: '#FF0000',   // ?
  red: '#cc241d',
  green: '#98971a',
  yellow: '#d79921',
  orange: '#d65d0e',
  blue: '#458588',
  magenta: '#b16286',
  cyan: '#689d6a',
  background: '#282828',  // bar background
  lightGrey: 'rgba(0, 0, 0, 0.05)',
  font: 'JetBrains Mono, monospace',
  lightShadow: '0 5px 10px rgba(0, 0, 0, 0.24)',   // bottom shadow for buttons
  mediumShadow: '0 8px 30px rgba(0, 0, 0, 0.24)',  // ?
  largeShadow: '0 30px 60px rgba(0, 0, 0, 0.24)',  // ?
  easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
}
Jean-Tinland commented 3 years ago

This is indeed a bit messy and as of now there isn't any way to change the font colour globally.

I'm planing to improve this theme by cleaning it up a bit and by adding more variables.

I'll get back to you.

Jean-Tinland commented 3 years ago

It may take a bit more time than I estimated. I'm currently revamping almost everything.

When I'm done you'll find a new settings section which will allow you to customise every theme variable (font, colors, radiuses, margins, icons, etc...).

I'll keep you updated here.

Jean-Tinland commented 3 years ago

I just pushed an update that should answser your needs!

You can now add new themes and customize everything more easily. As I tried to automate a lot of things, there may be some elements impossible to specificaly change. You may need to add some override styles in the custom-styles.js file.

Let me know if that suits you or if you need help with anything.

spwx commented 3 years ago

Awesome!!! Thank you!

Here is my Gruvbox config:

export const Gruvbox = {
  name: 'Gruvbox',
  kind: 'dark',
  main: '#282828',    // background
  mainAlt: '#ff0000', // ???
  minor: '#3c3836',   // workspace buttons
  red: '#cc241d',
  green: '#98971a',
  yellow: '#d79921',
  orange: '#d65d0e',
  blue: '#458588',
  magenta: '#b16286',
  cyan: '#689d6a',
  black: '#282828',   // tips box bg
  white: '#ebdbb2',   // tips box fg
  foreground: '#ebdbb2', // window title font & active workspace bg
  transparentDark: 'rgba(0, 0, 0, 0.05)',
  defaultFont: 'JetBrains Mono, monospace',
  barHeight: '28px',
  barRadius: '3px',
  barInnerMargin: '3px',
  itemRadius: '2px',
  itemInnerMargin: '3px 7px',
  itemOuterMargin: '0 0 0 5px',
  hoverRing: '0 0 0 2px rgba(255, 255, 255, 0.75)',
  focusRing: '0 0 0 2px rgb(255, 255, 255)',
  lightShadow: '0 5px 10px rgba(0, 0, 0, 0.24)',
  transitionEasing: 'cubic-bezier(0.4, 0, 0.2, 1)',
  clickEffect: 'rgba(255, 255, 255, 0.3)'
}
Jean-Tinland commented 3 years ago

That's really nice! I directly implemented your Gruvbox theme in master :)

Let me know if you are okay with that!

spwx commented 3 years ago

Sweet! Thank you again! I really love this Project!