11
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

メインモニタが明るすぎるのでElectronで暗くしてみた

Last updated at Posted at 2016-03-12

くだらないものを作ったので放流しておく。

メインモニタの性能の問題で、輝度を1番低く設定してもそんなに暗くなってくれず
周りが暗くなると目が辛くなるのでElectronで対応することにした。
と言ってもやっていることは非常に単純で

  • 何もコンテンツが無い透過なアプリを1枚作る
  • 画面の最前面に表示する

というくらい。
コードは最低限こんな感じ。

追記:
コメントいただいた部分と、画面サイズ周りが適当すぎたので変更しました。

electron.js
'use strict';

const app = require('app');
const BrowserWindow = require('browser-window');

let mainWindow = null;

let windowStyle = {
    transparent: true,
    frame: false,
    alwaysOnTop: true
};

app.on('window-all-closed', () => {
    if (process.platform != 'darwin')
    app.quit();
});

app.on('ready', () => {
    mainWindow = new BrowserWindow(windowStyle);
    mainWindow.loadURL('file://' + __dirname + '/index.html');
    mainWindow.setIgnoreMouseEvents(true);
    mainWindow.maximize();

    mainWindow.on('closed', () => {
        mainWindow = null;
    });
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
        }
    </style>
</head>
<body>
</body>
</html>

こんな感じのが
before.png

こうなってくれて、目に優しい
after.png

マウスを使うとElectron側にフォーカスが取られるとか明るさを調整できないとかあるのを何とかしたいですね。

11
11
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?