Skip to content

Instantly share code, notes, and snippets.

@noob-master147
Created November 9, 2021 06:22
Show Gist options
  • Save noob-master147/77bb971199388b6f9447e1d5759d1154 to your computer and use it in GitHub Desktop.
Save noob-master147/77bb971199388b6f9447e1d5759d1154 to your computer and use it in GitHub Desktop.
variables.scss
\:root
// bootstrap colors
--textColor: #212529
--light : #f8f9fa
--blue : #007bff
--hover-blue : #1caaff
--white : #fff
--light-blue : #E5F2FF
--dark-blue : #205493
--very-dark-blue : #083568
--very-light-blue : #f4f8fc
--midBlue : #7dbcff
--beige : #F7F3F3
--background : #f2f7fc
--black : #202020
--darkblack : #202020
--highlight : #afd2f5
--lightBorder : #e5e5e5
--table-border : #e5e5e5
--lighter-border : #e0e0e0
--border-color : #dee2e6
--secondaryBackground: #ccc
--connector-gray : #c4c4c4
--gray-background : #f8f8f8
--gray : #777777
--dropdown-gray : #d8d8d8
--dark-gray : #6c757d
--light-gray : #f0f0f0
--red : #b82b2b
--orange : #d77806
--green : #1eb942
--bright-red : #F25959
--red2 : #e23939
--new-red : #F84821
--radius : 6px
--big-radius : 12px
--learn-box-shadow : rgba(169, 194, 219, 0.12)
// Integrations color in tags
--aws : #EC6A10
--aws-color : #fff
--gcp : #1A73E8
--gcp-color : #fff
--healthchecks : #0c6131
--healthchecks-color: #fff
--apex-ping : #202020
--apex-ping-color : #fff
--uptime-robot : #4CA74C
--uptime-robot-color: #fff
--pingdom : #fff000
--pingdom-color : #181818
--sentry : #31293b
--sentry-color : #ffffff
--twilio : #f22f46
--twilio-color : #ffffff
--azure : #2665D0
--azure-color : #ffffff
--honeybadger : #EC6322
--honeybadger-color : #ffffff
--sematext : #1074BF
--sematext-color : #ffffff
--travisci : #F3EEAE
--travisci-color : #202020
--rollbar : #0F4C91
--rollbar-color : #ffffff
--needle : #D2D6FC
--needle-color : #5666EF
--webhook : #E8F1FF
--webhook-color : #0777FE
--heroku : #400099
--heroku-color : #ffffff
--datadog : #9E7CC1
--datadog-color : #ffffff
--cronitor : #5AB8D5
--cronitor-color : #202020
--bugsnag : #031347
--bugsnag-color : #ffffff
--prometheus : #E6572C
--prometheus-color : #ffffff
--grafana : #E86D21
--grafana-color : #ffffff
--influxdata : #ffffff
--influxdata-color : #202020
--instana : #5BB1AE
--instana-color : #202020
--zapier : #FF4A00
--zapier-color : #ffffff
--zapier-alert : #FFC4AC
--librato : #377DA5
--librato-color : #ffffff
--newrelic : #4B959C
--newrelic-color : #ffffff
--appsignal : #21375A
--appsignal-color : #ffffff
--checkly : #45C8F1
--checkly-color : #ffffff
--site24x7 : #7EB035
--site24x7-color : #313131
--stackify : #9CD378
--stackify-color : #202020
--scout-apm : #F05929
--scout-apm-color : #ffffff
--ohdear : #e32929
--ohdear-color : #ffffff
--email : #E8F1FF
--email-color : #0777FE
--nixstats : #5ABFEF
--nixstats-color : #ffffff
--serverdensity : #202020
--serverdensity-color: #ffffff
--raygun : #202020
--raygun-color : #ffffff
--lightstep : #559948
--lightstep-color : #ffffff
--runscope : #1B70E0
--runscope-color : #ffffff
--honeycomb : #f4b827
--honeycomb-color : #202020
--graylog : #C84B2C
--graylog-color : #ffffff
--checkmk : #77D589
--checkmk-color : #202020
--hyperping : #3757FF
--hyperping-color : #FFFFFF
--epsagon : #A5BCFF
--epsagon-color : #515050
--uptime : #4E73FE
--uptime-color : #202020
--splunk : #61A024
--splunk-color : #202020
--sumologic : #001A9A
--sumologic-color : #FFFFFF
--thousandeyes : #FB7C32
--thousandeyes-color: #202020
--loggly : #F99D1C
--loggly-color : #202020
--elastic : #02B9AD
--elastic-color : #202020
--appoptics : #F1981B
--appoptics-color : #000000
--nodeping : #F76300
--nodeping-color : #000000
--scaylr : #54767F
--scaylr-color : #ffffff
--moogsoft : #FA385D
--moogsoft-color : #000000
--appdynamics : #18212A
--appdynamics-color : #ffffff
--dynatrace : #B4DC00
--dynatrace-color : #000000
--copperegg : #D5805B
--copperegg-color : #000000
--coralogix : #69D9AE
--coralogix-color : #000000
--errorception : #F30F04
--errorception-color: #000000
--elastalert : #000000
--elastalert-color : #ffffff
--logdna : #D54158
--logdna-color : #000000
--zebrium : #007CF7
--zebrium-color : #000000
--uptimekuma : #cccccc
--uptimekuma-color : #000000
--uptimekuma : #d23730
--uptimekuma-color : #ffffff
--green-light: #EAF6F2
--beige-light: #FAF5F0
--red-pastel : #F7F3F3
--green-pastel : #F3F7F6
--purple-pastel: #F6F3F7
--yellow-pastel: #F7F7F3
--blue-pastel : #F3F4F7
--operational : #5ABB74
--partially-degraded : #FBBC05
--degraded : #EC8100
--outage : #EC8100
--critical-outage : #EA4335
--downtime : #EA4335
--planned-maintenance : #093990
$blue : #007bff
$light-blue : #E5F2FF
$very-light-blue : #f4f8fc
$darkBlue : #205493
$very-dark-blue : #083568
$midBlue : #7dbcff
$beige : #F7F3F3
$orange : #d77806
$red : #b82b2b
$red2 : #e23939
$green : #1eb942
$background : #f2f7fc
$highlight : #afd2f5
$white : #fff
$black : #202020
$dark-black : #202020
$primaryBackground : #fff
$secondaryBackground: #ccc
$placeholder-color : #899197
$blackLinkColor : #202020
$blueLinkColor : #0056b3
$linkColor : #007bff
$lineColor : #ececec
$border-color : #dee2e6
$light-border : #e5e5e5
$lighter-border : #e0e0e0
$light-gray : #f0f0f0
$dropdown-gray : #d8d8d8
$dark-gray : #6c757d
$gray-background : #f2f2f2
$gray : #6f6f6f
$radius-small : 2px
$radius : 6px
$big-radius : 12px
$new-red : #F84821
$bright-red : #F25959
body.system
@media (prefers-color-scheme: dark)
--blue: #3395FF
--background: red
--white: #242729
--black: rgba(255, 255, 255, 0.9)
--black-no-opacity: rgba(255, 255, 255)
--beige: #373C3F
// --black: #ffffff90
--textColor: #fff
--light : #2D3134
--gray: #A7A9B0
--light-gray: #474C50
// --gray-background: #A7A9B0
--gray-background: #373C3F
--highlight: --black-no-opacity
--lighter-border: #535353
--lightBorder: #363A3E
// --table-border: #535353
--table-border: #4B4C4F
--light-blue: #474C50
--dropdown-gray: #45494B
--connector-gray : #474C50
--very-light-blue: #363A3E
--border-color: #535353
--learn-box-shadow: rgb(87 88 89 / 12%)
// for full calendar
--fc-neutral-bg-color: var(--dropdown-gray)
--fc-border-color: var(--border-color)
--fc-list-event-hover-bg-color: var(--dropdown-gray)
.dark
--blue: #3395FF
--background: #202020
--white: #242729
--black: rgba(255, 255, 255, 0.9)
--black-no-opacity: rgba(255, 255, 255)
// --black: #ffffff90
--beige: #373C3F
--red-pastel : #373C3F
--green-pastel : #373C3F
--purple-pastel: #373C3F
--yellow-pastel: #373C3F
--blue-pastel : #373C3F
--green-light: #EAF6F2
--textColor: #fff
--light : #2D3134
--gray: #A7A9B0
--light-gray: #474C50
// --gray-background: #A7A9B0
--gray-background: #373C3F
--highlight: --black-no-opacity
--lighter-border: #535353
--lightBorder: #363A3E
// --table-border: #535353
--table-border: #4B4C4F
--light-blue: #474C50
--dropdown-gray: #45494B
--connector-gray : #474C50
--very-light-blue: #363A3E
--border-color: #535353
--learn-box-shadow: rgb(87 88 89 / 12%)
// for full calendar
--fc-neutral-bg-color: var(--dropdown-gray)
--fc-border-color: var(--border-color)
--fc-list-event-hover-bg-color: var(--dropdown-gray)
// integration filters
// --healthchecks-filter: grayscale(1) invert(1) brightness(2) contrast(1)
// --travisci-filter: grayscale(1) invert(1) brightness(2.2) contrast(1),
// --cronitor-filter: grayscale(1) invert(0) brightness(1) contrast(10)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment