TreeHugger

About

Username
TreeHugger
Joined
Visits
18
Last Active
Roles
Member
Points
31
Badges
5
  • Re: Dark Theme for LINQPad

    @kingkeith Yes, agreed. That's an issue with the editor. The focus of my post is mainly around making the HTML results feel like a dark theme. Sadly, there's not much we can do for the editor.

    Hopefully if Joe can spare some CPU cycles, he can make those snippet editing colours adapt based on the chosen background.
  • Dark Theme for LINQPad

    Hi all,

    New to the forum, thought I would share something with anyone who is interested to try it out.
    I read a few posts in the LINQPad User Voice about a Dark Theme and took a crack at making one for the editor AND results window.

    I've skinned the results grid, dump container headers and search highlighting, try CTRL SHIFT F :-)

    You'll notice the background is not fully black rgb(0,0,0), it's rgb(30,30,30) which is a little easier on the eyes when contrast with the eye-gouging white of the non-skinned windows.

    The Grid (cue Daft Punk now)

    image

    Dump Container Headers and some code

    image

    Search Results

    image


    How to set it up

    First job:

    Choose Edit > Preferences.

    On the "Editor" tab in the "Editor Background" fieldset,
    choose "Custom" then click the "Choose" button
    and click "Define Custom Colors >>" and enter the RGB values as 30,30,30.

    Second job (stay in Preferences):

    Over in the "Results" tab in the "Style sheet for text (HTML) results" fieldset,
    choose "Custom" then click the "Launch Editor" button and then click the "Ok"
    button to close Preferences (the LINQPad Stylesheet Editor will remain open).

    Now copy and paste the CSS from the bottom of this post into
    the "Customizations" window and click the "Apply Changes" button at
    the bottom of the editor.

    Move the stylesheet editor out of the way (or close it) and then query some data.

    You should now have a code editor and results window with a quasi-dark-theme :)

    Enjoy.

    PS. To remove it, just clear out all the CSS from the Customizations section of the LINQPad Stylesheet editor window.
    PPS. You might notice a few full colours (like #0f0) in the CSS, they're left over from me trying to find where they're used. Let me know what triggers them and I will tweak those colours as well.
    PPPS. Yes, I live in one of those countries where we put a "u" in the word color :)


    The CSS
    
    
    /* Dark Theme */
    
    body {
    	background: rgb(30,30,30);
    	color: rgb(220,220,220);
    }
    
    table {
    	border: 2px solid rgb(50,50,50);
    }
    
    table.limit {
    	border-collapse: collapse;
    	border-bottom: 2px solid #f0f;
    }
    
    td, th {
    	border: 1px solid rgb(50,50,50);
    	padding: 0.2em 0.2em;
    	padding-bottom: 0.5em;
    	padding-right: 1em;
    }
    
    th {
    	background-color: rgb(80,80,80);
    	border: 1px solid rgb(50,50,50);
    	color: rgb(220,220,220);
    }
    
    td.typeheader {
    	border: 1px solid rgb(50,50,50);
    	background-color: rgb(80,80,80);
    	color: rgb(220,220,220);
    	padding: 0.2em 0.2em;
    }
    
    a:link.typeheader, a:visited.typeheader, a:link.extenser, a:visited.extenser {
    	background-color: rgb(80,80,80);
    	color: rgb(220,220,220);
    }
    
    span.graphbar {
    	background: #17b;
    	color: #17b;
    }
    
    table.headingpresenter {
    	border-left: 10px solid rgb(232,139,12);
    }
    
    th.headingpresenter {
    	background-color: rgb(30,30,30);
    	color: #17b;
    }
    
    td.summary { 
    	background-color: #0f0;
    	color: #f00;
    }
    
    td.columntotal {
    	background-color: rgb(80,80,80);
    	color: rgb(220,220,220);
    }
    
    span.highlight {
    	background: rgb(255,250,13);
    	color: rgb(30,30,30);
    	font-weight: bold;
    	padding: 2px;
    }
    
    tr:hover {
    	background-color: rgb(0,0,0);
    }
    
    

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Badges