Contrasts

The darks are a series of six deep, cool shades, ranging from dark gray to dark navy blue. They evoke a sense of depth and sophistication, and are generally used as backgrounds or accents to create a moody, professional atmosphere.


The white, clean shades range from almost pure white to light gray. These colors are use in creating contrast against the darker shades or as neutral text colors.

Learn more

Darks


#171423

#161E2F

#383E4B

#3E4658

#444D60

#4C566A

Lights


#D8DDE7

#E1E6EE

#F1F6FE

#FEFEFE

Colors


#96CEB4

#FFEEAD

#FFAD60

#D9534F

#A696C8

Theme


#5E82AC

#5F8CBF

#759AC5

#94B7E1

Rich colors

The colors section consists of five vivid and varied hues. They include a soft turquoise (#96ceb4), a warm, buttery yellow (#ffeead), a vibrant orange (#ffad60), a rich, deep red (#d9534f), and a muted purple (#a696c8).


The theme colors are a progression of four shades of blue, starting from a medium blue (#5e82ac) and gradually transitioning to a brighter, more vibrant blue (#94b7e1).

Learn more

Unify your experience

We are constantly porting Sarcastic White to more apps and services, to make it easy for you to unify the appearance of your applications and tools.




See all ports

{{Coding}}

When Sarcastic White is applied to your favourite code editor, it provides a visually appealing and functional environment for coding.



var token = true;
							function appendEl(text){
							  document
							    .body
							    .insertAdjacentHTML(
							      'beforeend',
							      `<strong>${text}</strong>`
							    );
							}
							appendEl('Text added by JS');
html, body {
							  height: 100%; /* Full Screen */
							}
							body::after {
							  content: "foo !== bar"
							}
							.cool {
							  padding: 10%;
							}
							@media (min-width: 300px) {
							  .cool {
							    padding: 5%;
							  }
							}
<h1 id="heading">Hello World</h1>
							<p>
							  Greetings, earthlings!
							  <a href='#'>I'm a link</a>
							</p>

							<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
							  <circle cx="50" cy="50" r="50" fill="#F00">
							</svg>

							<ol class="list">
							  <li>One</li>
							  <li>Two</li>
							</ol>
							<!-- /.list -->
<?php
							class Fruit {
							  // Properties
							  public $name;
							  public $color;

							  // Methods
							  function set_name($name) {
							    $this->name = $name;
							  }
							  function get_name() {
							    return $this->name;
							  }
							}
							$apple = new Fruit();
							$banana = new Fruit();
							$apple->set_name('Apple');
							$banana->set_name('Banana');

							echo $apple->get_name();
							echo "<br>";
							echo $banana->get_name();
							?>
# Program to check if a number is prime or not
							num = 29

							# To take input from the user
							#num = int(input("Enter a number: "))

							# define a flag variable
							flag = False

							if num == 1:
							  print(num, "is not a prime number")
							elif num > 1:
							  # check for factors
							  for i in range(2, num):
							    if (num % i) == 0:
							      # if factor is found, set flag to True
							      flag = True
							      # break out of loop
							      break

							  # check if flag is True
							  if flag:
							    print(num, "is not a prime number")
							  else:
							    print(num, "is a prime number")
Powered by: highlight.js

Ideas and suggestions?

Missing Sarcastic White on a specific app or service? Let us know!

Contact us