studiochris/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Windows 10 Accent Color Test</title>
    <link rel="stylesheet" type="text/css" href="./styles.css">
  </head>
  <body>
    <div class="app">
    <div class="app-text">
    <p>With a passing test on systems showing the accent color on title bars and window borders, the title bar of the window and the <code>body</code> element should be the same color with no visual delineation between them.</p>
    <p><code>accent-color-changed</code> events are logged to Main's console along with <code>newColor</code>. <code>ipcRenderer</code> events (used to transfer <code>newColor</code> to Renderer) are logged to Renderer's console along with <code>newColor</code>.
    </p>
    <p class="note"><strong>Note:</strong> <code>accent-color-changed</code> appears to fire multiple times per accent color change.</p>
    </div>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    <footer>
      <div>Electron<br><script>document.write(process.versions.electron)</script></div>
      <div>Chromium<br><script>document.write(process.versions.chrome)</script></div>
      <div>Node.js<br><script>document.write(process.versions.node)</script></div>
    </footer>
    </div>

    <script>
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>
</html>

## main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow, systemPreferences } = require('electron')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  mainWindow.removeMenu();

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  mainWindow.webContents.openDevTools({mode: 'undocked'});


  mainWindow.webContents.once('dom-ready', () => {
    mainWindow.webContents.send('accentColor', systemPreferences.getAccentColor());
  });

  systemPreferences.on('accent-color-changed', (event, newColor) => {
    console.log(event, newColor);
    mainWindow.webContents.send('accentColor', newColor);
  });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

## preload.js
// Empty

## renderer.js
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.
const { ipcRenderer } = require('electron');

ipcRenderer.on('accentColor', (event, accentColor) => {
  console.log(event, accentColor);
  document.documentElement.style.setProperty('--system-accent-color', '#' + accentColor.substr(0, 6));
});

## styles.css
:root {
  --window-width: 100vw;
  --window-height: 100vh;
  --system-accent-color: #fff;
  --text-color: #fff;
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

*, *::before, *::after {
  position: relative;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  background: var(--system-accent-color);
  color: #000;
  font-family: sans-serif;
}

body {
  min-height: 100vh;
  display: grid;
  place-content: center;
}

.app {
  padding: 2rem;
  max-width: 34rem;
}

.app-text {
  background: rgb(255 255 255 / 1);
  padding: 2rem;
  line-height: 1.5rem;
  border-radius: 1rem 1rem 0 0;
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 1.5rem 0;
}

p {
  margin: 0;
  margin-bottom: 1.5rem;
}

p:only-child, p:last-child {
  margin-bottom: 0;
}

code {
  display: inline-block;
  font-family: Consolas, monospace;
  background: #eee;
  color: crimson;
  padding: 0 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.925rem;
  line-height: 1.25rem;
}

.note {
  padding: 1rem;
  background: #ddd;
  border-radius: 0.5rem;
}

footer {
  text-align: center;
  background: #ddd;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 1rem;
  border-radius: 0 0 1rem 1rem;
  font-size: 0.875rem;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Windows 10 Accent Color Test</title>
	<link rel="stylesheet" type="text/css" href="./styles.css">
	</head>
	<body>
	<div class="app">
	<div class="app-text">
	<p>With a passing test on systems showing the accent color on title bars and window borders, the title bar of the window and the <code>body</code> element should be the same color with no visual delineation between them.</p>
	<p><code>accent-color-changed</code> events are logged to Main's console along with <code>newColor</code>. <code>ipcRenderer</code> events (used to transfer <code>newColor</code> to Renderer) are logged to Renderer's console along with <code>newColor</code>.
	</p>
	<p class="note"><strong>Note:</strong> <code>accent-color-changed</code> appears to fire multiple times per accent color change.</p>
	</div>
	<!-- All of the Node.js APIs are available in this renderer process. -->
	<footer>
	<div>Electron<br><script>document.write(process.versions.electron)</script></div>
	<div>Chromium<br><script>document.write(process.versions.chrome)</script></div>
	<div>Node.js<br><script>document.write(process.versions.node)</script></div>
	</footer>
	</div>

	<script>
	// You can also require other files to run in this process
	require('./renderer.js')
	</script>
	</body>
	</html>
	// Modules to control application life and create native browser window
	const { app, BrowserWindow, systemPreferences } = require('electron')

	function createWindow () {
	// Create the browser window.
	const mainWindow = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	nodeIntegration: true
	}
	});
	mainWindow.removeMenu();

	// and load the index.html of the app.
	mainWindow.loadFile('index.html')

	// Open the DevTools.
	mainWindow.webContents.openDevTools({mode: 'undocked'});


	mainWindow.webContents.once('dom-ready', () => {
	mainWindow.webContents.send('accentColor', systemPreferences.getAccentColor());
	});

	systemPreferences.on('accent-color-changed', (event, newColor) => {
	console.log(event, newColor);
	mainWindow.webContents.send('accentColor', newColor);
	});
	}

	// This method will be called when Electron has finished
	// initialization and is ready to create browser windows.
	// Some APIs can only be used after this event occurs.
	app.on('ready', createWindow)

	// Quit when all windows are closed.
	app.on('window-all-closed', function () {
	// On OS X it is common for applications and their menu bar
	// to stay active until the user quits explicitly with Cmd + Q
	if (process.platform !== 'darwin') {
	app.quit()
	}
	})

	app.on('activate', function () {
	// On OS X it's common to re-create a window in the app when the
	// dock icon is clicked and there are no other windows open.
	if (BrowserWindow.getAllWindows().length === 0) {
	createWindow()
	}
	})

	// In this file you can include the rest of your app's specific main process
	// code. You can also put them in separate files and require them here.
	// This file is required by the index.html file and will
	// be executed in the renderer process for that window.
	// All of the Node.js APIs are available in this process.
	const { ipcRenderer } = require('electron');

	ipcRenderer.on('accentColor', (event, accentColor) => {
	console.log(event, accentColor);
	document.documentElement.style.setProperty('--system-accent-color', '#' + accentColor.substr(0, 6));
	});
	:root {
	--window-width: 100vw;
	--window-height: 100vh;
	--system-accent-color: #fff;
	--text-color: #fff;
	--font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	}

	, ::before, *::after {
	position: relative;
	box-sizing: border-box;
	}

	html, body {
	margin: 0;
	background: var(--system-accent-color);
	color: #000;
	font-family: sans-serif;
	}

	body {
	min-height: 100vh;
	display: grid;
	place-content: center;
	}

	.app {
	padding: 2rem;
	max-width: 34rem;
	}

	.app-text {
	background: rgb(255 255 255 / 1);
	padding: 2rem;
	line-height: 1.5rem;
	border-radius: 1rem 1rem 0 0;
	}

	h1 {
	font-size: 1.5rem;
	margin: 0 0 1.5rem 0;
	}

	p {
	margin: 0;
	margin-bottom: 1.5rem;
	}

	p:only-child, p:last-child {
	margin-bottom: 0;
	}

	code {
	display: inline-block;
	font-family: Consolas, monospace;
	background: #eee;
	color: crimson;
	padding: 0 0.5rem;
	border-radius: 0.25rem;
	font-size: 0.925rem;
	line-height: 1.25rem;
	}

	.note {
	padding: 1rem;
	background: #ddd;
	border-radius: 0.5rem;
	}

	footer {
	text-align: center;
	background: #ddd;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	padding: 1rem;
	border-radius: 0 0 1rem 1rem;
	font-size: 0.875rem;
	}