Dark Theme

Ksj14-kumar · Nov 14, 2022 · 8a9c355 · 8a9c355
1 parent 535869d
commit 8a9c355
Show file tree

Hide file tree

Showing 24 changed files with 2,838 additions and 245 deletions.
diff --git a/_art/mediasoup.svg b/_art/mediasoup.svg
diff --git a/_compass/_anchor.scss b/_compass/_anchor.scss
@@ -10,7 +10,7 @@
 	@include transition(color .16s linear);
 }
 
-.anchorjs-link:link    { color: $color-dark; }
-.anchorjs-link:visited { color: $color-dark; }
-.anchorjs-link:hover   { color: $color-highlight; }
-.anchorjs-link:active  { color: $color-highlight; }
+.anchorjs-link:link    { color: $color-text; }
+.anchorjs-link:visited { color: $color-text; }
+.anchorjs-link:hover   { color: $color-highlight-2; }
+.anchorjs-link:active  { color: $color-highlight-2; }
diff --git a/_compass/_api_toc.scss b/_compass/_api_toc.scss
@@ -3,7 +3,7 @@
 	z-index: 50;
 	background: center url(/images/toc.svg) no-repeat;
 	background-size: 50%;
-	background-color: #fff;
+	background-color: lighten($color-white-2, 15%);
 	border-right: none;
 	@include box-shadow(0px 0px 3px 0px rgba(#111, 0.35));
 	cursor: pointer;
@@ -38,12 +38,12 @@
 	z-index: 10;
 	bottom: 0;
 	top: 0;
-	background: rgba(#fff, 0.96);
+	background-color: lighten($color-white-2, 15%);
+	@include box-shadow(-3px 0px 8px 0px rgba(#fff, 0.25));
 	border-color: transparent;
 	border-style: solid;
 	border-width: 8px 0;
 	font-size: 0.95rem;
-	@include box-shadow(-5px 0px 8px 0px rgba(#333, 0.1));
 	@include transition-duration(0.2s);
 	overflow-y: auto;
 	overscroll-behavior: contain;
@@ -91,7 +91,7 @@
 			display: block;
 			margin: 1.5em 0.75em 0.25em 0.75em;
 			font-weight: 400;
-			color: #19170f;
+			color: $color-dark-2;
 
 			&:first-child {
 				margin-top: 0.75em;
@@ -105,7 +105,7 @@
 					margin: 0 0 0.5em 0;
 					font-size: 0.95em;
 					font-weight: 400;
-					color: $color-dark;
+					color: darken($color-highlight-2, 10%);
 
 					// Third level (API).
 					> ul {
@@ -114,7 +114,7 @@
 							letter-spacing: -0.04em;
 							font-size: 0.9em;
 							line-height: 1.3em;
-							color: #666;
+							color: darken($color-text, 25%);
 						}
 					}
 				}

diff --git a/_compass/_default.scss b/_compass/_default.scss
@@ -43,7 +43,7 @@
 
 	h1 {
 		font-family: 'Poiret One';
-		color: #000;
+		color: $color-white-2;
 		text-align: left;
 		margin-bottom: 1em;
 		clear: both;
@@ -59,9 +59,9 @@
 	}
 
 	h2 {
-		color: #444;
+		color: $color-white-2;
 		text-align: left;
-		border-bottom: 4px solid rgba(#333, 0.1);
+		border-bottom: 4px solid rgba($color-white-2, 0.15);
 		margin-top: 2.5em;
 		margin-bottom: 1.5em;
 		clear: both;
@@ -81,22 +81,26 @@
 	h3 {
 		font-size: 1.4em;
 		line-height: 1.5em;
-		color: #151515;
-		border-bottom: 1px solid rgba($color-dark, 0.75);
+		color: $color-white-2;
+		border-bottom: 1px solid rgba($color-highlight-2, 0.75);
 		text-align: left;
 		margin-top: 2.5em;
 		margin-bottom: 1.5em;
 		clear: both;
 		overflow-wrap: break-word;
-	}
 
-	&.h3color h3 {
-		color: $color-dark;
+		&.h3color {
+			color: $color-highlight-2;
+		}
+
+		&.no-border {
+			border-bottom: none;
+		}
 	}
 
 	h4 {
 		font-size: 1.25em;
-		color: #262626;
+		color: $color-white-2;
 		text-align: left;
 		margin-top: 2.5em;
 		margin-bottom: 1.5em;
@@ -149,7 +153,7 @@
 	}
 
 	blockquote {
-		border-left: 6px solid #d6d6d6;
+		border-left: 6px solid $color-dark-2;
 		padding-left: 8px;
 
 		p, ul {
@@ -160,7 +164,7 @@
 
 	a {
 		text-decoration: none;
-		color: $color-dark;
+		color: $color-highlight-2;
 
 		&:hover {
 			text-decoration: underline;
@@ -192,13 +196,13 @@
 		}
 
 		> code {
-			color: $color-dark !important;
+			color: $color-white-2 !important;
 		}
 	}
 
 	strong {
 		font-weight: 400;
-		color: #000;
+		color: $color-white-2;
 	}
 
 	em {
@@ -222,10 +226,10 @@
 
 	:not(pre) > code {
 		font-family: 'Monaco', 'Andale Mono', monospace;
-		font-size: 0.9em;
-		color: #444;
+		font-size: 0.85em;
+		color: darken($color-white-2, 10%);
 		white-space: pre;
-		background-color: rgba(#fff, 0.25);
+		background-color: rgba(#fff, 0.08);
 		border-radius: 4px;
 		padding: 1px 2px;
 	}
@@ -246,13 +250,12 @@
 		margin: 2em auto;
 		padding: 1em;
 		font-size: 0.95em;
-		color: shade($color-text, 60%);
-		background-color: rgba(#aaa, 0.1);
+		background-color: rgba(#000, 0.2);
 		border-radius: 4px;
-		border: 2px solid $color-highlight;
+		border: 1px solid rgba($color-white-2, 0.1);
 
 		&.warn {
-			border-color: #e47474;
+			border-color: rgba(#e47474, 0.5);
 		}
 
 		@include breakpoint($computer) {
@@ -280,13 +283,12 @@
 			width: 100%;
 			margin: 0 auto;
 			border-collapse: collapse;
-			background-color: rgba(#333, 0.075);
+			background-color: rgba(#fff, 0.025);
 			font-size: 0.9em;
 
 			th {
 				padding: 0.75em;
 				text-align: center;
-				color: rgba(#fff, 0.9);
 				background-color: rgba($color-dark, 0.85);
 			}
 
@@ -297,7 +299,7 @@
 			}
 
 			th, td {
-				border: 1px solid #fff;
+				border: 1px solid rgba($color-white-2, 0.2);
 			}
 		}