Skip to content

Instantly share code, notes, and snippets.

@svarlamov
Created August 28, 2018 08:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save svarlamov/99cabbcdbc7dddd82bb8eaf20bb9a194 to your computer and use it in GitHub Desktop.
Save svarlamov/99cabbcdbc7dddd82bb8eaf20bb9a194 to your computer and use it in GitHub Desktop.
v1 ES colors
/* Put your variable overrides here */
$primary: #3671B6;
$lightAccent: #8E8BA3;
$darkAccent: #44638A;
$lightShade: #fafafa;
$darkShade: #1B232F;
// Misc
$pt-intent-primary: $primary;
// Menu
.pt-dark .pt-menu {
background-color: $darkShade;
}
.pt-light .pt-menu {
background-color: $lightShade;
}
.pt-menu {
height: 100%;
}
// Card
.pt-light .pt-card {
background-color: $lightShade;
}
// Typography
$pt-text-color: $darkShade;
// Navbar
$navbar-background-color: $primary;
$dark-navbar-background-color: $darkAccent;
.pt-navbar {
color: $lightShade !important;
.pt-button {
color: $lightShade !important;
}
.pt-button[class*="pt-icon-"]::before {
color: $lightShade !important;
}
}
// Toaster
.my-toaster{
margin-top: 35px;
}
$icon-font-path: "~@blueprintjs/core/resources/icons";
@import "../../../node_modules/@blueprintjs/core/src/blueprint";
@import "../../../node_modules/@blueprintjs/labs/src/blueprint-labs";
import { ITheme } from 'typings/client'
export const darkTheme: ITheme = {
background: '#1B232F',
text: '#E6E7E2',
primary: '#44638A',
secondary: '#3671B6',
secondaryInverse: '#8E8BA3'
}
export const lightTheme: ITheme = {
background: '#FFFFFF',
text: '#1B232F',
primary: '#44638A',
secondary: '#8E8BA3',
secondaryInverse: '#3671B6'
}
@LanderMuruaga
Copy link

Updated colors, but I don't get the logic of this colors...
This is what I found, but dont really know if they are ok. Basically because both archives are using different colos

/* For theme.scss */

$primary: #0C61E1;
$lightAccent: #D2D2D7;
$darkAccent: #0A3F8E;
$lightShade: #F4F4F4;
$darkShade: #1C222E;

/* For themeConstants.ts*/

export const lightTheme: ITheme = {
background: '#FFFFFF',
text: ‘#0A1E3C’,
primary: ‘#0C61E1’,
secondary: '#D2D2D7',
secondaryInverse: '#0A3F8E'
}

export const darkTheme: ITheme = {
background: '#1C222E',
text: ‘#FFFFFF’,
primary: '#182F52',
secondary: '#2B303C',
secondaryInverse: '#616570'
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment