Editor: Replaced theme code with CSS color-scheme.

editor/css/dark.css

@@ -1,323 +0,0 @@
-button {
-	color: #aaa;
-	background-color: #222;
-	border: 0px;
-	padding: 5px 8px;
-	text-transform: uppercase;
-	cursor: pointer;
-	outline: none;
-}
-
-	button:hover {
-		color: #ccc;
-		background-color: #444;
-	}
-
-	button.selected {
-		color: #fff;
-		background-color: #08f;
-	}
-
-input, textarea {
-	background-color: #222;
-	border: 1px solid transparent;
-	color: #888;
-}
-
-input.Number {
-	color: #08f!important;
-	font-size: 12px;
-	border: 0px;
-	padding: 2px;
-	cursor: col-resize;
-}
-
-select {
-	color: #aaa;
-	background-color: #222;
-	border: 0px;
-	text-transform: uppercase;
-	cursor: pointer;
-	outline: none;
-}
-
-	select:hover {
-		color: #ccc;
-		background-color: #444;
-	}
-
-/* UI */
-
-#viewport {
-	position: absolute;
-	top: 32px;
-	left: 0;
-	right: 300px;
-	bottom: 0;
-}
-
-	#viewport #info {
-		text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
-		pointer-events: none;
-	}
-
-#script {
-	position: absolute;
-	top: 32px;
-	left: 0;
-	right: 300px;
-	bottom: 0;
-	opacity: 0.9;
-}
-
-#player {
-	position: absolute;
-	top: 32px;
-	left: 0;
-	right: 300px;
-	bottom: 0;
-}
-
-#menubar {
-	position: absolute;
-	width: 100%;
-	height: 32px;
-	background: #111;
-	padding: 0;
-	margin: 0;
-	right: 0;
-	top: 0;
-}
-
-	#menubar .menu {
-		float: left;
-		cursor: pointer;
-		padding-right: 8px;
-	}
-
-	#menubar .menu.right {
-		float: right;
-		cursor: auto;
-		padding-right: 0;
-		text-align: right;
-	}
-
-		#menubar .menu .title {
-			display: inline-block;
-			color: #888;
-			margin: 0;
-			padding: 8px;
-			line-height: 16px;
-		}
-
-		#menubar .menu .options {
-			position: fixed;
-			display: none;
-			padding: 5px 0;
-			background: #111;
-			width: 150px;
-			max-height: calc(100% - 80px);
-			overflow: auto;
-		}
-
-		#menubar .menu:hover .options {
-			display: block;
-		}
-
-			#menubar .menu .options hr {
-				border-color: #222;
-			}
-
-			#menubar .menu .options .option {
-				color: #888;
-				background-color: transparent;
-				padding: 5px 10px;
-				margin: 0 !important;
-			}
-
-				#menubar .menu .options .option:hover {
-					color: #fff;
-					background-color: #08f;
-				}
-
-				#menubar .menu .options .option:active {
-					background: transparent;
-				}
-
-		#menubar .menu .options .inactive {
-			color: #444;
-			background-color: transparent;
-			padding: 5px 10px;
-			margin: 0 !important;
-		}
-
-#sidebar {
-	position: absolute;
-	right: 0;
-	top: 32px;
-	bottom: 0;
-	width: 300px;
-	background-color: #111;
-	overflow: auto;
-}
-
-	#sidebar * {
-		vertical-align: middle;
-	}
-
-	#sidebar .Panel {
-		color: #888;
-		padding: 10px;
-		border-top: 1px solid #222;
-	}
-
-	#sidebar .Panel.collapsed {
-		margin-bottom: 0;
-	}
-
-	#sidebar .Panel.Material canvas {
-		border: solid 1px #5A5A5A;
-	}
-
-	#sidebar .Row {
-		min-height: 20px;
-		margin-bottom: 10px;
-	}
-
-#tabs {
-	background-color: #1b1b1b;
-	border-top: 1px solid #222;
-}
-
-	#tabs span {
-		color: #555;
-		border-right: 1px solid #222;
-		padding: 10px;
-	}
-
-	#tabs span.selected {
-		color: #888;
-		background-color: #111;
-	}
-
-#toolbar {
-	position: absolute;
-	left: calc(50% - 290px); /* ( ( 100% - 300px ) / 2.0 ) - 140px */
-	width: 280px;
-	bottom: 16px;
-	height: 32px;
-	background-color: #111;
-	color: #333;
-}
-
-	#toolbar * {
-		vertical-align: middle;
-	}
-
-	#toolbar .Panel {
-		padding: 4px;
-		color: #888;
-	}
-
-	#toolbar button {
-		margin-right: 6px;
-		line-height: 14px;
-		height: 24px;
-	}
-
-.Outliner {
-	color: #888;
-	background: #222;
-	padding: 0;
-	width: 100%;
-	height: 140px;
-	font-size: 12px;
-	cursor: default;
-	overflow: auto;
-	outline: none;
-}
-
-	.Outliner .option {
-		padding: 4px;
-		white-space: nowrap;
-	}
-
-	.Outliner .option:hover {
-		background-color: rgba(21,60,94,0.5);
-	}
-
-
-	.Outliner .option.active {
-		background-color: rgba(21,60,94,1);
-	}
-
-.TabbedPanel .Tabs {
-	background-color: #1b1b1b;
-	border-top: 1px solid #222;
-}
-
-	.TabbedPanel .Tab {
-		color: #555;
-		border-right: 1px solid #222;
-	}
-
-	.TabbedPanel .Tab.selected {
-		color: #888;
-		background-color: #111;
-	}
-
-.Listbox {
-	color: #888;
-	background: #222;
-}
-
-.Panel {
-	color: #888;
-}
-/* */
-
-@media all and ( max-width: 600px ) {
-
-	#menubar .menu .options {
-		max-height: calc(100% - 372px);
-	}
-
-	#menubar .menu.right {
-		display: none;
-	}
-
-	#viewport {
-		left: 0;
-		right: 0;
-		top: 32px;
-		height: calc(100% - 352px);
-	}
-
-	#script {
-		left: 0;
-		right: 0;
-		top: 32px;
-		height: calc(100% - 352px);
-	}
-
-	#player {
-		left: 0;
-		right: 0;
-		top: 32px;
-		height: calc(100% - 352px);
-	}
-
-	#sidebar {
-		left: 0;
-		width: 100%;
-		top: calc(100% - 320px);
-		bottom: 0;
-	}
-
-	#toolbar {
-		left: calc(50% - 140px);
-		width: 280px;
-		top: 68px;
-	}
-
-}

editor/css/light.css

@@ -1,317 +0,0 @@
-button {
-	color: #555;
-	background-color: #ddd;
-	border: 0px;
-	padding: 5px 8px;
-	text-transform: uppercase;
-	cursor: pointer;
-	outline: none;
-}
-
-	button:hover {
-		background-color: #fff;
-	}
-
-	button.selected {
-		background-color: #fff;
-	}
-
-input, textarea {
-	border: 1px solid transparent;
-	color: #444;
-}
-
-input.Number {
-	color: #08f!important;
-	font-size: 12px;
-	border: 0px;
-	padding: 2px;
-	cursor: col-resize;
-}
-
-select {
-	color: #666;
-	background-color: #ddd;
-	border: 0px;
-	text-transform: uppercase;
-	cursor: pointer;
-	outline: none;
-}
-
-	select:hover {
-		background-color: #fff;
-	}
-
-/* UI */
-
-#viewport {
-	position: absolute;
-	top: 32px;
-	left: 0;
-	right: 300px;
-	bottom: 0;
-}
-
-	#viewport #info {
-		text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
-		pointer-events: none;
-	}
-
-#script {
-	position: absolute;
-	top: 32px;
-	left: 0;
-	right: 300px;
-	bottom: 0;
-	opacity: 0.9;
-}
-
-#player {
-	position: absolute;
-	top: 32px;
-	left: 0;
-	right: 300px;
-	bottom: 0;
-}
-
-#menubar {
-	position: absolute;
-	width: 100%;
-	height: 32px;
-	background: #eee;
-	padding: 0;
-	margin: 0;
-	right: 0;
-	top: 0;
-}
-
-	#menubar .menu {
-		float: left;
-		cursor: pointer;
-		padding-right: 8px;
-	}
-
-	#menubar .menu.right {
-		float: right;
-		cursor: auto;
-		padding-right: 0;
-		text-align: right;
-	}
-
-		#menubar .menu .title {
-			display: inline-block;
-			color: #888;
-			margin: 0;
-			padding: 8px;
-			line-height: 16px;
-		}
-
-		#menubar .menu .options {
-			position: fixed;
-			display: none;
-			padding: 5px 0;
-			background: #eee;
-			width: 150px;
-			max-height: calc(100% - 80px);
-			overflow: auto;
-		}
-
-		#menubar .menu:hover .options {
-			display: block;
-		}
-
-			#menubar .menu .options hr {
-				border-color: #ddd;
-			}
-
-			#menubar .menu .options .option {
-				color: #666;
-				background-color: transparent;
-				padding: 5px 10px;
-				margin: 0 !important;
-			}
-
-				#menubar .menu .options .option:hover {
-					color: #fff;
-					background-color: #08f;
-				}
-
-				#menubar .menu .options .option:active {
-					color: #666;
-					background: transparent;
-				}
-
-		#menubar .menu .options .inactive {
-			color: #bbb;
-			background-color: transparent;
-			padding: 5px 10px;
-			margin: 0 !important;
-		}
-
-#sidebar {
-	position: absolute;
-	right: 0;
-	top: 32px;
-	bottom: 0;
-	width: 300px;
-	background: #eee;
-	overflow: auto;
-}
-
-	#sidebar * {
-		vertical-align: middle;
-	}
-
-	#sidebar .Panel {
-		color: #888;
-		padding: 10px;
-		border-top: 1px solid #ccc;
-	}
-
-	#sidebar .Panel.collapsed {
-		margin-bottom: 0;
-	}
-
-	#sidebar .Row {
-		min-height: 20px;
-		margin-bottom: 10px;
-	}
-
-#tabs {
-	background-color: #ddd;
-	border-top: 1px solid #ccc;
-}
-
-	#tabs span {
-		color: #aaa;
-		border-right: 1px solid #ccc;
-		padding: 10px;
-	}
-
-	#tabs span.selected {
-		color: #888;
-		background-color: #eee;
-	}
-
-#toolbar {
-	position: absolute;
-	left: calc(50% - 290px); /* ( ( 100% - 300px ) / 2.0 ) - 140px */
-	width: 280px;
-	bottom: 16px;
-	height: 32px;
-	background: #eee;
-	color: #333;
-}
-
-	#toolbar * {
-		vertical-align: middle;
-	}
-
-	#toolbar .Panel {
-		padding: 4px;
-		color: #888;
-	}
-
-	#toolbar button {
-		margin-right: 6px;
-		line-height: 14px;
-		height: 24px;
-	}
-
-.Outliner {
-	color: #444;
-	background-color: #fff;
-	padding: 0;
-	width: 100%;
-	height: 140px;
-	font-size: 12px;
-	cursor: default;
-	overflow: auto;
-	outline: none !important;
-}
-
-	.Outliner .option {
-		padding: 4px;
-		color: #666;
-		white-space: nowrap;
-	}
-
-	.Outliner .option:hover {
-		background-color: rgba(0,0,0,0.02);
-	}
-
-	.Outliner .option.active {
-		background-color: rgba(0,0,0,0.04);
-	}
-
-
-.TabbedPanel .Tabs {
-	background-color: #ddd;
-	border-top: 1px solid #ccc;
-}
-
-	.TabbedPanel .Tab {
-		color: #aaa;
-		border-right: 1px solid #ccc;
-	}
-
-	.TabbedPanel .Tab.selected {
-		color: #888;
-		background-color: #eee;
-	}
-
-.Listbox {
-	color: #444;
-	background-color: #fff;
-}
-
-.Panel {
-	color: #888;
-}
-/* */
-
-@media all and ( max-width: 600px ) {
-
-	#menubar .menu .options {
-		max-height: calc(100% - 372px);
-	}
-
-	#menubar .menu.right {
-		display: none;
-	}
-
-	#viewport {
-		left: 0;
-		right: 0;
-		top: 32px;
-		height: calc(100% - 352px);
-	}
-
-	#script {
-		left: 0;
-		right: 0;
-		top: 32px;
-		height: calc(100% - 352px);
-	}
-
-	#player {
-		left: 0;
-		right: 0;
-		top: 32px;
-		height: calc(100% - 352px);
-	}
-
-	#sidebar {
-		left: 0;
-		width: 100%;
-		top: calc(100% - 320px);
-		bottom: 0;
-	}
-
-	#toolbar {
-		left: calc(50% - 140px);
-		width: 280px;
-		top: 68px;
-	}
-
-}

editor/css/main.css

@@ -215,3 +215,657 @@ textarea, input { outline: none; } /* osx */
 #outliner .Script:after {
 	content: '{...}' /* ❮/❯ */
 }
+
+/*  */
+
+:root {
+	color-scheme: light dark;
+}
+
+button {
+	color: #f5f;
+	background-color: #ddd;
+	border: 0px;
+	padding: 5px 8px;
+	text-transform: uppercase;
+	cursor: pointer;
+	outline: none;
+}
+
+	button:hover {
+		background-color: #fff;
+	}
+
+	button.selected {
+		background-color: #fff;
+	}
+
+input, textarea {
+	border: 1px solid transparent;
+	color: #444;
+}
+
+input.Number {
+	color: #08f!important;
+	font-size: 12px;
+	border: 0px;
+	padding: 2px;
+	cursor: col-resize;
+}
+
+select {
+	color: #666;
+	background-color: #ddd;
+	border: 0px;
+	text-transform: uppercase;
+	cursor: pointer;
+	outline: none;
+}
+
+	select:hover {
+		background-color: #fff;
+	}
+
+/* UI */
+
+#viewport {
+	position: absolute;
+	top: 32px;
+	left: 0;
+	right: 300px;
+	bottom: 0;
+}
+
+	#viewport #info {
+		text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
+		pointer-events: none;
+	}
+
+#script {
+	position: absolute;
+	top: 32px;
+	left: 0;
+	right: 300px;
+	bottom: 0;
+	opacity: 0.9;
+}
+
+#player {
+	position: absolute;
+	top: 32px;
+	left: 0;
+	right: 300px;
+	bottom: 0;
+}
+
+#menubar {
+	position: absolute;
+	width: 100%;
+	height: 32px;
+	background: #eee;
+	padding: 0;
+	margin: 0;
+	right: 0;
+	top: 0;
+}
+
+	#menubar .menu {
+		float: left;
+		cursor: pointer;
+		padding-right: 8px;
+	}
+
+	#menubar .menu.right {
+		float: right;
+		cursor: auto;
+		padding-right: 0;
+		text-align: right;
+	}
+
+		#menubar .menu .title {
+			display: inline-block;
+			color: #888;
+			margin: 0;
+			padding: 8px;
+			line-height: 16px;
+		}
+
+		#menubar .menu .options {
+			position: fixed;
+			display: none;
+			padding: 5px 0;
+			background: #eee;
+			width: 150px;
+			max-height: calc(100% - 80px);
+			overflow: auto;
+		}
+
+		#menubar .menu:hover .options {
+			display: block;
+		}
+
+			#menubar .menu .options hr {
+				border-color: #ddd;
+			}
+
+			#menubar .menu .options .option {
+				color: #666;
+				background-color: transparent;
+				padding: 5px 10px;
+				margin: 0 !important;
+			}
+
+				#menubar .menu .options .option:hover {
+					color: #fff;
+					background-color: #08f;
+				}
+
+				#menubar .menu .options .option:active {
+					color: #666;
+					background: transparent;
+				}
+
+		#menubar .menu .options .inactive {
+			color: #bbb;
+			background-color: transparent;
+			padding: 5px 10px;
+			margin: 0 !important;
+		}
+
+#sidebar {
+	position: absolute;
+	right: 0;
+	top: 32px;
+	bottom: 0;
+	width: 300px;
+	background: #eee;
+	overflow: auto;
+}
+
+	#sidebar * {
+		vertical-align: middle;
+	}
+
+	#sidebar .Panel {
+		color: #888;
+		padding: 10px;
+		border-top: 1px solid #ccc;
+	}
+
+	#sidebar .Panel.collapsed {
+		margin-bottom: 0;
+	}
+
+	#sidebar .Row {
+		min-height: 20px;
+		margin-bottom: 10px;
+	}
+
+#tabs {
+	background-color: #ddd;
+	border-top: 1px solid #ccc;
+}
+
+	#tabs span {
+		color: #aaa;
+		border-right: 1px solid #ccc;
+		padding: 10px;
+	}
+
+	#tabs span.selected {
+		color: #888;
+		background-color: #eee;
+	}
+
+#toolbar {
+	position: absolute;
+	left: calc(50% - 290px); /* ( ( 100% - 300px ) / 2.0 ) - 140px */
+	width: 280px;
+	bottom: 16px;
+	height: 32px;
+	background: #eee;
+	color: #333;
+}
+
+	#toolbar * {
+		vertical-align: middle;
+	}
+
+	#toolbar .Panel {
+		padding: 4px;
+		color: #888;
+	}
+
+	#toolbar button {
+		margin-right: 6px;
+		line-height: 14px;
+		height: 24px;
+	}
+
+.Outliner {
+	color: #444;
+	background-color: #fff;
+	padding: 0;
+	width: 100%;
+	height: 140px;
+	font-size: 12px;
+	cursor: default;
+	overflow: auto;
+	outline: none !important;
+}
+
+	.Outliner .option {
+		padding: 4px;
+		color: #666;
+		white-space: nowrap;
+	}
+
+	.Outliner .option:hover {
+		background-color: rgba(0,0,0,0.02);
+	}
+
+	.Outliner .option.active {
+		background-color: rgba(0,0,0,0.04);
+	}
+
+
+.TabbedPanel .Tabs {
+	background-color: #ddd;
+	border-top: 1px solid #ccc;
+}
+
+	.TabbedPanel .Tab {
+		color: #aaa;
+		border-right: 1px solid #ccc;
+	}
+
+	.TabbedPanel .Tab.selected {
+		color: #888;
+		background-color: #eee;
+	}
+
+.Listbox {
+	color: #444;
+	background-color: #fff;
+}
+
+.Panel {
+	color: #888;
+}
+/* */
+
+@media all and ( max-width: 600px ) {
+
+	#menubar .menu .options {
+		max-height: calc(100% - 372px);
+	}
+
+	#menubar .menu.right {
+		display: none;
+	}
+
+	#viewport {
+		left: 0;
+		right: 0;
+		top: 32px;
+		height: calc(100% - 352px);
+	}
+
+	#script {
+		left: 0;
+		right: 0;
+		top: 32px;
+		height: calc(100% - 352px);
+	}
+
+	#player {
+		left: 0;
+		right: 0;
+		top: 32px;
+		height: calc(100% - 352px);
+	}
+
+	#sidebar {
+		left: 0;
+		width: 100%;
+		top: calc(100% - 320px);
+		bottom: 0;
+	}
+
+	#toolbar {
+		left: calc(50% - 140px);
+		width: 280px;
+		top: 68px;
+	}
+
+}
+
+/* DARK MODE */
+
+@media (prefers-color-scheme: dark) {
+
+	button {
+		color: #aaa;
+		background-color: #222;
+		border: 0px;
+		padding: 5px 8px;
+		text-transform: uppercase;
+		cursor: pointer;
+		outline: none;
+	}
+
+		button:hover {
+			color: #ccc;
+			background-color: #444;
+		}
+
+		button.selected {
+			color: #fff;
+			background-color: #08f;
+		}
+
+	input, textarea {
+		background-color: #222;
+		border: 1px solid transparent;
+		color: #888;
+	}
+
+	input.Number {
+		color: #08f!important;
+		font-size: 12px;
+		border: 0px;
+		padding: 2px;
+		cursor: col-resize;
+	}
+
+	select {
+		color: #aaa;
+		background-color: #222;
+		border: 0px;
+		text-transform: uppercase;
+		cursor: pointer;
+		outline: none;
+	}
+
+		select:hover {
+			color: #ccc;
+			background-color: #444;
+		}
+
+	/* UI */
+
+	#viewport {
+		position: absolute;
+		top: 32px;
+		left: 0;
+		right: 300px;
+		bottom: 0;
+	}
+
+		#viewport #info {
+			text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
+			pointer-events: none;
+		}
+
+	#script {
+		position: absolute;
+		top: 32px;
+		left: 0;
+		right: 300px;
+		bottom: 0;
+		opacity: 0.9;
+	}
+
+	#player {
+		position: absolute;
+		top: 32px;
+		left: 0;
+		right: 300px;
+		bottom: 0;
+	}
+
+	#menubar {
+		position: absolute;
+		width: 100%;
+		height: 32px;
+		background: #111;
+		padding: 0;
+		margin: 0;
+		right: 0;
+		top: 0;
+	}
+
+		#menubar .menu {
+			float: left;
+			cursor: pointer;
+			padding-right: 8px;
+		}
+
+		#menubar .menu.right {
+			float: right;
+			cursor: auto;
+			padding-right: 0;
+			text-align: right;
+		}
+
+			#menubar .menu .title {
+				display: inline-block;
+				color: #888;
+				margin: 0;
+				padding: 8px;
+				line-height: 16px;
+			}
+
+			#menubar .menu .options {
+				position: fixed;
+				display: none;
+				padding: 5px 0;
+				background: #111;
+				width: 150px;
+				max-height: calc(100% - 80px);
+				overflow: auto;
+			}
+
+			#menubar .menu:hover .options {
+				display: block;
+			}
+
+				#menubar .menu .options hr {
+					border-color: #222;
+				}
+
+				#menubar .menu .options .option {
+					color: #888;
+					background-color: transparent;
+					padding: 5px 10px;
+					margin: 0 !important;
+				}
+
+					#menubar .menu .options .option:hover {
+						color: #fff;
+						background-color: #08f;
+					}
+
+					#menubar .menu .options .option:active {
+						background: transparent;
+					}
+
+			#menubar .menu .options .inactive {
+				color: #444;
+				background-color: transparent;
+				padding: 5px 10px;
+				margin: 0 !important;
+			}
+
+	#sidebar {
+		position: absolute;
+		right: 0;
+		top: 32px;
+		bottom: 0;
+		width: 300px;
+		background-color: #111;
+		overflow: auto;
+	}
+
+		#sidebar * {
+			vertical-align: middle;
+		}
+
+		#sidebar .Panel {
+			color: #888;
+			padding: 10px;
+			border-top: 1px solid #222;
+		}
+
+		#sidebar .Panel.collapsed {
+			margin-bottom: 0;
+		}
+
+		#sidebar .Panel.Material canvas {
+			border: solid 1px #5A5A5A;
+		}
+
+		#sidebar .Row {
+			min-height: 20px;
+			margin-bottom: 10px;
+		}
+
+	#tabs {
+		background-color: #1b1b1b;
+		border-top: 1px solid #222;
+	}
+
+		#tabs span {
+			color: #555;
+			border-right: 1px solid #222;
+			padding: 10px;
+		}
+
+		#tabs span.selected {
+			color: #888;
+			background-color: #111;
+		}
+
+	#toolbar {
+		position: absolute;
+		left: calc(50% - 290px); /* ( ( 100% - 300px ) / 2.0 ) - 140px */
+		width: 280px;
+		bottom: 16px;
+		height: 32px;
+		background-color: #111;
+		color: #333;
+	}
+
+		#toolbar * {
+			vertical-align: middle;
+		}
+
+		#toolbar .Panel {
+			padding: 4px;
+			color: #888;
+		}
+
+		#toolbar button {
+			margin-right: 6px;
+			line-height: 14px;
+			height: 24px;
+		}
+
+	.Outliner {
+		color: #888;
+		background: #222;
+		padding: 0;
+		width: 100%;
+		height: 140px;
+		font-size: 12px;
+		cursor: default;
+		overflow: auto;
+		outline: none;
+	}
+
+		.Outliner .option {
+			padding: 4px;
+			white-space: nowrap;
+		}
+
+		.Outliner .option:hover {
+			background-color: rgba(21,60,94,0.5);
+		}
+
+
+		.Outliner .option.active {
+			background-color: rgba(21,60,94,1);
+		}
+
+	.TabbedPanel .Tabs {
+		background-color: #1b1b1b;
+		border-top: 1px solid #222;
+	}
+
+		.TabbedPanel .Tab {
+			color: #555;
+			border-right: 1px solid #222;
+		}
+
+		.TabbedPanel .Tab.selected {
+			color: #888;
+			background-color: #111;
+		}
+
+	.Listbox {
+		color: #888;
+		background: #222;
+	}
+
+	.Panel {
+		color: #888;
+	}
+	/* */
+
+	@media all and ( max-width: 600px ) {
+
+		#menubar .menu .options {
+			max-height: calc(100% - 372px);
+		}
+
+		#menubar .menu.right {
+			display: none;
+		}
+
+		#viewport {
+			left: 0;
+			right: 0;
+			top: 32px;
+			height: calc(100% - 352px);
+		}
+
+		#script {
+			left: 0;
+			right: 0;
+			top: 32px;
+			height: calc(100% - 352px);
+		}
+
+		#player {
+			left: 0;
+			right: 0;
+			top: 32px;
+			height: calc(100% - 352px);
+		}
+
+		#sidebar {
+			left: 0;
+			width: 100%;
+			top: calc(100% - 320px);
+			bottom: 0;
+		}
+
+		#toolbar {
+			left: calc(50% - 140px);
+			width: 280px;
+			top: 68px;
+		}
+
+	}
+
+}

editor/index.html

@@ -12,7 +12,6 @@
 	</head>
 	<body ontouchstart="">
 		<link rel="stylesheet" href="css/main.css">
-		<link rel="stylesheet" id="theme" href="css/light.css">
 
 		<script src="../build/three.js"></script>
 
@@ -204,8 +203,6 @@
 
 			//
 
-			editor.setTheme( editor.config.getKey( 'theme' ) );
-
 			editor.storage.init( function () {
 
 				editor.storage.get( function ( state ) {

editor/js/Config.js

@@ -10,7 +10,6 @@ var Config = function () {
 		'language': 'en',
 
 		'autosave': true,
-		'theme': 'css/light.css',
 
 		'project/title': '',
 		'project/editable': false,

editor/js/Editor.js

@@ -29,8 +29,6 @@ var Editor = function () {
 		savingStarted: new Signal(),
 		savingFinished: new Signal(),
 
-		themeChanged: new Signal(),
-
 		transformModeChanged: new Signal(),
 		snapChanged: new Signal(),
 		spaceChanged: new Signal(),
@@ -111,16 +109,6 @@ var Editor = function () {
 
 Editor.prototype = {
 
-	setTheme: function ( value ) {
-
-		document.getElementById( 'theme' ).href = value;
-
-		this.signals.themeChanged.dispatch( value );
-
-	},
-
-	//
-
 	setScene: function ( scene ) {
 
 		this.scene.uuid = scene.uuid;

editor/js/Sidebar.Settings.js

@@ -43,37 +43,6 @@ Sidebar.Settings = function ( editor ) {
 
 	container.add( languageRow );
 
-	// theme
-
-	var options = {
-		'css/light.css': strings.getKey( 'sidebar/settings/theme/light' ),
-		'css/dark.css': strings.getKey( 'sidebar/settings/theme/dark' )
-	};
-
-	var themeRow = new UI.Row();
-	var theme = new UI.Select().setWidth( '150px' );
-	theme.setOptions( options );
-
-	if ( config.getKey( 'theme' ) !== undefined ) {
-
-		theme.setValue( config.getKey( 'theme' ) );
-
-	}
-
-	theme.onChange( function () {
-
-		var value = this.getValue();
-
-		editor.setTheme( value );
-		editor.config.setKey( 'theme', value );
-
-	} );
-
-	themeRow.add( new UI.Text( strings.getKey( 'sidebar/settings/theme' ) ).setWidth( '90px' ) );
-	themeRow.add( theme );
-
-	container.add( themeRow );
-
 	container.add( new Sidebar.Settings.Shortcuts( editor ) );
 	container.add( new Sidebar.Settings.Viewport( editor ) );
 

editor/js/Strings.js

@@ -284,9 +284,6 @@ var Strings = function ( config ) {
 
 			'sidebar/settings': 'Settings',
 			'sidebar/settings/language': 'Language',
-			'sidebar/settings/theme': 'Theme',
-			'sidebar/settings/theme/light': 'light',
-			'sidebar/settings/theme/dark': 'dark',
 
 			'sidebar/settings/shortcuts/translate': 'Translate',
 			'sidebar/settings/shortcuts/rotate': 'Rotate',
@@ -560,9 +557,6 @@ var Strings = function ( config ) {
 
 			'sidebar/settings': '设置',
 			'sidebar/settings/language': '语言',
-			'sidebar/settings/theme': '主题',
-			'sidebar/settings/theme/light': '浅色',
-			'sidebar/settings/theme/dark': '深色',
 
 			'sidebar/settings/shortcuts/translate': '移动',
 			'sidebar/settings/shortcuts/rotate': '旋转',