Skip to content

Custom Themes

Jump to bottom
Quinton Ashley edited this page Apr 27, 2020 · 12 revisions

Creating Custom Themes for Nostlan

Coming soon, users will be able to create custom themes for Nostlan. You can make your own color palettes, styling rules, and even change the loading screens! When designing themes you should not require any resources to load from the internet. If you want to use a font for example include the font file in your theme's folder, then link to it locally in your css file.

Custom Theme Styling

Create a colors.css file to add color palettes. The example below shows the default black, blue, and white color palettes for the Nintendo 3DS.

.n3ds {
	--nav-color: #3f4044;
	--nav-text-color: #202125;
	--nav0Btn-color: #5A86C7;
	--nav2Btn-color: #009a6d;
	--nav3Btn-color: #DDBB62;
}

.n3ds.blue {
	--nav-color: #557eaa;
	--nav-text-color: #3a465e;
	--nav0Btn-color: #3a465e;
	--nav2Btn-color: #3a465e;
	--nav3Btn-color: #3a465e;
	--nav0Btn-text-color: #5A86C7;
	--nav2Btn-text-color: #009a6d;
	--nav3Btn-text-color: #DDBB62;
}

.n3ds.white {
	--nav-color: #ebebeb;
	--nav-text-color: #949494;
	--nav0Btn-color: #ffa93a;
	--nav2Btn-color: #ffa93a;
	--nav3Btn-color: #ffa93a;
	--nav0Btn-text-color: #5A86C7;
	--nav2Btn-text-color: #009a6d;
	--nav3Btn-text-color: #DDBB62;
}

Custom Content

The intro loading screens intro.html for every system is displayed in Nostlan from a webview tag <webview> as guest content for security purposes.

<!DOCTYPE html>
<html>

<head>
	<title>intro n3ds</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./intro.css">
</head>

<body><img src="./intro.svg"></body>

</html>

<webview> guest content is isolated, meaning it does not have access to node.js functions and can not call any of Nostlan's functions. Want to use jQuery or another popular web dev library? By writing themes in Pug you can gain access to a set of local variables that store the paths to Javascript/CSS libraries for guest content usage.

const guestLibs = {
  bootstrap_css: node_modules + '/bootstrap/dist/css/bootstrap.min.css',
  jquery_js: node_modules + '/jquery/dist/jquery.min.js',
  jquery_slim_js: node_modules + '/jquery/dist/jquery.slim.min.js',
  material_design_icons_css: node_modules + '/material-design-icons-iconfont/dist/material-design-icons.css',
  three_js: node_modules + '/three/build/three.min.js'
};

Support Nostlan on Patreon 🤝

Clone this wiki locally