Darkmode support (#279)

By @ungjinPark
ThePacielloGroup · Mar 24, 2023 · de2cb33 · de2cb33
1 parent 94dad4b
commit de2cb33
Show file tree

Hide file tree

Showing 26 changed files with 7,663 additions and 174 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/CCAcontroller.js b/src/CCAcontroller.js
@@ -62,6 +62,7 @@ class CCAController {
         ipcMain.on('changeFromHSVComponent', this.updateHSVComponent.bind(this))
         ipcMain.on('changeFromString', this.updateFromString.bind(this))
         ipcMain.on('switchColors', this.switchColors.bind(this))
+        ipcMain.on("darkMode",this.updateColor)
         ipcMain.on('getColorFromPicker', this.getColorFromPicker.bind(this))
         ipcMain.handle('getColorObject', (event, section) => {
             return this.getColorObject(section)

diff --git a/src/main.js b/src/main.js
@@ -38,6 +38,10 @@ const schema = {
         type: 'string',
         default: 'auto',
     },
+    colorScheme: {
+        type: 'string',
+        default: "system"
+    },
     picker: {
         type: 'integer',
         default: (process.platform === 'win32' || process.platform === 'win64' || /^(msys|cygwin)$/.test(process.env.OSTYPE))?2:1, // Disable for Windows until https://github.com/electron/electron/issues/27980
@@ -142,6 +146,9 @@ store.onDidChange('lang', (newValue) => {
     setMenu(i18n)
     mainController.sendEventToAll('langChanged')
     mainController.updateLanguage()
+});
+store.onDidChange('colorScheme',(newValue)=> {
+    mainController.sendEventToAll("colorSchemeChanged",newValue);
 })
 store.onDidChange('foreground.format', ()=>{
     mainController.updateColor('foreground')
@@ -219,5 +226,4 @@ function sendEventToAll(event, ...params) {
     Object.keys(controllers).map(function(key, index) {
         controllers[key].sendEvent(event, ...params)
     })
-}
-
+}
diff --git a/src/views/about.html b/src/views/about.html
@@ -8,14 +8,14 @@
   </head>
   <body>
     <main>
-      <h1>Colour Contrast Analyser (CCA)</h1>
+      <h1 id="header-main">Colour Contrast Analyser (CCA)</h1>
       <div class="center">
         <p><span id="i18n-version">Version</span> <span id="cca-version"></span></p>
         <img src="icons/cca.svg" width="100" height="100" alt="CCA icon" />
         <p><span id="i18n-developed">Developed by</span> <a href="https://www.tpgi.com" class="external-link">TPGi</a><br/>Under <a href="https://raw.githubusercontent.com/ThePacielloGroup/CCAe/main/LICENSE" class="external-link">GNU GPL v3.0</a></p>
         <p>The funding for the original WCAG version of the Colour Contrast tool was provided by the Trace Center under grant #H133E030012 from the National Institute on Disability and Rehabilitation Research (NIDRR). However no endorsement of the work by NIDILR should be inferred.</p>  
       </div>
-      <h2>Translations</h2>
+      <h2 id="header-translations">Translations</h2>
       <ul>
         <li>Deutsch: <a href="https://github.com/OLLI-S" class="external-link">Oliver Sahr</a></li>
         <li>Dutch: <a href="https://github.com/roelvangils" class="external-link">Roel Van Gils</a></li>
@@ -26,16 +26,16 @@ <h2>Translations</h2>
         <li>日本語: <a href="https://github.com/motchie" class="external-link">Toru Motchie MOCHIDA</a></li>
         <li>한국어: <a href="https://github.com/miname" class="external-link">HungJae Lee</a></li>
       </ul>
-      <h2>External links</h2>
-      <ul>
+      <h2 id="header-exLinks">External links</h2>
+      <ul id="list-exLinks">
         <li><a href="https://www.tpgi.com/color-contrast-checker/" class="external-link">TPGi Resources</a></li>
         <li><a href="https://github.com/ThePacielloGroup/CCAe" class="external-link">Github page</a></li>
         <li><a href="https://github.com/ThePacielloGroup/CCAe/issues" class="external-link">Report an issue</a></li>
       </ul>
     </main>
     <script>
       // You can also require other files to run in this process
-      require('./js/about.js')
+      require('./js/about.js');
     </script>
   </body>
 </html>
diff --git a/src/views/css/deficiency.css b/src/views/css/deficiency.css
@@ -16,6 +16,7 @@ body{
 .preview {
     border-radius: 0.5rem;
     padding: 0.5rem;
+    border: solid 1px var(--fg-border-primary);
 }
 
 .cr,

diff --git a/src/views/css/global.css b/src/views/css/global.css
@@ -2,6 +2,109 @@ html, body{
     margin: 0;
     font: caption; /* Default Operating System Font */
     font-size: 100%;
+    color:var(--fg-primary);
+    background-color: var(--bg-primary);
+}
+
+:root {
+    --bg-primary:#fff;
+    --bg-secondary:#f5f5f5;
+    --bg-paraphrased:#dadada;
+    --bg-control-primary: #dfdfdf;
+    --bg-accent:#1B75BC;
+    --bg-summary:#151515;
+    --bg-details:#ECECEC;
+    --fg-primary:#000;
+    --fg-paraphrased:#222;
+    --bg-code:var(--bg-paraphrased);
+    --fg-border-primary:#ccc;
+    --fg-border-secondary:#aaa;
+    --fg-link:#4865FF;
+    --bg-code:#ccc;
+    --fg-control-border-primary: #8f8f8f;
+    --icon-switch:url("../icons/switch-black.svg");
+    --icon-sliders:url("../icons/sliders-black.svg");
+    --icon-picker:url("../icons/picker-black.svg");
+    --icon-help:url("../icons/help-black.svg");
+    --icon-sliders-pressed:url("../icons/sliders-white.svg");
+    --icon-picker-pressed:url("../icons/picker-white.svg");
+    --icon-help-pressed:url("../icons/help-white.svg");
+    --scheme-type:light;
+}
+
+@media ( prefers-color-scheme : dark ) {
+    :root {
+        --bg-primary:#121212;
+        --bg-secondary:#1f1f1f;
+        --bg-control-primary: #343434;
+        --bg-summary:#2f2f2f;
+        --bg-details:var(--bg-summary);
+        --bg-paraphrased:#1f1f1f;
+        --fg-paraphrased:#dadada;
+        --bg-code:var(--bg-paraphrased);
+        --fg-primary:#fff;
+        --fg-border-primary:#666;
+        --fg-border-secondary:#5a5a5a;
+        --fg-control-border-primary: #6f6f6f;
+        --fg-link:#58A5FF;
+        --icon-switch:url("../icons/switch-white.svg");
+        --icon-sliders:url("../icons/sliders-white.svg");
+        --icon-picker:url("../icons/picker-white.svg");
+        --icon-help:url("../icons/help-white.svg");
+        --icon-sliders-pressed:url("../icons/sliders-white.svg");
+        --icon-picker-pressed:url("../icons/picker-white.svg");
+        --icon-help-pressed:url("../icons/help-white.svg");
+        --scheme-type:dark;
+    }
+}
+
+html.force-light {
+    --bg-primary:#fff;
+    --bg-secondary:#f5f5f5;
+    --bg-paraphrased:#dadada;
+    --bg-control-primary: #dfdfdf;
+    --bg-accent:#1B75BC;
+    --bg-summary:#151515;
+    --bg-details:#ECECEC;
+    --fg-primary:#000;
+    --fg-paraphrased:#222;
+    --bg-code:var(--bg-paraphrased);
+    --fg-border-primary:#bbb;
+    --fg-border-secondary:#aaa;
+    --fg-link:#4865FF;
+    --fg-control-border-primary: #8f8f8f;
+    --icon-switch:url("../icons/switch-black.svg");
+    --icon-sliders:url("../icons/sliders-black.svg");
+    --icon-picker:url("../icons/picker-black.svg");
+    --icon-help:url("../icons/help-black.svg");
+    --icon-sliders-pressed:url("../icons/sliders-white.svg");
+    --icon-picker-pressed:url("../icons/picker-white.svg");
+    --icon-help-pressed:url("../icons/help-white.svg");
+    --scheme-type:light;
+}
+
+html.force-dark {
+    --bg-primary:#121212;
+    --bg-secondary:#1f1f1f;
+    --bg-control-primary: #343434;
+    --bg-summary:#2f2f2f;
+    --bg-details:var(--bg-summary);
+    --bg-paraphrased:#1f1f1f;
+    --bg-code:var(--bg-paraphrased);
+    --fg-primary:#fff;
+    --fg-paraphrased:#dadada;
+    --fg-border-primary:#666;
+    --fg-border-secondary:#5a5a5a;
+    --fg-control-border-primary: #6f6f6f;
+    --fg-link:#58A5FF;
+    --icon-switch:url("../icons/switch-white.svg");
+    --icon-sliders:url("../icons/sliders-white.svg");
+    --icon-picker:url("../icons/picker-white.svg");
+    --icon-help:url("../icons/help-white.svg");
+    --icon-sliders-pressed:url("../icons/sliders-white.svg");
+    --icon-picker-pressed:url("../icons/picker-white.svg");
+    --icon-help-pressed:url("../icons/help-white.svg");
+    --scheme-type:dark;
 }
 
 h1 {
@@ -23,31 +126,39 @@ h3 {
 }
 
 a {
-    color: #4865FF;
+    color: var(--fg-link);
 }
 
 button, input {
     font-size: 1.2rem;
+    color-scheme: var(--scheme-type);
+    border: var(--fg-control-border-primary) solid 1px;
 }
 
+input[type=number] {
+    background-color: var(--bg-secondary);
+    color: var(--fg-primary);
+}
 select {
+    color-scheme: var(--scheme-type);
     font-size: 1rem;
+    background-color: var(--bg-secondary);
+    color: var(--fg-primary);
 }
-
 :focus {
     outline-color: orangered;
     outline-width: 3px;
 }
 
 button:focus {
-    outline-offset: -4px;
+    outline-offset: -1px;
 }
 
 code {
     font-size: 1.1em;
-    background: #eff8ff;
+    background: var(--bg-code);
     padding: 0.025em 0.3em;
-    border: 1px #aaa solid;
+    border: 1px var(--fg-border-secondary) solid;
     border-radius: 3px;
 }